@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
92 lines (91 loc) • 6.62 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE__mui_icons_material_Visibility_703684a5__ from "@mui/icons-material/Visibility";
import * as __WEBPACK_EXTERNAL_MODULE__mui_icons_material_VisibilityOff_4a4cd167__ from "@mui/icons-material/VisibilityOff";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_39280ebf__ from "@mui/material";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
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 RHFMuiTextfield = (props)=>{
const { rhfinstance, rhf_rules, name = '', label = '', permanentMessage = '', onChangeExtraHandler, enableCrypticText, ...restProps } = props;
(0, __WEBPACK_EXTERNAL_MODULE__mui_material_39280ebf__.useTheme)();
const [showPassword, setShowPassword] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
const { control } = rhfinstance;
let type = '';
type = enableCrypticText ? showPassword ? 'text' : 'password' : restProps?.type;
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 } })=>{
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if ('string' != typeof value && !isFieldArrayUsed) console.error(`For RHFMuiTextfield, initial value should be a string type. e.g.'' or 'anyString', 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_39280ebf__.TextField, {
...props,
type: type,
id: restProps?.id || `${name}_rhf_textfield`,
inputRef: ref,
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
},
input: {
...restProps?.slotProps?.input,
endAdornment: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
!!enableCrypticText && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_39280ebf__.InputAdornment, {
position: "end",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_39280ebf__.IconButton, {
size: "small",
"aria-label": showPassword ? 'hide the input text' : 'display the input text',
onClick: ()=>setShowPassword((show)=>!show),
children: showPassword ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_VisibilityOff_4a4cd167__["default"], {}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_Visibility_703684a5__["default"], {})
})
}),
restProps?.slotProps?.input?.endAdornment
]
}),
startAdornment: restProps?.slotProps?.input?.startAdornment
}
},
error: !!error
}),
!!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 { RHFMuiTextfield };