@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
59 lines (58 loc) • 4.53 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_ToggleButton_d229af9c__ from "@mui/material/ToggleButton";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_ToggleButtonGroup_53a2feca__ from "@mui/material/ToggleButtonGroup";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
import * as __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__ from "../../utilities/isNameBelongsToFieldArray.js";
const RHFMuiToggleButtonGroup = (props)=>{
const { rhfinstance, rhf_rules, name = '', options = [], multiple = false, permanentMessage = [], onChangeExtraHandler, toggleButtonGroupProps, toggleButtonProps } = props;
const { control } = rhfinstance;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.Controller, {
control: control,
name: name || '',
rules: rhf_rules,
render: ({ field: { value, onChange }, fieldState: { error } })=>{
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if (!multiple && 'string' != typeof value && !isFieldArrayUsed) console.error(`For ToggleButtonGroup, 'multiple' is disabled. So it's initial value should be a string type. e.g.'' or 'anyString', Please check with name = "${name}".`);
if (!!multiple && !Array.isArray(value) && !isFieldArrayUsed) console.error(`For ToggleButtonGroup, 'multiple' is enabled. So it's initial value should be an array of string. e.g.[]. Please check with name = "${name}".`);
const emptyValue = multiple ? [] : '';
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_ToggleButtonGroup_53a2feca__["default"], {
color: "primary",
...toggleButtonGroupProps,
value: value || emptyValue,
exclusive: !multiple || false,
onChange: (e, newValue)=>{
onChange(newValue);
if (!!onChangeExtraHandler) onChangeExtraHandler(e, newValue);
},
children: options?.map((option, index)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__mui_material_ToggleButton_d229af9c__["default"], {
...toggleButtonProps,
key: option?.id,
value: option?.value,
disabled: !!option?.isDisabled,
"aria-label": option?.value
}, option?.customOptionLabel ? option?.customOptionLabel() : option?.optionLabel))
}),
!!permanentMessage && 'function' == typeof permanentMessage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: permanentMessage()
}),
!!permanentMessage && 'string' == typeof permanentMessage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: permanentMessage
}),
!!error && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: error?.message || ''
})
]
});
}
});
};
export { RHFMuiToggleButtonGroup };