@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
115 lines (114 loc) • 7.97 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_Checkbox_a38238a1__ from "@mui/material/Checkbox";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormControl_a4a2c2a1__ from "@mui/material/FormControl";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormControlLabel_8c33cd98__ from "@mui/material/FormControlLabel";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormGroup_66d2bf25__ from "@mui/material/FormGroup";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormLabel_56bab49e__ from "@mui/material/FormLabel";
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 RHFMuiCheckboxGroup = (props)=>{
const { rhfinstance, rhf_rules, name = '', label = '', options = [], required = false, orientation = 'vertical', labelPlacement = 'end', permanentMessage = [], onChangeExtraHandler, formControlLabelProps, checkboxProps, formGroupProps, formControlProps, formLabelProps } = props;
const { control } = rhfinstance;
const [row, setAsRow] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
'horizontal' === orientation ? setAsRow(true) : setAsRow(false);
}, [
orientation
]);
const [myRequired, setMyRequired] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const requiredFromFormControlProps = formControlProps?.required;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
required || requiredFromFormControlProps ? setMyRequired(true) : setMyRequired(false);
}, [
required,
requiredFromFormControlProps
]);
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 }, fieldState: { error } })=>{
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if (!Array.isArray(value) && !isFieldArrayUsed) console.error(`For RHFMuiCheckboxGroup, initial value should be an array of object. e.g. [] or [{},{}]. 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_FormControl_a4a2c2a1__["default"], {
...formControlProps,
required: !!myRequired,
error: !!error,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormLabel_56bab49e__["default"], {
...formLabelProps,
sx: {
'.MuiFormLabel-asterisk': {
color: 'red'
}
},
children: label || ''
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormGroup_66d2bf25__["default"], {
...formGroupProps,
row: row,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: options?.map((option, index)=>{
const foundAsChecked = !!value?.length && value.find((item)=>item?.id === option?.id);
return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__mui_material_FormControlLabel_8c33cd98__["default"], {
...formControlLabelProps,
key: `${option?.id}_${index}`,
value: value || [],
control: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__["default"], {
...checkboxProps,
key: option?.id,
checked: !!foundAsChecked,
onChange: (e)=>{
if (foundAsChecked) {
const listOfCheckedItems = !!value?.length && value?.filter((item)=>{
if (item?.id !== option?.id) return item;
});
onChange([
...listOfCheckedItems
]);
} else onChange([
...value,
option
]);
if (!!onChangeExtraHandler) onChangeExtraHandler(e);
},
disabled: !!option?.isDisabled
}),
label: option?.optionLabel || '',
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 { RHFMuiCheckboxGroup };