diff --git a/package-lock.json b/package-lock.json index d36b591..ebe8abb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1341,11 +1341,74 @@ } } }, + "@emotion/babel-utils": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz", + "integrity": "sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==", + "requires": { + "@emotion/hash": "^0.6.6", + "@emotion/memoize": "^0.6.6", + "@emotion/serialize": "^0.9.1", + "convert-source-map": "^1.5.1", + "find-root": "^1.1.0", + "source-map": "^0.7.2" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", + "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" + }, + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" + } + } + }, "@emotion/hash": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz", "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" }, + "@emotion/memoize": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", + "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==" + }, + "@emotion/serialize": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz", + "integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==", + "requires": { + "@emotion/hash": "^0.6.6", + "@emotion/memoize": "^0.6.6", + "@emotion/unitless": "^0.6.7", + "@emotion/utils": "^0.8.2" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", + "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" + } + } + }, + "@emotion/stylis": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz", + "integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==" + }, + "@emotion/unitless": { + "version": "0.6.7", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz", + "integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==" + }, + "@emotion/utils": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz", + "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==" + }, "@firebase/app": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.3.8.tgz", @@ -2790,6 +2853,37 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-emotion": { + "version": "9.2.11", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz", + "integrity": "sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/babel-utils": "^0.6.4", + "@emotion/hash": "^0.6.2", + "@emotion/memoize": "^0.6.1", + "@emotion/stylis": "^0.7.0", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "find-root": "^1.1.0", + "mkdirp": "^0.5.1", + "source-map": "^0.5.7", + "touch": "^2.0.1" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", + "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, "babel-plugin-import": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz", @@ -2813,6 +2907,15 @@ "require-package-name": "^2.0.1" } }, + "babel-plugin-macros": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.4.5.tgz", + "integrity": "sha512-+/9yteNQw3yuZ3krQUfjAeoT/f4EAdn3ELwhFfDj0rTMIaoHfIdrcLePOfIaL0qmFLpIcgPIL2Lzm58h+CGWaw==", + "requires": { + "cosmiconfig": "^5.0.5", + "resolve": "^1.8.1" + } + }, "babel-plugin-react-transform": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-react-transform/-/babel-plugin-react-transform-3.0.0.tgz", @@ -2849,6 +2952,11 @@ "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-trailing-function-commas": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz", @@ -4629,6 +4737,27 @@ "elliptic": "^6.0.0" } }, + "create-emotion": { + "version": "9.2.12", + "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.12.tgz", + "integrity": "sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==", + "requires": { + "@emotion/hash": "^0.6.2", + "@emotion/memoize": "^0.6.1", + "@emotion/stylis": "^0.7.0", + "@emotion/unitless": "^0.6.2", + "csstype": "^2.5.2", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", + "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" + } + } + }, "create-hash": { "version": "1.2.0", "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", @@ -5705,6 +5834,15 @@ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, + "emotion": { + "version": "9.2.12", + "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.12.tgz", + "integrity": "sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==", + "requires": { + "babel-plugin-emotion": "^9.2.11", + "create-emotion": "^9.2.12" + } + }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -6550,6 +6688,11 @@ "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz", "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=" }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", @@ -10292,6 +10435,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, + "lodash.deburr": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz", + "integrity": "sha1-3bG7s+8HRYwBd7oH3hRCLLAz/5s=" + }, "lodash.differenceby": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/lodash.differenceby/-/lodash.differenceby-4.8.0.tgz", @@ -10781,6 +10929,11 @@ "mimic-fn": "^1.0.0" } }, + "memoize-one": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -14689,6 +14842,14 @@ "prop-types": "^15.5.8" } }, + "react-input-autosize": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz", + "integrity": "sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-intl": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.8.0.tgz", @@ -15008,6 +15169,20 @@ "react-prop-toggle": "^1.0.2" } }, + "react-select": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.3.0.tgz", + "integrity": "sha512-CD3jyZs5lwy/CHW3SdYU1d1FtmJxgvVPdKMwEE8dD6MyNANFtvW95P/V20StPsPppFY7oePv/i2Mun2C2+WgTA==", + "requires": { + "classnames": "^2.2.5", + "emotion": "^9.1.2", + "memoize-one": "^4.0.0", + "prop-types": "^15.6.0", + "raf": "^3.4.0", + "react-input-autosize": "^2.2.1", + "react-transition-group": "^2.2.1" + } + }, "react-side-effect": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz", @@ -17041,6 +17216,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supercluster": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-4.1.1.tgz", @@ -17419,6 +17604,24 @@ "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=", "dev": true }, + "touch": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz", + "integrity": "sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==", + "requires": { + "nopt": "~1.0.10" + }, + "dependencies": { + "nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=", + "requires": { + "abbrev": "1" + } + } + } + }, "tough-cookie": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", diff --git a/package.json b/package.json index eb1057c..97c107f 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "bind-decorator": "^1.0.11", "butter-toast": "^3.2.1", "cinnamon-sugar": "^1.0.0", + "classnames": "^2.2.6", "compression": "^1.7.1", "cors": "^2.8.4", "cross-spawn": "^6.0.5", @@ -72,6 +73,7 @@ "less": "^3.8.1", "load-google-maps-api": "^1.0.0", "lodash.capitalize": "^4.2.1", + "lodash.deburr": "^4.1.0", "lodash.differenceby": "^4.8.0", "lodash.get": "^4.4.2", "lodash.omit": "^4.5.0", @@ -88,6 +90,7 @@ "moment": "^2.24.0", "nwbuild": "0.0.5", "parcel-bundler": "^1.11.0", + "prop-types": "^15.6.2", "raw-loader": "^0.5.1", "rc-queue-anim": "^1.6.10", "rc-table": "^6.4.3", @@ -124,6 +127,7 @@ "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-scroll-horizontal": "^1.6.2", + "react-select": "^2.3.0", "react-slick": "^0.23.2", "react-sortable-hoc": "^0.8.3", "react-swipeable-views": "^0.13.1", diff --git a/scripts/dev-parcel.js b/scripts/dev-parcel.js index ce733cc..4cb07bd 100644 --- a/scripts/dev-parcel.js +++ b/scripts/dev-parcel.js @@ -3,5 +3,5 @@ const spawn = require("cross-spawn"); require("./link-assets")(); // Spawn NPM synchronously -const result = spawn.sync('parcel', 'public/index.parcel.html --log-level 4 --out-file index.html --global $'.split(" "), { stdio: 'inherit' }); +const result = spawn.sync('parcel', 'public/index.parcel.html --out-file index.html --global $'.split(" "), { stdio: 'inherit' }); diff --git a/src/common/components/AutoComplete/index.js b/src/common/components/AutoComplete/index.js new file mode 100644 index 0000000..6356ae3 --- /dev/null +++ b/src/common/components/AutoComplete/index.js @@ -0,0 +1,235 @@ +/* eslint-disable react/prop-types, react/jsx-handler-names */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Select from 'react-select'; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import NoSsr from '@material-ui/core/NoSsr'; +import TextField from '@material-ui/core/TextField'; +import Paper from '@material-ui/core/Paper'; +import Chip from '@material-ui/core/Chip'; +import MenuItem from '@material-ui/core/MenuItem'; +import CancelIcon from '@material-ui/icons/Cancel'; +import { emphasize } from '@material-ui/core/styles/colorManipulator'; + +const styles = theme => ({ + root: { + flexGrow: 1, + // height: 250, + }, + input: { + display: 'flex', + padding: 0, + }, + valueContainer: { + display: 'flex', + flexWrap: 'wrap', + flex: 1, + alignItems: 'center', + overflow: 'hidden', + }, + chip: { + margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + }, + chipFocused: { + backgroundColor: emphasize( + theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + 0.08, + ), + }, + noOptionsMessage: { + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + }, + singleValue: { + fontSize: 16, + }, + placeholder: { + position: 'absolute', + left: 2, + fontSize: 16, + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing.unit, + left: 0, + right: 0, + }, + divider: { + height: theme.spacing.unit * 2, + }, +}); + +function NoOptionsMessage(props) { + return ( + + {props.children} + + ); +} + +function inputComponent({ inputRef, ...props }) { + return
; +} + +function Control(props) { + return ( + + ); +} + +function Option(props) { + return ( + + {props.children} + + ); +} + +function Placeholder(props) { + return ( + + {props.children} + + ); +} + +function SingleValue(props) { + return ( + + {props.children} + + ); +} + +function ValueContainer(props) { + return
{props.children}
; +} + +function MultiValue(props) { + return ( + } + /> + ); +} + +function Menu(props) { + return ( + + {props.children} + + ); +} + +const components = { + Control, + Menu, + MultiValue, + NoOptionsMessage, + Option, + Placeholder, + SingleValue, + ValueContainer, +}; + +class IntegrationReactSelect extends React.Component { + state = { + single: null, + multi: null, + }; + + handleChange = name => value => { + + const {onChange=()=>{}} = this.props; + + onChange(value); + + this.setState({ + [name]: value, + }); + }; + + render() { + const { classes, theme } = this.props; + + const selectStyles = { + input: base => ({ + ...base, + color: theme.palette.text.primary, + '& input': { + font: 'inherit', + // padding: '15px' + }, + padding: '15px' + }), + }; + + return ( +
+ +