choerodon-ui/pro/lib/secret-field/VerifySlider.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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

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

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

var _tslib = require("tslib");

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

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _localeContext = require("../locale-context");

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

var _button = _interopRequireDefault(require("../button"));

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

var _EventManager = _interopRequireDefault(require("../_util/EventManager"));

var VerifySlider = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(VerifySlider, _Component);

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

  function VerifySlider() {
    var _this;

    (0, _classCallCheck2["default"])(this, VerifySlider);
    _this = _super.apply(this, arguments);
    /**
     * 初始数据
     */

    /** x */

    _this.x1 = 0;
    _this.x2 = 0;
    /** 鼠标是否按下 */

    _this.isMousedown = false;
    /** 是否已经成功 */

    _this.isSuccess = false;
    /** 最大滑动距离 */

    _this.max = 290;

    _this.contentOnRef = function (ele) {
      _this.contentEle = ele;
    };

    _this.slideOnRef = function (ele) {
      _this.slideEle = ele;
    };

    _this.barOnRef = function (ele) {
      _this.barEle = ele;
    };

    _this.tipOnRef = function (ele) {
      _this.tipEle = ele;
    };

    return _this;
  }

  (0, _createClass2["default"])(VerifySlider, [{
    key: "prefixCls",
    get: function get() {
      var context = this.context;
      return context.getProPrefixCls('secret-field');
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown(e) {
      if (this.isSuccess) {
        return;
      }

      this.x1 = e.nativeEvent.x || e.touches[0].clientX;
      this.isMousedown = true;

      if (!this.moveEvent) {
        this.moveEvent = new _EventManager["default"](this.contentEle);
      }

      this.moveEvent.addEventListener('mousemove', this.handleMouseMove).addEventListener('mouseup', this.handleMouseUp);
    }
  }, {
    key: "handleMouseMove",
    value: function handleMouseMove(e) {
      var onSuccess = this.props.onSuccess;

      if (!this.isMousedown || this.isSuccess) {
        return;
      }

      e.preventDefault();
      e.stopPropagation();
      this.x2 = e.x || e.touches[0].clientX;
      var diff = this.x2 - this.x1;

      if (diff < 0) {
        diff = 0;
      } // mouseUp时候判断


      if (diff >= this.max) {
        diff = this.max;
        this.isSuccess = true;
        this.tipEle.style.opacity = 1;

        if (onSuccess) {
          onSuccess();
        }
      }

      var style = this.slideEle.style;
      var barEleStyle = this.barEle.style;
      style.transform = "translateX(".concat(diff, "px)");
      style.opacity = 1;
      style.transitionDuration = '0s';
      barEleStyle.transform = "translateX(".concat(diff, "px)");
    }
  }, {
    key: "handleMouseUp",
    value: function handleMouseUp() {
      if (this.isSuccess) {
        return;
      }

      this.isMousedown = false;
      var style = this.slideEle.style;
      var barEleStyle = this.barEle.style;
      style.transform = "translateX(0)";
      style.opacity = 0;
      barEleStyle.transform = "translateX(0)";

      if (this.moveEvent) {
        this.moveEvent.removeEventListener('mousemove', this.handleMouseMove).removeEventListener('mouseup', this.handleMouseUp);
      }
    }
    /** 滑块取消 */

  }, {
    key: "handleSlider",
    value: function handleSlider() {
      var onCancel = this.props.onCancel;

      if (onCancel) {
        onCancel();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var moveEvent = this.moveEvent;

      if (moveEvent) {
        moveEvent.clear();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-verify-content")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-verify-content-slide"),
        ref: this.contentOnRef
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-tips")
      }, (0, _localeContext.$l)('SecretField', 'verify_slider_hint')), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-box")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-slide"),
        ref: this.slideOnRef
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-bar"),
        onMouseDown: this.handleMouseDown
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-bar-icon"),
        ref: this.barOnRef
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-success-tips"),
        ref: this.tipOnRef
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: 'check_circle_outline-o'
      }), (0, _localeContext.$l)('SecretField', 'verify_finish')))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-verify-content-btn")
      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        onClick: this.handleSlider
      }, (0, _localeContext.$l)('SecretField', 'cancel'))));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return VerifySlider;
}(_react.Component);

exports["default"] = VerifySlider;
VerifySlider.displayName = 'VerifySlider';
(0, _tslib.__decorate)([_autobind["default"]], VerifySlider.prototype, "handleMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], VerifySlider.prototype, "handleMouseMove", null);
(0, _tslib.__decorate)([_autobind["default"]], VerifySlider.prototype, "handleMouseUp", null);
(0, _tslib.__decorate)([_autobind["default"]], VerifySlider.prototype, "handleSlider", null);
//# sourceMappingURL=VerifySlider.js.map