✨ Improve onSimpleChange for FormSelect and FormMultiselect

`Select` and `Multiselect` inputs were left untouched as they might be used differently

src/components/forms/FormMultiselect.stories.jsx

@@ -32,4 +32,16 @@ export const FormMultiselect = props => (
 )
 FormMultiselect.args = {
     label: "Favourite colors",
+    options: {
+        "Red": "COLOR_RED",
+        "Orange": "COLOR_ORANGE",
+        "Yellow": "COLOR_YELLOW",
+        "Green": "COLOR_GREEN",
+        "Cyan": "COLOR_CYAN",
+        "Blue": "COLOR_BLUE",
+        "Purple": "COLOR_PURPLE",
+        "White": "COLOR_WHITE",
+        "Black": "COLOR_BLACK",
+        "Grey": "COLOR_GREY",
+    }
 }

src/components/forms/FormMultiselect.tsx

@@ -3,31 +3,47 @@ import * as ReactDOM from "react-dom"
 import * as Types from "../../types"
 import {BaseElement} from "../BaseElement"
 import mergeClassNames from "classnames"
+import {Select} from "../inputs/Select"
 import {FormPair, FormPairProps} from "./FormPair";
 import {FormLabel, FormLabelProps} from "./FormLabel";
 import {Multiselect, MultiselectProps} from "../inputs/Multiselect";
 
 
+export interface FormMultiselectOptions {
+    [key: string]: any,
+}
+
+
 export interface FormMultiselectProps extends MultiselectProps {
     label: string,
 
     validity?: Types.Validity,
 
+    options: FormMultiselectOptions,
+
     pairProps?: FormPairProps,
     labelProps?: FormLabelProps,
 }
 
 
-export function FormMultiselect({label, validity, pairProps, labelProps, ...props}: FormMultiselectProps): JSX.Element {
+export function FormMultiselect({label, validity, pairProps, labelProps, onSimpleChange, options, ...props}: FormMultiselectProps): JSX.Element {
+    const onSimpleChangeWrapped = React.useCallback(
+        values => {
+            onSimpleChange?.(values.map((val: string) => options[val]))
+        },
+        [onSimpleChange, options]
+    )
+
     return (
         <FormPair
             label={<FormLabel {...labelProps}>{label}</FormLabel>}
-            input={<Multiselect {...props}/>}
+            input={
+                <Multiselect onSimpleChange={onSimpleChangeWrapped} {...props}>
+                    {Object.keys(options).map(key => <Multiselect.Option value={key}/>)}
+                </Multiselect>
+            }
             validity={validity}
             {...pairProps}
         />
     )
 }
-
-
-FormMultiselect.Option = Multiselect.Option

src/components/forms/FormSelect.stories.jsx

@@ -25,4 +25,9 @@ export const FormSelect = props => (
 )
 FormSelect.args = {
     label: "Ready check",
+    options: {
+        "I'm ready!": "READY",
+        "Please wait...": "WAIT",
+        "I won't be there.": "NO",
+    },
 }

src/components/forms/FormSelect.tsx

@@ -8,25 +8,41 @@ import {FormLabel, FormLabelProps} from "./FormLabel";
 import {Select, SelectProps} from "../inputs/Select";
 
 
+export interface FormSelectOptions {
+    [key: string]: any,
+}
+
+
 export interface FormSelectProps extends SelectProps {
     label: string,
 
     validity?: Types.Validity,
 
+    options: FormSelectOptions,
+
     pairProps?: FormPairProps,
     labelProps?: FormLabelProps,
 }
 
 
-export function FormSelect({label, validity, pairProps, labelProps, ...props}: FormSelectProps): JSX.Element {
+export function FormSelect({label, validity, options, pairProps, labelProps, onSimpleChange, ...props}: FormSelectProps): JSX.Element {
+    const onSimpleChangeWrapped = React.useCallback(
+        value => {
+            onSimpleChange?.(options[value])
+        },
+        [onSimpleChange, options]
+    )
+
     return (
         <FormPair
             label={<FormLabel {...labelProps}>{label}</FormLabel>}
-            input={<Select {...props}/>}
+            input={
+                <Select onSimpleChange={onSimpleChangeWrapped} {...props}>
+                    {Object.keys(options).map(key => <Select.Option value={key}/>)}
+                </Select>
+            }
             validity={validity}
             {...pairProps}
         />
     )
 }
-
-FormSelect.Option = Select.Option