feat: use @material-ui/lab/Autocomplete for SelectMultiple

digidem · May 20, 2020 · aced10d · aced10d
1 parent 14f3809
commit aced10d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "@mapbox/sexagesimal": "^1.2.0",
     "@material-ui/core": "^4.4.2",
     "@material-ui/icons": "^4.4.1",
+    "@material-ui/lab": "^4.0.0-alpha.53",
     "@material-ui/pickers": "^3.2.6",
     "@segment/isodate": "^1.0.3",
     "clone-deep": "^4.0.1",

diff --git a/src/ObservationDialog/Select.js b/src/ObservationDialog/Select.js
@@ -5,6 +5,7 @@ import TextField from './TextField'
 import Popper from '@material-ui/core/Popper'
 import Paper from '@material-ui/core/Paper'
 import MenuItem from '@material-ui/core/MenuItem'
+import Autocomplete from '@material-ui/lab/Autocomplete'
 import matchSorter from 'match-sorter'
 import { useIntl, defineMessages } from 'react-intl'
 import { makeStyles } from '@material-ui/core/styles'
@@ -119,6 +120,7 @@ function getSuggestions(
 }
 
 type Props = {
+  id: string,
   value: SelectableFieldValue,
   placeholder?: string,
   onChange: (value: SelectableFieldValue) => any,
@@ -131,6 +133,7 @@ type Props = {
  * for each item must be unique for this to work reliably
  */
 export const SelectOne = ({
+  id,
   value,
   placeholder,
   onChange,
@@ -180,7 +183,7 @@ export const SelectOne = ({
 
   return (
     <Downshift
-      id="downshift-popper"
+      id={id}
       selectedItem={typeof displayValue === 'string' ? displayValue : ''}
       onStateChange={onStateChange}>
       {({
@@ -264,12 +267,28 @@ export const SelectOne = ({
   )
 }
 
-export const SelectMultiple = ({ value, label }: Props) => {
+export const SelectMultiple = ({
+  id,
+  value,
+  label,
+  options,
+  placeholder,
+  onChange,
+  ...props
+}: Props) => {
+  const classes = useStyles()
   return (
-    <TextField
-      value={Array.isArray(value) ? value.join(', ') : value}
-      label={label}
-      disabled
+    <Autocomplete
+      id={id}
+      multiple
+      freeSolo
+      value={value}
+      onChange={(e, v) => onChange(v)}
+      options={options.map(op => (typeof op === 'object' ? op.label : op))}
+      renderInput={params =>
+        renderInput({ ...params, classes, label, placeholder })
+      }
+      {...props}
     />
   )
 }

diff --git a/src/ObservationDialog/Select.stories.js b/src/ObservationDialog/Select.stories.js
@@ -44,11 +44,12 @@ const countries = [
 ].map(item => ({ label: item.label, value: item.value || item.label }))
 
 const StateContainer = ({
+  initialValue,
   children
 }: {
   children: (any, (any) => any) => React.Node
 }) => {
-  const [state, setState] = React.useState('')
+  const [state, setState] = React.useState(initialValue)
   return children(state, setState)
 }
 
@@ -57,7 +58,7 @@ export default {
 }
 
 export const defaultStory = () => (
-  <StateContainer>
+  <StateContainer initialValue={''}>
     {(value, setValue) => (
       <SelectOne
         label="Select Country"
@@ -74,5 +75,14 @@ defaultStory.story = {
 }
 
 export const selectMultiple = () => (
-  <SelectMultiple label="Select Country" value={['England', 'Scotland']} />
+  <StateContainer initialValue={['Botswana']}>
+    {(value, setValue) => (
+      <SelectMultiple
+        label="Select Countries"
+        options={countries}
+        value={value}
+        onChange={setValue}
+      />
+    )}
+  </StateContainer>
 )