@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
49 lines (48 loc) • 3.37 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_react_hook_form_05a66946__ from "react-hook-form";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Slider_550b77f6__ from "@mui/material/Slider";
import * as __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__ from "../../utilities/isNameBelongsToFieldArray.js";
const RHFMuiRangeSlider = (props)=>{
const { rhfinstance, rhf_rules, name = '', permanentMessage = '', onChangeExtraHandler, ...restProps } = props;
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, fieldState: { error } })=>{
const { value, onChange, ...restFieldProps } = field;
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if (!Array.isArray(value) && !isFieldArrayUsed) console.error(`For RHFMuiRangeSlider initial value should be an array of numbers. e.g. [start, end]=> [10, 30] 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_Slider_550b77f6__["default"], {
...restFieldProps,
...restProps,
"aria-label": `${name}`,
value: value || [],
onChange: (e, value, activeThumb)=>{
onChange(value);
if (!!onChangeExtraHandler) onChangeExtraHandler(e, value, activeThumb);
}
}),
!!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 { RHFMuiRangeSlider };