@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
87 lines (86 loc) • 5.51 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__ from "@mui/material/Checkbox";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormControlLabel_8c33cd98__ from "@mui/material/FormControlLabel";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
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 RHFMuiCheckbox = (props)=>{
const { rhfinstance, rhf_rules, name, label, disabled = false, required = false, labelPlacement = 'end', permanentMessage = '', onChangeExtraHandler, formControlLabelProps, checkboxProps } = props;
const { control } = rhfinstance;
const [myRequired, setMyRequired] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const requiredFromformControlLabelProps = formControlLabelProps?.required;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
required || requiredFromformControlLabelProps ? setMyRequired(true) : setMyRequired(false);
}, [
required,
requiredFromformControlLabelProps
]);
const [myDisabled, setMyDisabled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const disabledFromCheckboxProps = checkboxProps?.disabled;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
disabled || disabledFromCheckboxProps ? setMyDisabled(true) : setMyDisabled(false);
}, [
disabledFromCheckboxProps,
disabled
]);
const [myLabelPlacement, setMyLabelPlacement] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('end');
const labelPlacementFromFormControlLabelProps = formControlLabelProps?.labelPlacement;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
setMyLabelPlacement(labelPlacementFromFormControlLabelProps || labelPlacement);
}, [
labelPlacementFromFormControlLabelProps,
labelPlacement
]);
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, ref }, fieldState: { error } })=>{
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if ('boolean' != typeof value && !isFieldArrayUsed) console.error(`For RHFMuiCheckbox, initial value should be a boolean type. e.g. true or false. Please check with name = "${name}".`);
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_FormControlLabel_8c33cd98__["default"], {
...formControlLabelProps,
sx: {
'.MuiFormControlLabel-asterisk': {
color: 'red'
},
...formControlLabelProps?.sx
},
value: value,
inputRef: ref,
control: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__["default"], {
...checkboxProps,
checked: value,
onChange: (e)=>{
onChange(e.target.checked);
if (!!onChangeExtraHandler) onChangeExtraHandler(e);
},
disabled: !!myDisabled,
required: !!myRequired
}),
label: label,
labelPlacement: myLabelPlacement
}),
!!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 { RHFMuiCheckbox };