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

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React, { Component } from 'react';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { $l } from '../locale-context';
import Icon from '../icon';
import Button from '../button';
import autobind from '../_util/autobind';
import EventManager from '../_util/EventManager';
import { transformZoomData } from '../_util/DocumentUtils';

var VerifySlider = /*#__PURE__*/function (_Component) {
  _inherits(VerifySlider, _Component);

  var _super = _createSuper(VerifySlider);

  function VerifySlider() {
    var _this;

    _classCallCheck(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;
  }

  _createClass(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 ? transformZoomData(e.nativeEvent.x) : transformZoomData(e.touches[0].clientX);
      this.isMousedown = true;

      if (!this.moveEvent) {
        this.moveEvent = new EventManager(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 ? transformZoomData(e.x) : transformZoomData(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.createElement("div", {
        className: "".concat(prefixCls, "-verify-content")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-verify-content-slide"),
        ref: this.contentOnRef
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-tips")
      }, $l('SecretField', 'verify_slider_hint')), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-box")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-slide"),
        ref: this.slideOnRef
      })), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-bar"),
        onMouseDown: this.handleMouseDown
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-bar-icon"),
        ref: this.barOnRef
      })), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-simple-verify-success-tips"),
        ref: this.tipOnRef
      }, /*#__PURE__*/React.createElement(Icon, {
        type: 'check_circle_outline-o'
      }), $l('SecretField', 'verify_finish')))), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-verify-content-btn")
      }, /*#__PURE__*/React.createElement(Button, {
        onClick: this.handleSlider
      }, $l('SecretField', 'cancel'))));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return VerifySlider;
}(Component);

export { VerifySlider as default };
VerifySlider.displayName = 'VerifySlider';

__decorate([autobind], VerifySlider.prototype, "handleMouseDown", null);

__decorate([autobind], VerifySlider.prototype, "handleMouseMove", null);

__decorate([autobind], VerifySlider.prototype, "handleMouseUp", null);

__decorate([autobind], VerifySlider.prototype, "handleSlider", null);
//# sourceMappingURL=VerifySlider.js.map