@vtaits/react-hook-form-schema
Version:
Integration of react-hook-form and @vtaits/form-schema
114 lines (112 loc) • 2.62 kB
JavaScript
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