From 6db00e905d15c5b9f12830be8b046a56d8109b6a Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 18:18:32 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Handle=20all=20types=20of=20valu?=
 =?UTF-8?q?es=20in=20`Form.Select`=20and=20`Form.Multiselect`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/FormMultiselect.tsx | 16 ++++++++++------
 src/components/forms/FormSelect.tsx      | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/forms/FormMultiselect.tsx b/src/components/forms/FormMultiselect.tsx
index 7568839..8cd7260 100644
--- a/src/components/forms/FormMultiselect.tsx
+++ b/src/components/forms/FormMultiselect.tsx
@@ -9,24 +9,28 @@ import {FormLabel, FormLabelProps} from "./FormLabel";
 import {Multiselect, MultiselectProps} from "../inputs/Multiselect";
 
 
-export interface FormMultiselectOptions {
-    [key: string]: any,
+export interface FormMultiselectOptions<T> {
+    [key: string]: T,
 }
 
 
-export interface FormMultiselectProps extends MultiselectProps {
+export interface FormMultiselectProps<T> {
     label: string,
 
     validity?: Types.Validity,
 
-    options: FormMultiselectOptions,
+    options: FormMultiselectOptions<T>,
 
     pairProps?: FormPairProps,
     labelProps?: FormLabelProps,
+
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    onSimpleChange?: (value: T[]) => void,
+    value?: T[],
 }
 
 
-export function FormMultiselect({label, validity, pairProps, labelProps, onSimpleChange, options, value, ...props}: FormMultiselectProps): JSX.Element {
+export function FormMultiselect<T>({label, validity, pairProps, labelProps, onSimpleChange, options, value, ...props}: FormMultiselectProps<T>): JSX.Element {
     const onSimpleChangeWrapped = React.useCallback(
         values => {
             onSimpleChange?.(values.map((val: string) => options[val]))
@@ -35,7 +39,7 @@ export function FormMultiselect({label, validity, pairProps, labelProps, onSimpl
     )
 
     const optionComponents = React.useMemo(
-        () => Object.keys(options).map(key => <Multiselect.Option value={key} key={key} selected={value?.includes(key)}/>),
+        () => Object.entries(options).map(([optKey, optValue]) => <Multiselect.Option value={optKey} key={optKey} selected={value?.includes(optValue)}/>),
         [options],
     )
 
diff --git a/src/components/forms/FormSelect.tsx b/src/components/forms/FormSelect.tsx
index 0e32b96..fa92166 100644
--- a/src/components/forms/FormSelect.tsx
+++ b/src/components/forms/FormSelect.tsx
@@ -9,24 +9,28 @@ import {FormLabel, FormLabelProps} from "./FormLabel";
 import {Select, SelectProps} from "../inputs/Select";
 
 
-export interface FormSelectOptions {
-    [key: string]: any,
+export interface FormSelectOptions<T> {
+    [key: string]: T,
 }
 
 
-export interface FormSelectProps extends SelectProps {
+export interface FormSelectProps<T> {
     label: string,
 
     validity?: Types.Validity,
 
-    options: FormSelectOptions,
+    options: FormSelectOptions<T>,
 
     pairProps?: FormPairProps,
     labelProps?: FormLabelProps,
+
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    onSimpleChange?: (value: T) => void,
+    value?: T,
 }
 
 
-export function FormSelect({label, validity, options, pairProps, labelProps, onSimpleChange, value, ...props}: FormSelectProps): JSX.Element {
+export function FormSelect<T>({label, validity, options, pairProps, labelProps, onSimpleChange, value, ...props}: FormSelectProps<T>): JSX.Element {
     const onSimpleChangeWrapped = React.useCallback(
         value => {
             onSimpleChange?.(options[value])
@@ -35,7 +39,7 @@ export function FormSelect({label, validity, options, pairProps, labelProps, onS
     )
 
     const optionComponents = React.useMemo(
-        () => Object.keys(options).map(key => <Select.Option value={key} key={key} selected={value === key}/>),
+        () => Object.entries(options).map(([optKey, optValue]) => <Select.Option value={optKey} key={optKey} selected={value === optValue}/>),
         [options],
     )