@nish1896/rhf-mui-components
Version:
A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms
43 lines (42 loc) • 3.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useContext } from 'react';
import { Controller } from 'react-hook-form';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormLabelText, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, keepLabelAboveFormField, isAboveMuiV5 } from '../../utils';
const RHFPasswordInput = ({ fieldName, control, registerOptions, onValueChange, label, showLabelAboveFormField, formLabelProps, showPasswordIcon, hidePasswordIcon, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, slotProps, ...rest }) => {
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const isError = Boolean(errorMessage);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const [showPassword, setShowPassword] = useState(false);
const ShowPasswordIcon = showPasswordIcon ?? _jsx(VisibilityOffIcon, {});
const HidePasswordIcon = hidePasswordIcon ?? _jsx(VisibilityIcon, {});
const handleClickShowPassword = () => setShowPassword(show => !show);
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: isLabelAboveFormField, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field }) => {
const { value, onChange, ...otherFieldParams } = field;
const endAdornment = (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "Toggle Password Visibility", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, edge: "end", children: showPassword ? HidePasswordIcon : ShowPasswordIcon }) }));
return (_jsx(TextField, { id: fieldName, autoComplete: fieldName, type: showPassword ? 'text' : 'password', label: !isLabelAboveFormField ? (_jsx(FormLabelText, { label: fieldLabel, required: required })) : undefined, value: value ?? '', onChange: event => {
onChange(event);
if (onValueChange) {
onValueChange(event.target.value, event);
}
}, error: isError, ...(isAboveMuiV5
? {
slotProps: {
...slotProps,
input: { endAdornment }
}
}
: { InputProps: { endAdornment } }), ...rest, ...otherFieldParams }));
} }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFPasswordInput;