shineout/es/hoc/draggable.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent } from 'react';
import { curry } from '../utils/func';
var defaultProps = {
  client: undefined,
  onDragStart: function onDragStart() {},
  onDrag: function onDrag() {},
  onDragEnd: function onDragEnd() {}
};
export default curry(function (OriginComponent) {
  var Drag =
  /*#__PURE__*/
  function (_PureComponent) {
    _inheritsLoose(Drag, _PureComponent);

    function Drag(props) {
      var _this;

      _this = _PureComponent.call(this, props) || this;

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clientX", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clientY", void 0);

      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dragging", void 0);

      _this.handleDragStart = _this.handleDragStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.handleDrag = _this.handleDrag.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      _this.handleDragEnd = _this.handleDragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
      return _this;
    }

    var _proto = Drag.prototype;

    _proto.componentDidMount = function componentDidMount() {
      var client = this.props.client;

      if (client) {
        this.clientX = client.x;
        this.clientY = client.y;
        this.dragging = true;
        this.addEvents();
        if (this.props.onDragStart) this.props.onDragStart();
      }
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      this.removeEvents();
    };

    _proto.addEvents = function addEvents() {
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.handleDragEnd);
      document.addEventListener('mouseleave', this.handleDragEnd);
    };

    _proto.removeEvents = function removeEvents() {
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.handleDragEnd);
      document.removeEventListener('mouseleave', this.handleDragEnd);
    };

    _proto.handleDragStart = function handleDragStart(e) {
      if (e.button !== 0) return;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      this.dragging = true;
      this.addEvents();
      if (this.props.onDragStart) this.props.onDragStart();
    };

    _proto.handleDrag = function handleDrag(e) {
      if (!this.dragging) return;
      if (e.clientX === 0 && e.clientY === 0) return;
      var mx = e.clientX - this.clientX;
      var my = e.clientY - this.clientY;
      if (mx === 0 && my === 0) return;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      if (this.props.onDrag) this.props.onDrag(mx, my, e.clientX, e.clientY);
    };

    _proto.handleDragEnd = function handleDragEnd() {
      if (!this.dragging) return;
      this.dragging = false;
      this.removeEvents();
      if (this.props.onDragEnd) this.props.onDragEnd();
    };

    _proto.render = function render() {
      return React.createElement(OriginComponent, _extends({}, this.props, {
        onDragStart: this.handleDragStart
      }));
    };

    return Drag;
  }(PureComponent);

  _defineProperty(Drag, "defaultProps", defaultProps);

  return Drag;
});