acud/es/input/Password.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/**
 * @file Password component
 * @author liyanan19
 */
import OutlinedEyeClose from "acud-icon/es/icons/OutlinedEyeClose";
import OutlinedEye from "acud-icon/es/icons/OutlinedEye";
import classNames from 'classnames';
import React, { useState, useCallback, useRef, useEffect } from 'react';
import Input from './Input';
import { ConfigContext } from '../config-provider';
var Password = function Password(props) {
  var rawValue = props.value,
    defaultValue = props.defaultValue,
    customizePrefixCls = props.prefixCls,
    _props$visibilityTogg = props.visibilityToggle,
    visibilityToggle = _props$visibilityTogg === void 0 ? true : _props$visibilityTogg,
    _props$size = props.size,
    size = _props$size === void 0 ? 'middle' : _props$size,
    className = props.className,
    style = props.style,
    disabled = props.disabled,
    placeholder = props.placeholder,
    onChange = props.onChange,
    onPressEnter = props.onPressEnter,
    onKeyDown = props.onKeyDown,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    restPorps = __rest(props, ["value", "defaultValue", "prefixCls", "visibilityToggle", "size", "className", "style", "disabled", "placeholder", "onChange", "onPressEnter", "onKeyDown", "onFocus", "onBlur"]);
  var _useState = useState(rawValue || defaultValue),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = useState('password'),
    _useState4 = _slicedToArray(_useState3, 2),
    type = _useState4[0],
    setType = _useState4[1];
  var inputRef = useRef(null);
  useEffect(function () {
    if ('value' in props && value !== props.value) {
      setValue(props.value || '');
      if (props.value === 0) {
        setValue(0);
      }
    }
  }, [props, value, disabled]);
  var handleChange = function handleChange(e) {
    if (disabled) {
      return;
    }
    setValue(e.target.value);
    if (onChange) {
      onChange(e);
    }
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (onPressEnter && e.key === 'Enter') {
      onPressEnter(e);
      // setValue('');
    }
    if (onKeyDown) {
      onKeyDown(e);
    }
  };
  var handleFocus = function handleFocus(e) {
    if (disabled) {
      return;
    }
    if (onFocus) {
      onFocus(e);
    }
  };
  var handleBlur = function handleBlur(e) {
    if (disabled) {
      return;
    }
    if (onBlur) {
      onBlur(e);
    }
  };
  var handleIconClick = useCallback(function () {
    if (disabled) {
      return;
    }
    setType(type === 'password' ? 'text' : 'password');
  }, [type, disabled]);
  var handleMouseDown = function handleMouseDown(e) {
    e.preventDefault();
  };
  var handleMouseUp = function handleMouseUp(e) {
    e.preventDefault();
  };
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-password', customizePrefixCls);
  var inputClassName = classNames(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled));
  var iconBoxClassname = classNames(["".concat(prefixCls, "-outer-icon")], _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-outer-icon-disabled"), disabled), "".concat(prefixCls, "-outer-icon-sm"), size === 'small'), "".concat(prefixCls, "-outer-icon-lg"), size === 'large'));
  var iconClassname = classNames(["".concat(prefixCls, "-icon")], _defineProperty({}, "".concat(prefixCls, "-icon-disabled"), disabled));
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-outer"),
    style: style
  }, visibilityToggle && /*#__PURE__*/React.createElement("div", {
    className: iconBoxClassname,
    onClick: handleIconClick,
    onMouseDown: handleMouseDown,
    onMouseUp: handleMouseUp
  }, type === 'password' ? /*#__PURE__*/React.createElement(OutlinedEyeClose, {
    className: iconClassname
  }) : /*#__PURE__*/React.createElement(OutlinedEye, {
    className: iconClassname
  })), /*#__PURE__*/React.createElement(Input, _extends({}, restPorps, {
    ref: inputRef,
    type: type,
    value: value,
    size: size,
    disabled: disabled,
    className: inputClassName,
    onChange: handleChange,
    onKeyDown: handleKeyDown,
    onFocus: handleFocus,
    onBlur: handleBlur,
    placeholder: placeholder || '请输入密码'
  })));
};
export default Password;