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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { action, observable } from 'mobx';
import { TextField } from '../text-field/TextField';
import autobind from '../_util/autobind';
import Icon from '../icon'; // let selectionStart;
// let selectionEnd;

var Password = /*#__PURE__*/function (_TextField) {
  _inherits(Password, _TextField);

  var _super = _createSuper(Password);

  function Password() {
    var _this;

    _classCallCheck(this, Password);

    _this = _super.apply(this, arguments);
    _this.type = 'password';
    return _this;
  }

  _createClass(Password, [{
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(Password.prototype), "getOmitPropsKeys", this).call(this).concat(['reveal']);
    }
  }, {
    key: "getOtherPrevNode",
    value: function getOtherPrevNode() {
      return /*#__PURE__*/React.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.createElement(Icon, {
          type: this.reveal ? 'visibility' : 'visibility_off',
          onClick: this.handleToggleReveal
        }), {
          style: {
            right: this.lengthInfoWidth
          }
        });
      }
    }
  }, {
    key: "handleToggleReveal",
    value: function handleToggleReveal(e) {
      e.preventDefault();

      if (!this.isFocused) {
        this.focus();
      }

      var target = this.element;

      if (target) {
        if (target.type === 'password') {
          this.doReveal(target);
        } else {
          this.resetReveal(target);
        }
      }
    }
  }, {
    key: "doReveal",
    value: function doReveal(target) {
      this.selectionEnd = target.selectionEnd;
      this.selectionStart = target.selectionStart;
      target.type = 'text';
      this.type = target.type;
      this.reveal = true;
    }
  }, {
    key: "resetReveal",
    value: function resetReveal(target) {
      var selectionStart = this.selectionStart,
          selectionEnd = this.selectionEnd;
      target.type = 'password';
      this.type = target.type;

      if (typeof selectionStart !== 'undefined' && typeof selectionEnd !== 'undefined') {
        target.setSelectionRange(selectionStart, selectionEnd);
        this.selectionStart = undefined;
        this.selectionEnd = undefined;
      }

      this.reveal = false;
    }
  }]);

  return Password;
}(TextField);

Password.displayName = 'Password';
Password.defaultProps = _objectSpread(_objectSpread({}, TextField.defaultProps), {}, {
  suffixCls: 'password',
  reveal: true
});

__decorate([observable], Password.prototype, "reveal", void 0);

__decorate([autobind], Password.prototype, "handleToggleReveal", null);

__decorate([action], Password.prototype, "doReveal", null);

__decorate([action], Password.prototype, "resetReveal", null);

Password = __decorate([observer], Password);
export default Password;
//# sourceMappingURL=Password.js.map