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 { + [key: string]: T, } -export interface FormMultiselectProps extends MultiselectProps { +export interface FormMultiselectProps { label: string, validity?: Types.Validity, - options: FormMultiselectOptions, + options: FormMultiselectOptions, pairProps?: FormPairProps, labelProps?: FormLabelProps, + + onChange?: (event: React.ChangeEvent) => void, + onSimpleChange?: (value: T[]) => void, + value?: T[], } -export function FormMultiselect({label, validity, pairProps, labelProps, onSimpleChange, options, value, ...props}: FormMultiselectProps): JSX.Element { +export function FormMultiselect({label, validity, pairProps, labelProps, onSimpleChange, options, value, ...props}: FormMultiselectProps): 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 => ), + () => Object.entries(options).map(([optKey, 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 { + [key: string]: T, } -export interface FormSelectProps extends SelectProps { +export interface FormSelectProps { label: string, validity?: Types.Validity, - options: FormSelectOptions, + options: FormSelectOptions, pairProps?: FormPairProps, labelProps?: FormLabelProps, + + onChange?: (event: React.ChangeEvent) => void, + onSimpleChange?: (value: T) => void, + value?: T, } -export function FormSelect({label, validity, options, pairProps, labelProps, onSimpleChange, value, ...props}: FormSelectProps): JSX.Element { +export function FormSelect({label, validity, options, pairProps, labelProps, onSimpleChange, value, ...props}: FormSelectProps): 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 => ), + () => Object.entries(options).map(([optKey, optValue]) => ), [options], )