@nish1896/rhf-mui-components
Version:
A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.
119 lines (118 loc) • 4.51 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { keepLabelAboveFormField } from "../../utils/control.js";
import { isAboveMuiV5 } from "../../utils/mui.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import FormLabelText from "../../common/FormLabelText.js";
import { useContext, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import MuiTextField from "@mui/material/TextField";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
//#region src/mui/password-input/index.tsx
const RHFPasswordInput = ({ fieldName, control, registerOptions, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, showPasswordIcon, hidePasswordIcon, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, slotProps, onBlur, autoComplete = "off", InputProps, ...rest }) => {
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName);
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isError = !!errorMessage;
const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
const [showPassword, setShowPassword] = useState(false);
const ShowPasswordIcon = showPasswordIcon ?? /* @__PURE__ */ jsx(VisibilityOffIcon, {});
const HidePasswordIcon = hidePasswordIcon ?? /* @__PURE__ */ jsx(VisibilityIcon, {});
const handleClickShowPassword = () => setShowPassword((show) => !show);
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return /* @__PURE__ */ jsxs(FormControl, {
error: isError,
children: [
/* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: isLabelAboveFormField,
required,
error: isError,
formLabelProps: {
id: labelId,
htmlFor: fieldId,
...formLabelProps
}
}),
/* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef } }) => {
const endAdornment = /* @__PURE__ */ jsx(InputAdornment, {
position: "end",
children: /* @__PURE__ */ jsx(IconButton, {
type: "button",
"aria-label": showPassword ? "Hide password" : "Show password",
onClick: handleClickShowPassword,
onMouseDown: handleMouseDownPassword,
edge: "end",
children: showPassword ? HidePasswordIcon : ShowPasswordIcon
})
});
return /* @__PURE__ */ jsx(MuiTextField, {
id: fieldId,
name: rhfFieldName,
inputRef: rhfRef,
autoComplete,
type: showPassword ? "text" : "password",
label: !isLabelAboveFormField ? /* @__PURE__ */ jsx(FormLabelText, {
label: fieldLabel,
required
}) : void 0,
value: rhfValue ?? "",
disabled: muiDisabled,
onChange: (event) => {
const newValue = event.target.value;
rhfOnChange(newValue);
onValueChange?.(newValue, event);
},
onBlur: (blurEvent) => {
rhfOnBlur();
onBlur?.(blurEvent);
},
error: isError,
"aria-labelledby": isLabelAboveFormField ? labelId : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
"aria-required": required,
...isAboveMuiV5 ? { slotProps: {
...slotProps,
input: {
...slotProps?.input,
endAdornment
}
} } : { InputProps: {
...InputProps,
endAdornment
} },
...rest
});
}
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
id: isError ? errorId : helperTextId,
...formHelperTextProps
}
})
]
});
};
//#endregion
export { RHFPasswordInput as default };