mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 19:44:21 +00:00
🔧 Handle all types of values in Form.Select
and Form.Multiselect
This commit is contained in:
parent
0eb8446a1a
commit
6db00e905d
2 changed files with 20 additions and 12 deletions
|
@ -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],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -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],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue