From bc64c160e69d97ad1c550401931f91b3bdf1b296 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 10 Oct 2021 18:09:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improve=20`onSimpleChange`=20for=20?=
 =?UTF-8?q?`FormSelect`=20and=20`FormMultiselect`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`Select` and `Multiselect` inputs were left untouched as they might be used differently
---
 .../forms/FormMultiselect.stories.jsx         | 12 +++++++++
 src/components/forms/FormMultiselect.tsx      | 26 +++++++++++++++----
 src/components/forms/FormSelect.stories.jsx   |  5 ++++
 src/components/forms/FormSelect.tsx           | 24 ++++++++++++++---
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/forms/FormMultiselect.stories.jsx b/src/components/forms/FormMultiselect.stories.jsx
index 8d3dec9..a7a2ff9 100644
--- a/src/components/forms/FormMultiselect.stories.jsx
+++ b/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",
+    }
 }
diff --git a/src/components/forms/FormMultiselect.tsx b/src/components/forms/FormMultiselect.tsx
index 1d08c0f..5602222 100644
--- a/src/components/forms/FormMultiselect.tsx
+++ b/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
\ No newline at end of file
diff --git a/src/components/forms/FormSelect.stories.jsx b/src/components/forms/FormSelect.stories.jsx
index 1684f2a..7b1a722 100644
--- a/src/components/forms/FormSelect.stories.jsx
+++ b/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",
+    },
 }
diff --git a/src/components/forms/FormSelect.tsx b/src/components/forms/FormSelect.tsx
index 06d47c0..c1e94c9 100644
--- a/src/components/forms/FormSelect.tsx
+++ b/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