vtils/react/useHover.js

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

import { useCallback, useRef, useState } from 'react';
import { useLatest, useUnmount } from 'react-use';
export 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 = useState(false),
    hovering = _useState[0],
    setHovering = _useState[1];
  var latestHoverStartDelay = useLatest(hoverStartDelay);
  var latestHoverEndDelay = useLatest(hoverEndDelay);
  var latestHovering = useLatest(hovering);
  var hoverStartTimer = useRef();
  var hoverEndTimer = useRef();
  var clearHoverStartTimer = useCallback(function () {
    if (hoverStartTimer.current) {
      clearTimeout(hoverStartTimer.current);
      hoverStartTimer.current = undefined;
    }
  }, []);
  var clearHoverEndTimer = useCallback(function () {
    if (hoverEndTimer.current) {
      clearTimeout(hoverEndTimer.current);
      hoverEndTimer.current = undefined;
    }
  }, []);
  var startHover = useCallback(function () {
    if (!latestHovering.current) {
      clearHoverStartTimer();
      hoverStartTimer.current = setTimeout(function () {
        setHovering(true);
      }, latestHoverStartDelay.current);
    }
  }, []);
  var endHover = useCallback(function () {
    if (latestHovering.current) {
      clearHoverEndTimer();
      hoverEndTimer.current = setTimeout(function () {
        setHovering(false);
      }, latestHoverEndDelay.current);
    } else {
      clearHoverStartTimer();
    }
  }, []);
  useUnmount(function () {
    clearHoverStartTimer();
    clearHoverEndTimer();
  });
  return {
    hovering: hovering,
    startHover: startHover,
    endHover: endHover
  };
}