steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34: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";
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],
)

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

@ -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],
)