acud/lib/input/Password.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _OutlinedEyeClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedEyeClose"));
var _OutlinedEye = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedEye"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("./Input"));
var _configProvider = require("../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var __rest = void 0 && (void 0).__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
 */

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 = (0, _react.useState)(rawValue || defaultValue),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = (0, _react.useState)('password'),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    type = _useState4[0],
    setType = _useState4[1];
  var inputRef = (0, _react.useRef)(null);
  (0, _react.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 = (0, _react.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["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-password', customizePrefixCls);
  var inputClassName = (0, _classnames["default"])(prefixCls, className, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-disabled"), disabled));
  var iconBoxClassname = (0, _classnames["default"])(["".concat(prefixCls, "-outer-icon")], (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-outer-icon-disabled"), disabled), "".concat(prefixCls, "-outer-icon-sm"), size === 'small'), "".concat(prefixCls, "-outer-icon-lg"), size === 'large'));
  var iconClassname = (0, _classnames["default"])(["".concat(prefixCls, "-icon")], (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-icon-disabled"), disabled));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-outer"),
    style: style
  }, visibilityToggle && /*#__PURE__*/_react["default"].createElement("div", {
    className: iconBoxClassname,
    onClick: handleIconClick,
    onMouseDown: handleMouseDown,
    onMouseUp: handleMouseUp
  }, type === 'password' ? /*#__PURE__*/_react["default"].createElement(_OutlinedEyeClose["default"], {
    className: iconClassname
  }) : /*#__PURE__*/_react["default"].createElement(_OutlinedEye["default"], {
    className: iconClassname
  })), /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restPorps, {
    ref: inputRef,
    type: type,
    value: value,
    size: size,
    disabled: disabled,
    className: inputClassName,
    onChange: handleChange,
    onKeyDown: handleKeyDown,
    onFocus: handleFocus,
    onBlur: handleBlur,
    placeholder: placeholder || '请输入密码'
  })));
};
var _default = exports["default"] = Password;