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

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useAutoScroll;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _ahooks = require("ahooks");
var _react = require("react");
var _useAnimationFrame = _interopRequireDefault(require("./useAnimationFrame"));
var _domTarget = require("./utils/domTarget");
function useAutoScroll(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$edgeSize = options.edgeSize,
    edgeSize = _options$edgeSize === void 0 ? 100 : _options$edgeSize,
    realtimeBounds = options.realtimeBounds,
    _options$autoTrigger = options.autoTrigger,
    autoTrigger = _options$autoTrigger === void 0 ? true : _options$autoTrigger,
    _options$scrollableX = options.scrollableX,
    scrollableX = _options$scrollableX === void 0 ? true : _options$scrollableX,
    _options$scrollableY = options.scrollableY,
    scrollableY = _options$scrollableY === void 0 ? true : _options$scrollableY;
  var _useState = (0, _react.useState)(function () {
      return {
        mouse: [0, 0],
        bounds: undefined
      };
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    _this = _useState2[0];
  var rafHandle = (0, _useAnimationFrame.default)(function () {
    var dom = (0, _domTarget.getTargetElement)(target);
    if (!dom) return;
    if (!_this.bounds) {
      _this.bounds = dom.getBoundingClientRect();
    }
    var _ref = realtimeBounds ? dom.getBoundingClientRect() : _this.bounds,
      left = _ref.left,
      top = _ref.top,
      width = _ref.width,
      height = _ref.height;
    var x = _this.mouse[0] - left;
    var y = _this.mouse[1] - top;
    var xEdgeSize = Math.min(edgeSize, width * 0.2);
    var yEdgeSize = Math.min(edgeSize, height * 0.2);
    var xScrollValue = 0;
    var yScrollValue = 0;
    if (x < xEdgeSize) {
      // 向左移动
      xScrollValue = Math.max(-50, 0.1 * Math.round(x - xEdgeSize));
    } else if (x > width - xEdgeSize) {
      // 向右移动
      xScrollValue = Math.min(50, 0.1 * Math.round(x - width + xEdgeSize));
    }
    if (y < yEdgeSize) {
      // 向上移动
      yScrollValue = Math.max(-50, 0.1 * Math.round(y - yEdgeSize));
    } else if (y > height - yEdgeSize) {
      // 向下移动
      yScrollValue = Math.min(50, 0.1 * Math.round(y - height + yEdgeSize));
    }
    if (scrollableX) {
      dom.scrollLeft += xScrollValue;
    }
    if (scrollableY) {
      dom.scrollTop += yScrollValue;
    }
  }, {
    manual: true
  });
  (0, _ahooks.useUpdateEffect)(function () {
    if (!rafHandle.running) {
      _this.bounds = undefined;
    }
  }, [rafHandle.running]);
  (0, _ahooks.useEventListener)('mousedown', function () {
    var dom = (0, _domTarget.getTargetElement)(target);
    if (dom) {
      _this.bounds = dom.getBoundingClientRect();
    }
    if (autoTrigger) {
      rafHandle.start();
    }
  }, {
    target: target
  });
  (0, _ahooks.useEventListener)('mouseup', function () {
    if (autoTrigger) {
      rafHandle.stop();
    }
  });
  (0, _ahooks.useEventListener)('mousemove', function (e) {
    var clientX = e.clientX,
      clientY = e.clientY;
    _this.mouse = [clientX, clientY];
  });
  return rafHandle;
}