rsuite/esm/toaster/hooks/useDelayedClosure.js

A suite of react components

'use client';
import { useContext, useRef } from 'react';
import on from 'dom-lib/on';
import { useTimeout, useMount } from "../../internals/hooks/index.js";
import ToastContext from "../ToastContext.js";
/**
 * A hook that delays the closure of the message box.
 */
function useDelayedClosure(props) {
  const {
    onClose,
    duration: durationProp,
    targetRef
  } = props;
  const {
    usedToaster,
    duration = durationProp,
    mouseReset
  } = useContext(ToastContext);
  const mouseEnterRef = useRef(null);
  const mouseLeaveRef = useRef(null);
  const {
    clear,
    reset
  } = useTimeout(onClose, duration, usedToaster && duration > 0);
  useMount(() => {
    if (targetRef?.current && mouseReset) {
      if (mouseEnterRef.current || mouseLeaveRef.current) {
        return;
      }
      mouseEnterRef.current = on(targetRef.current, 'mouseenter', clear);
      mouseLeaveRef.current = on(targetRef.current, 'mouseleave', reset);
      return () => {
        mouseEnterRef.current?.off();
        mouseLeaveRef.current?.off();
      };
    }
  });
  return {
    clear,
    reset
  };
}
export default useDelayedClosure;