36 lines
1.1 KiB
TypeScript
Executable File
36 lines
1.1 KiB
TypeScript
Executable File
import {useController} from 'react-hook-form';
|
|
import React, {useMemo} from 'react';
|
|
import {mergeProps} from '@react-aria/utils';
|
|
import {
|
|
ChipField,
|
|
ChipValue,
|
|
} from '../../ui/forms/input-field/chip-field/chip-field';
|
|
import {FormChipFieldProps} from '../../ui/forms/input-field/chip-field/form-chip-field';
|
|
|
|
export function JsonChipField({children, ...props}: FormChipFieldProps<any>) {
|
|
const {
|
|
field: {onChange, onBlur, value = [], ref},
|
|
fieldState: {invalid, error},
|
|
} = useController({
|
|
name: props.name,
|
|
});
|
|
|
|
const arrayValue = useMemo(() => {
|
|
const mixedValue = value as string | string[];
|
|
return typeof mixedValue === 'string' ? JSON.parse(mixedValue) : mixedValue;
|
|
}, [value]);
|
|
|
|
const formProps: Partial<FormChipFieldProps<ChipValue>> = {
|
|
onChange: newValue => {
|
|
const jsonValue = JSON.stringify(newValue.map(chip => chip.name));
|
|
onChange(jsonValue);
|
|
},
|
|
onBlur,
|
|
value: arrayValue,
|
|
invalid,
|
|
errorMessage: error?.message,
|
|
};
|
|
|
|
return <ChipField ref={ref} {...mergeProps(formProps, props)} />;
|
|
}
|