feat: Add read-only select_multiple field support

digidem · Nov 12, 2019 · 0fc88e3 · 0fc88e3
1 parent b0535b1
commit 0fc88e3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/src/ObservationDialog/Field.js b/src/ObservationDialog/Field.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react'
 import { useIntl } from 'react-intl'
-import { SelectOne } from './Select'
+import { SelectOne, SelectMultiple } from './Select'
 import TextField from './TextField'
 import DateField from './DateField'
 import DateTimeField from './DateTimeField'
@@ -50,6 +50,8 @@ const Field = ({ field, value, onChange }: Props) => {
           placeholder={placeholder}
         />
       )
+    case 'select_multiple':
+      return <SelectMultiple value={value} label={label} />
     case 'number':
       return (
         <TextField

diff --git a/src/ObservationDialog/ObservationDialog.stories.js b/src/ObservationDialog/ObservationDialog.stories.js
@@ -28,7 +28,14 @@ const getPreset = observation => {
     geometry: ['point'],
     name: (observation.tags && observation.tags.name) || '',
     tags: {},
-    fields: fields.slice(0, 5),
+    fields: fields.slice(0, 5).concat([
+      {
+        id: 'multi-field',
+        key: ['multi'],
+        options: ['one', 'two', 'three'],
+        type: 'select_multiple'
+      }
+    ]),
     additionalFields: fields.slice(5)
   }
 }
@@ -50,6 +57,7 @@ export const openClose = () => {
   const [open, setOpen] = React.useState(false)
   const obs =
     exampleObservations[Math.floor(Math.random() * exampleObservations.length)]
+  obs.tags.multi = ['one', 'two', 'three']
   return (
     <>
       <Button onClick={() => setOpen(true)}>Open Dialog</Button>

diff --git a/src/ObservationDialog/Select.js b/src/ObservationDialog/Select.js
@@ -264,6 +264,16 @@ export const SelectOne = ({
   )
 }
 
+export const SelectMultiple = ({ value, label }: Props) => {
+  return (
+    <TextField
+      value={Array.isArray(value) ? value.join(', ') : value}
+      label={label}
+      disabled
+    />
+  )
+}
+
 // for two values, if strings, compare lower case, otherwise strict equal
 function lowerCaseEqual(a: any, b: any) {
   if (typeof a === 'string' && typeof b === 'string') {

diff --git a/src/ObservationDialog/Select.stories.js b/src/ObservationDialog/Select.stories.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 
-import { SelectOne } from './Select'
+import { SelectOne, SelectMultiple } from './Select'
 
 const countries = [
   { label: 'Afghanistan', value: true },
@@ -72,3 +72,7 @@ export const defaultStory = () => (
 defaultStory.story = {
   name: 'default'
 }
+
+export const selectMultiple = () => (
+  <SelectMultiple label="Select Country" value={['England', 'Scotland']} />
+)