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

React Hooks Collections

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useState } from 'react';
import { useEventListener } from 'ahooks';
export default function usePan(
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
callback, target) {
  var _useState = useState(() => ({})),
    _useState2 = _slicedToArray(_useState, 1),
    _this = _useState2[0];
  useEventListener('mousedown', 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
    });
    if (res === false) {
      _this.mousedownPosition = undefined;
      _this.target = undefined;
      _this.triggerTarget = undefined;
    }
  }, {
    target
  });
  useEventListener('touchstart', 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
    });
    if (res === false) {
      _this.mousedownPosition = undefined;
      _this.target = undefined;
      _this.triggerTarget = undefined;
    }
  }, {
    target
  });
  useEventListener('mousemove', 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
      });
      if (res === false) {
        _this.mousedownPosition = undefined;
        _this.target = undefined;
        _this.triggerTarget = undefined;
      }
    }
  });
  useEventListener('touchmove', 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
      });
      if (res === false) {
        _this.mousedownPosition = undefined;
        _this.target = undefined;
        _this.triggerTarget = undefined;
      }
    }
  }, {
    passive: false
  } // 对于 touchmove，阻止默认的 passive 模式，以允许阻止滚动
  );
  useEventListener('mouseup', 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
      });
      _this.mousedownPosition = undefined;
    }
  });
  useEventListener('touchend', 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
      });
      _this.mousedownPosition = undefined;
    }
  }, {
    target
  });
}