@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
97 lines (96 loc) • 5.93 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_x_date_pickers_53f203a2__ from "@mui/x-date-pickers";
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 RHFMuiTimePicker = (props)=>{
const { rhfinstance, rhf_rules, name = '', label = '', required = false, disabled = false, fullWidth = false, size = 'small', placeholder = '', permanentMessage = '', onChangeExtraHandler, ...restProps } = props;
const { control } = rhfinstance;
const [myRequired, setMyRequired] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const requiredFromSlotProps = restProps?.slotProps?.textField?.required;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
requiredFromSlotProps || required ? setMyRequired(true) : setMyRequired(false);
}, [
requiredFromSlotProps,
required
]);
const [myPlaceholder, setMyPlaceholder] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
const placeholderFromSlotProps = restProps?.slotProps?.textField?.placeholder;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
placeholder ? setMyPlaceholder(placeholder) : setMyPlaceholder(placeholderFromSlotProps);
}, [
placeholderFromSlotProps,
placeholder
]);
const [mySize, setMySize] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('small');
const sizeFromSlotProps = restProps?.slotProps?.textField?.size;
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
size ? setMySize(size) : setMySize(sizeFromSlotProps);
}, [
sizeFromSlotProps,
size
]);
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, fieldState: { error } })=>{
const { value, onChange, ...restFieldProps } = field;
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
const isValueDate = value instanceof Date && !isNaN(value?.getTime());
if (!isValueDate && null !== value && !isFieldArrayUsed) console.error(`For RHFMuiDatePicker, initial value should be of null or Date type. 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_x_date_pickers_53f203a2__.TimePicker, {
...restFieldProps,
...restProps,
label: label || '',
value: value || null,
onChange: (newValue, context)=>{
onChange(newValue);
if (!!onChangeExtraHandler) onChangeExtraHandler(newValue, context);
},
slotProps: {
...restProps?.slotProps,
textField: {
...restProps?.slotProps?.textField,
sx: {
'.MuiInputLabel-asterisk': {
color: 'red'
},
...restProps?.slotProps?.textField?.sx
},
fullWidth: restProps?.slotProps?.textField?.fullWidth || fullWidth,
disabled: restProps?.slotProps?.textField?.disabled || disabled,
required: !!myRequired,
size: mySize,
error: !!error?.message,
placeholder: myPlaceholder,
InputLabelProps: {
...restProps?.slotProps?.textField?.InputLabelProps,
shrink: !!myPlaceholder || void 0
}
}
}
}),
!!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 { RHFMuiTimePicker };