Custom useConvert
useConvert is used to adopt form props to the form component.
For example React Date Picker wants these essential props
selected: Date | null
onChange: (date: Date | null) => void
This is where useConvert come into play. It accepts rffFormControl
and return props suitable to React Date Picker.
<Field /> with React Date Picker can be reused in several places in the App,
as useConvert is not bound to a specific form.
const useReactSelectConvert: ConvertHook<
any,
Pick<
ReactSelectProps<unknown, false, GroupBase<unknown>>,
"value" | "onChange"
>
> = ({ formControl: { values, setFieldValue }, rffName }) => {
const value = getIn<any>({ name: rffName, values });
const onChange = useCallback<
NonNullable<
ReactSelectProps<unknown, false, GroupBase<unknown>>["onChange"]
>
>(
(value) => {
setFieldValue<any>(rffName, value);
},
[rffName, setFieldValue],
);
return {
value,
onChange,
};
};
const useDatePickerConvert: ConvertHook<
any,
{
selected: Date | null;
onChange: NonNullable<DatePickerProps["onChange"]>;
value?: undefined;
}
> = ({ formControl: { values, setFieldValue }, rffName }) => {
const selected = getIn<any>({ name: rffName, values });
const onChange = useCallback<NonNullable<DatePickerProps["onChange"]>>(
(value: any) => {
setFieldValue<any>(rffName, value);
},
[rffName, setFieldValue],
);
return {
selected,
onChange,
};
};
// ... Other code ...
<label>Date</label>
<Field
rffUseConvert={useDatePickerConvert}
rffFormControl={formControl}
rffName="date"
rffComponent={DatePicker as any}
/>
<label>Color</label>
<Field
rffUseConvert={useReactSelectConvert}
rffFormControl={formControl}
rffName="color"
rffComponent={Select<Color>}
options={colors}
/>