@wulperstudio/cms/modern/components/TextFieldPassword/TextFieldPassword.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["id", "label", "variant", "error", "errorMessage", "errorVariant"];
import React from 'react';
import { Icon } from '@iconify/react';
import { IconButton, InputAdornment, useTheme } from '@mui/material';
import { TextFieldV5LabelOut } from '../TextFieldV5LabelOut';
import { jsx as _jsx } from "react/jsx-runtime";
var TextFieldPassword = function TextFieldPassword(_ref) {
  var id = _ref.id,
    label = _ref.label,
    variant = _ref.variant,
    error = _ref.error,
    errorMessage = _ref.errorMessage,
    errorVariant = _ref.errorVariant,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    showConfirmPassword = _React$useState2[0],
    setShowConfirmPassword = _React$useState2[1];
  var handleClickShowConfirmPassword = function handleClickShowConfirmPassword() {
    return setShowConfirmPassword(!showConfirmPassword);
  };
  var handleMouseDownPassword = function handleMouseDownPassword(e) {
    return e.preventDefault();
  };
  return /*#__PURE__*/_jsx(TextFieldV5LabelOut, Object.assign({
    id: id,
    label: label,
    variant: variant,
    error: error,
    errorMessage: errorMessage,
    errorVariant: errorVariant,
    type: showConfirmPassword ? 'text' : 'password',
    placeholder: "******",
    InputProps: {
      endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
        position: "end",
        children: /*#__PURE__*/_jsx(IconButton, {
          "aria-label": "toggle password visibility",
          onClick: handleClickShowConfirmPassword,
          onMouseDown: handleMouseDownPassword,
          edge: "end",
          children: showConfirmPassword ? props.iconShowPassword || /*#__PURE__*/_jsx(Icon, {
            icon: "ic:outline-visibility-off",
            color: theme.palette.text.primary
          }) : props.iconHidePassword || /*#__PURE__*/_jsx(Icon, {
            icon: "ic:outline-visibility",
            color: theme.palette.text.primary
          })
        })
      })
    }
  }, props));
};
export default TextFieldPassword;