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

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WHEEL_UP = exports.WHEEL_RIGHT = exports.WHEEL_LEFT = exports.WHEEL_DOWN = void 0;
exports.default = useWheel;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _ahooks = require("ahooks");
var _lodashEs = require("lodash-es");
var WHEEL_UP = exports.WHEEL_UP = 'up'; // 向上滚动
var WHEEL_DOWN = exports.WHEEL_DOWN = 'down'; // 向下滚动
var WHEEL_LEFT = exports.WHEEL_LEFT = 'left'; // 向左滚动
var WHEEL_RIGHT = exports.WHEEL_RIGHT = 'right'; // 向右滚动

// 鼠标滚轮最小延迟毫秒数
var minWheelStopDelay = 300;
var defaultState = {
  rolling: false,
  direction: null,
  movement: 0,
  distance: 0
};
function useWheel(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$delay = options.delay,
    delay = _options$delay === void 0 ? minWheelStopDelay : _options$delay;
  var _useSetState = (0, _ahooks.useSetState)(defaultState),
    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
    state = _useSetState2[0],
    setState = _useSetState2[1];
  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function () {
      setState(defaultState);
    }, {
      wait: delay > minWheelStopDelay ? delay : minWheelStopDelay
    }),
    debounceStopWheelScroll = _useDebounceFn.run;
  (0, _ahooks.useEventListener)('wheel', function (event) {
    event.preventDefault();
    var deltaX = event.deltaX,
      deltaY = event.deltaY;
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      setState({
        rolling: true,
        direction: deltaX > 0 ? WHEEL_RIGHT : WHEEL_LEFT,
        movement: deltaX,
        distance: (0, _lodashEs.add)(state.distance, deltaX)
      });
    } else {
      setState({
        rolling: true,
        direction: deltaY > 0 ? WHEEL_DOWN : WHEEL_UP,
        movement: deltaY,
        distance: (0, _lodashEs.add)(state.distance, deltaY)
      });
    }
    debounceStopWheelScroll();
  }, {
    target: target
  });
  return state;
}