steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-23 03:54:21 +00:00
Code Activity

🔧 Handle all types of values in Form.Select and Form.Multiselect

Browse source
This commit is contained in:
Steffo 2021-10-11 18:18:32 +02:00
parent 0eb8446a1a
commit 6db00e905d
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/forms/FormMultiselect.tsx
View file

@ -9,24 +9,28 @@ import {FormLabel, FormLabelProps} from "./FormLabel";
import {Multiselect, MultiselectProps} from "../inputs/Multiselect"; import {Multiselect, MultiselectProps} from "../inputs/Multiselect";
export interface FormMultiselectOptions { export interface FormMultiselectOptions<T> {
[key: string]: any, [key: string]: T,
} }
export interface FormMultiselectProps extends MultiselectProps { export interface FormMultiselectProps<T> {
label: string, label: string,
validity?: Types.Validity, validity?: Types.Validity,
options: FormMultiselectOptions, options: FormMultiselectOptions<T>,
pairProps?: FormPairProps, pairProps?: FormPairProps,
labelProps?: FormLabelProps, 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( const onSimpleChangeWrapped = React.useCallback(
values => { values => {
onSimpleChange?.(values.map((val: string) => options[val])) onSimpleChange?.(values.map((val: string) => options[val]))
@ -35,7 +39,7 @@ export function FormMultiselect({label, validity, pairProps, labelProps, onSimpl
) )
const optionComponents = React.useMemo( 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], [options],
) )

16
src/components/forms/FormSelect.tsx
View file

@ -9,24 +9,28 @@ import {FormLabel, FormLabelProps} from "./FormLabel";
import {Select, SelectProps} from "../inputs/Select"; import {Select, SelectProps} from "../inputs/Select";
export interface FormSelectOptions { export interface FormSelectOptions<T> {
[key: string]: any, [key: string]: T,
} }
export interface FormSelectProps extends SelectProps { export interface FormSelectProps<T> {
label: string, label: string,
validity?: Types.Validity, validity?: Types.Validity,
options: FormSelectOptions, options: FormSelectOptions<T>,
pairProps?: FormPairProps, pairProps?: FormPairProps,
labelProps?: FormLabelProps, 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( const onSimpleChangeWrapped = React.useCallback(
value => { value => {
onSimpleChange?.(options[value]) onSimpleChange?.(options[value])
@ -35,7 +39,7 @@ export function FormSelect({label, validity, options, pairProps, labelProps, onS
) )
const optionComponents = React.useMemo( 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], [options],
) )