vtils/_cjs/react/useHover.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

"use strict";

exports.__esModule = true;
exports.useHover = useHover;
var _react = require("react");
var _reactUse = require("react-use");
function useHover(options) {
  if (options === void 0) {
    options = {};
  }
  var _options = options,
    _options$hoverStartDe = _options.hoverStartDelay,
    hoverStartDelay = _options$hoverStartDe === void 0 ? 50 : _options$hoverStartDe,
    _options$hoverEndDela = _options.hoverEndDelay,
    hoverEndDelay = _options$hoverEndDela === void 0 ? 400 : _options$hoverEndDela;
  var _useState = (0, _react.useState)(false),
    hovering = _useState[0],
    setHovering = _useState[1];
  var latestHoverStartDelay = (0, _reactUse.useLatest)(hoverStartDelay);
  var latestHoverEndDelay = (0, _reactUse.useLatest)(hoverEndDelay);
  var latestHovering = (0, _reactUse.useLatest)(hovering);
  var hoverStartTimer = (0, _react.useRef)();
  var hoverEndTimer = (0, _react.useRef)();
  var clearHoverStartTimer = (0, _react.useCallback)(function () {
    if (hoverStartTimer.current) {
      clearTimeout(hoverStartTimer.current);
      hoverStartTimer.current = undefined;
    }
  }, []);
  var clearHoverEndTimer = (0, _react.useCallback)(function () {
    if (hoverEndTimer.current) {
      clearTimeout(hoverEndTimer.current);
      hoverEndTimer.current = undefined;
    }
  }, []);
  var startHover = (0, _react.useCallback)(function () {
    if (!latestHovering.current) {
      clearHoverStartTimer();
      hoverStartTimer.current = setTimeout(function () {
        setHovering(true);
      }, latestHoverStartDelay.current);
    }
  }, []);
  var endHover = (0, _react.useCallback)(function () {
    if (latestHovering.current) {
      clearHoverEndTimer();
      hoverEndTimer.current = setTimeout(function () {
        setHovering(false);
      }, latestHoverEndDelay.current);
    } else {
      clearHoverStartTimer();
    }
  }, []);
  (0, _reactUse.useUnmount)(function () {
    clearHoverStartTimer();
    clearHoverEndTimer();
  });
  return {
    hovering: hovering,
    startHover: startHover,
    endHover: endHover
  };
}