@orca-fe/hooks/lib/usePan.js

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = usePan;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _ahooks = require("ahooks");
function usePan(
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
callback, target) {
  var _useState = (0, _react.useState)(function () {
      return {};
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    _this = _useState2[0];
  (0, _ahooks.useEventListener)('mousedown', function (e) {
    _this.mousedownPosition = [e.clientX, e.clientY];
    _this.target = e.currentTarget;
    _this.triggerTarget = e.target;
    var bounds = _this.target.getBoundingClientRect();
    var left = bounds.left,
      top = bounds.top;
    var res = callback({
      start: true,
      finish: false,
      startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
      offset: [0, 0],
      ev: e,
      target: _this.triggerTarget,
      bounds: bounds
    });
    if (res === false) {
      _this.mousedownPosition = undefined;
      _this.target = undefined;
      _this.triggerTarget = undefined;
    }
  }, {
    target: target
  });
  (0, _ahooks.useEventListener)('touchstart', function (e) {
    e.preventDefault(); // 阻止默认的触摸行为，如页面滚动
    _this.mousedownPosition = [e.touches[0].clientX, e.touches[0].clientY];
    _this.target = e.currentTarget;
    _this.triggerTarget = e.target;
    var bounds = _this.target.getBoundingClientRect();
    var left = bounds.left,
      top = bounds.top;
    var res = callback({
      start: true,
      finish: false,
      startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
      offset: [0, 0],
      ev: e,
      target: _this.triggerTarget,
      bounds: bounds
    });
    if (res === false) {
      _this.mousedownPosition = undefined;
      _this.target = undefined;
      _this.triggerTarget = undefined;
    }
  }, {
    target: target
  });
  (0, _ahooks.useEventListener)('mousemove', function (e) {
    if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
      var offsetX = e.clientX - _this.mousedownPosition[0];
      var offsetY = e.clientY - _this.mousedownPosition[1];
      var bounds = _this.target.getBoundingClientRect();
      var left = bounds.left,
        top = bounds.top;
      var res = callback({
        start: false,
        finish: false,
        startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
        offset: [offsetX, offsetY],
        ev: e,
        target: _this.triggerTarget,
        bounds: bounds
      });
      if (res === false) {
        _this.mousedownPosition = undefined;
        _this.target = undefined;
        _this.triggerTarget = undefined;
      }
    }
  });
  (0, _ahooks.useEventListener)('touchmove', function (e) {
    if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
      var offsetX = e.touches[0].clientX - _this.mousedownPosition[0];
      var offsetY = e.touches[0].clientY - _this.mousedownPosition[1];
      var bounds = _this.target.getBoundingClientRect();
      var left = bounds.left,
        top = bounds.top;
      var res = callback({
        start: false,
        finish: false,
        startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
        offset: [offsetX, offsetY],
        ev: e,
        target: _this.triggerTarget,
        bounds: bounds
      });
      if (res === false) {
        _this.mousedownPosition = undefined;
        _this.target = undefined;
        _this.triggerTarget = undefined;
      }
    }
  }, {
    passive: false
  } // 对于 touchmove，阻止默认的 passive 模式，以允许阻止滚动
  );
  (0, _ahooks.useEventListener)('mouseup', function (e) {
    if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
      var offsetX = e.clientX - _this.mousedownPosition[0];
      var offsetY = e.clientY - _this.mousedownPosition[1];
      var bounds = _this.target.getBoundingClientRect();
      var left = bounds.left,
        top = bounds.top;
      callback({
        start: false,
        finish: true,
        startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
        offset: [offsetX, offsetY],
        ev: e,
        target: _this.triggerTarget,
        bounds: bounds
      });
      _this.mousedownPosition = undefined;
    }
  });
  (0, _ahooks.useEventListener)('touchend', function (e) {
    if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
      var offsetX = e.changedTouches[0].clientX - _this.mousedownPosition[0];
      var offsetY = e.changedTouches[0].clientY - _this.mousedownPosition[1];
      var bounds = _this.target.getBoundingClientRect();
      var left = bounds.left,
        top = bounds.top;
      callback({
        start: false,
        finish: true,
        startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
        offset: [offsetX, offsetY],
        ev: e,
        target: _this.triggerTarget,
        bounds: bounds
      });
      _this.mousedownPosition = undefined;
    }
  }, {
    target: target
  });
}