mui-dynamic-field/dist/esm/components/PasswordInput.js

A dynamic and customizable input field component for React, built with Material UI & TypeScript.

import { TextField, IconButton } from '@mui/material';
import { useState } from 'react';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { jsx } from 'react/jsx-runtime';

const PasswordInput = props => {
  const {
    color,
    name,
    error,
    errorText,
    label,
    value,
    onChange,
    disabled,
    size,
    slotProps,
    ...restProps
  } = props;
  const [showPassword, setShowPassword] = useState(false);
  const toggleShowPassword = () => setShowPassword(!showPassword);
  return /*#__PURE__*/jsx(TextField, {
    type: showPassword ? "text" : "password",
    fullWidth: true,
    color: color,
    error: error,
    helperText: errorText,
    label: label,
    name: name,
    disabled: disabled,
    variant: "outlined",
    value: value ?? "",
    onChange: onChange,
    size: size,
    onWheel: e => e.target.blur(),
    slotProps: {
      ...slotProps,
      input: {
        ...(slotProps?.input || {}),
        endAdornment: /*#__PURE__*/jsx(IconButton, {
          onClick: toggleShowPassword,
          children: showPassword ? /*#__PURE__*/jsx(VisibilityOff, {}) : /*#__PURE__*/jsx(Visibility, {})
        })
      }
    },
    ...restProps
  });
};

export { PasswordInput as default };
//# sourceMappingURL=PasswordInput.js.map