@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
99 lines (98 loc) • 6.73 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_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__mui_material_Radio_5fc0111b__ from "@mui/material/Radio";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
const RHFMuiRadioGroup = (props)=>{
const { rhfinstance, rhf_rules, name = '', label = '', options = [], required = false, orientation = 'vertical', labelPlacement = 'end', permanentMessage = [], onChangeExtraHandler, formControlLabelProps, radioProps, 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 } })=>/*#__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'
},
...formLabelProps?.sx
},
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?.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_Radio_5fc0111b__["default"], {
...radioProps,
key: option?.id,
checked: !!foundAsChecked,
onChange: (e)=>{
onChange(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 { RHFMuiRadioGroup };