UNPKG

@vtaits/react-hook-form-schema

Version:

Integration of react-hook-form and @vtaits/form-schema

114 lines (112 loc) 2.62 kB
import { useOptionsCache } from "./chunk-W54VP7QK.js"; import { wrapOnChange } from "./chunk-7ZPD7GZF.js"; import { renderError } from "./chunk-XUSORK34.js"; // src/fields/checkboxGroup/checkboxGroup.tsx import { DEFAULT_LABEL_KEY, DEFAULT_VALUE_KEY, multiSelect as multiSelectBase } from "@vtaits/form-schema/fields/select"; import { useUI } from "@vtaits/react-form-schema-base-ui"; import { useMemo } from "react"; import { Controller, get } from "react-hook-form"; import { jsx } from "react/jsx-runtime"; function CheckboxGroupComponent({ renderParams: { fieldPath, fieldSchema: { disabled, label, hint, autoFocus, getOptionLabel: getOptionLabelParam, getOptionValue: getOptionValueParam, onChange = void 0, options, required, labelKey = DEFAULT_LABEL_KEY, valueKey = DEFAULT_VALUE_KEY } }, formResult, formResult: { control, formState: { errors } } }) { const { renderCheckboxGroup, renderWrapper } = useUI(); const error = renderError(get(errors, fieldPath)); const wrapperParams = { error, hint, label, name: fieldPath, required }; const getOptionLabel = useMemo(() => { if (getOptionLabelParam) { return getOptionLabelParam; } return (option) => option[labelKey]; }, [getOptionLabelParam, labelKey]); const getOptionValue = useMemo(() => { if (getOptionValueParam) { return getOptionValueParam; } return (option) => option[valueKey]; }, [getOptionValueParam, valueKey]); const optionsCacheRef = useOptionsCache(options, getOptionValue); return renderWrapper({ ...wrapperParams, children: /* @__PURE__ */ jsx( Controller, { control, name: fieldPath, render: ({ field }) => renderCheckboxGroup({ disabled, autoFocus, value: Array.isArray(field.value) ? field.value : [], name: fieldPath, getOptionLabel, getOptionValue, handleClear: () => { field.onChange(null); }, onChange: wrapOnChange( field.onChange, onChange, formResult, field.value ), options, optionsCacheRef, wrapper: wrapperParams }) } ) }); } var checkboxGroup = { ...multiSelectBase, render: (renderParams, formResult) => /* @__PURE__ */ jsx( CheckboxGroupComponent, { renderParams, formResult } ) }; export { checkboxGroup }; //# sourceMappingURL=chunk-TIUAR4AD.js.map