@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
78 lines (77 loc) • 4.94 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_MenuItem_25e2acb5__ from "@mui/material/MenuItem";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_TextField_4cf233bd__ from "@mui/material/TextField";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_styles_19cb2acd__ from "@mui/material/styles";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
const RHFMuiSelectSingle = (props)=>{
const { rhfinstance, rhf_rules, name = '', label = '', permanentMessage, onChangeExtraHandler, children, ...restProps } = props;
(0, __WEBPACK_EXTERNAL_MODULE__mui_material_styles_19cb2acd__.useTheme)();
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, ref }, 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__.jsxs)(__WEBPACK_EXTERNAL_MODULE__mui_material_TextField_4cf233bd__["default"], {
...props,
id: restProps?.id || `${name}_rhf_select_single`,
inputRef: ref,
select: true,
value: value || {},
onChange: (e)=>{
onChange(e);
if (!!onChangeExtraHandler) onChangeExtraHandler(e);
},
sx: {
width: restProps?.fullWidth ? '100%' : '210px',
...restProps?.sx
},
size: restProps?.size || 'small',
slotProps: {
...restProps?.slotProps,
inputLabel: {
sx: {
'.MuiInputLabel-asterisk': {
color: 'red'
},
...restProps?.slotProps?.inputLabel?.sx
},
shrink: !!restProps?.placeholder || void 0,
...restProps?.slotProps?.inputLabel
},
input: {
...restProps?.slotProps?.input,
endAdornment: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: restProps?.slotProps?.input?.endAdornment
}),
startAdornment: restProps?.slotProps?.input?.startAdornment
}
},
error: !!error,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_MenuItem_25e2acb5__["default"], {
value: "",
children: "None"
}),
children
]
}),
!!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 { RHFMuiSelectSingle };