choerodon-ui/pro/lib/password/Password.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _defer = _interopRequireDefault(require("lodash/defer"));

var _TextField2 = require("../text-field/TextField");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _icon = _interopRequireDefault(require("../icon"));

// let selectionStart;
// let selectionEnd;
var Password = /*#__PURE__*/function (_TextField) {
  (0, _inherits2["default"])(Password, _TextField);

  var _super = (0, _createSuper2["default"])(Password);

  function Password() {
    var _this;

    (0, _classCallCheck2["default"])(this, Password);
    _this = _super.apply(this, arguments);
    _this.type = 'password';
    return _this;
  }

  (0, _createClass2["default"])(Password, [{
    key: "multiple",
    get: function get() {
      return false;
    }
  }, {
    key: "range",
    get: function get() {
      return false;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Password.prototype), "getOmitPropsKeys", this).call(this).concat(['reveal']);
    }
  }, {
    key: "getOtherPrevNode",
    value: function getOtherPrevNode() {
      return /*#__PURE__*/_react["default"].createElement("input", {
        tabIndex: -1,
        className: "".concat(this.prefixCls, "-fix-autofill")
      });
    }
  }, {
    key: "getInnerSpanButton",
    value: function getInnerSpanButton() {
      var reveal = this.props.reveal;

      if (reveal && !this.disabled) {
        return this.wrapperInnerSpanButton( /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: this.reveal ? 'visibility' : 'visibility_off',
          onClick: this.handleToggleReveal
        }), {
          style: {
            right: this.lengthInfoWidth
          }
        });
      }
    }
  }, {
    key: "select",
    value: function select() {
      if (!this.revealIconFocus) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Password.prototype), "select", this).call(this);
      }
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      var _this2 = this;

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Password.prototype), "handleFocus", this).call(this, e);
      (0, _defer["default"])(function () {
        if (_this2.revealIconFocus) {
          _this2.revealIconFocus = false;
        }
      });
    }
  }, {
    key: "handleToggleReveal",
    value: function handleToggleReveal(e) {
      e.preventDefault();
      var target = this.element;

      if (target) {
        if (target.type === 'password') {
          this.doReveal(target);
        } else {
          this.resetReveal(target);
        }
      }

      if (!this.isFocused) {
        this.revealIconFocus = true;
        target.focus();
      }

      (0, _defer["default"])(function () {
        return target.setSelectionRange(-1, -1);
      });
    }
  }, {
    key: "doReveal",
    value: function doReveal(target) {
      target.type = 'text';
      this.type = target.type;
      this.reveal = true;
    }
  }, {
    key: "resetReveal",
    value: function resetReveal(target) {
      target.type = 'password';
      this.type = target.type;
      this.reveal = false;
    }
  }]);
  return Password;
}(_TextField2.TextField);

Password.displayName = 'Password';
Password.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _TextField2.TextField.defaultProps), {}, {
  suffixCls: 'password',
  reveal: true
});
(0, _tslib.__decorate)([_mobx.observable], Password.prototype, "reveal", void 0);
(0, _tslib.__decorate)([_autobind["default"]], Password.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"]], Password.prototype, "handleToggleReveal", null);
(0, _tslib.__decorate)([_mobx.action], Password.prototype, "doReveal", null);
(0, _tslib.__decorate)([_mobx.action], Password.prototype, "resetReveal", null);
Password = (0, _tslib.__decorate)([_mobxReact.observer], Password);
var _default = Password;
exports["default"] = _default;
//# sourceMappingURL=Password.js.map