fix hover pause timer

Author: zombieJ

src/hooks/useNoticeTimer.ts

@@ -20,6 +20,20 @@ export default function useNoticeTimer(
   const [walking, setWalking] = React.useState(durationMs > 0);
   const startTimestampRef = React.useRef<number | null>(null);
   const passTimeRef = React.useRef(0);
+  const timeoutRef = React.useRef<number | null>(null);
+  const rafRef = React.useRef<number | null>(null);
+
+  const cleanupTimer = React.useCallback(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    if (rafRef.current !== null) {
+      raf.cancel(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
 
   function syncPassTime() {
     const now = Date.now();
@@ -30,8 +44,10 @@ export default function useNoticeTimer(
 
   const onPause = React.useCallback(() => {
     syncPassTime();
+    startTimestampRef.current = null;
+    cleanupTimer();
     setWalking(false);
-  }, []);
+  }, [cleanupTimer]);
 
   const onResume = React.useCallback(() => {
     if (durationMs > 0) {
@@ -62,37 +78,30 @@ export default function useNoticeTimer(
       return;
     }
 
-    const timeout = window.setTimeout(() => {
+    timeoutRef.current = window.setTimeout(() => {
       passTimeRef.current = durationMs;
       onEventUpdate(1);
       onEventClose();
     }, durationMs - passTimeRef.current);
 
     if (!trackProgress) {
-      return () => {
-        window.clearTimeout(timeout);
-      };
+      return cleanupTimer;
     }
 
-    let rafId: number | null = null;
-
     function step() {
       syncPassTime();
       onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
 
       if (passTimeRef.current < durationMs) {
-        rafId = raf(step);
+        rafRef.current = raf(step);
       }
     }
 
     startTimestampRef.current = Date.now();
-    rafId = raf(step);
+    rafRef.current = raf(step);
 
-    return () => {
-      window.clearTimeout(timeout);
-      raf.cancel(rafId);
-    };
-  }, [durationMs, walking]);
+    return cleanupTimer;
+  }, [cleanupTimer, durationMs, onEventClose, onEventUpdate, trackProgress, walking]);
 
   return [onResume, onPause] as const;
 }

tests/index.test.tsx

@@ -273,6 +273,7 @@ describe('Notification.Basic', () => {
   it('continue timing after hover', () => {
     const { instance } = renderDemo({
       duration: 1,
+      showProgress: true,
     });
 
     act(() => {
@@ -291,10 +292,17 @@ describe('Notification.Basic', () => {
 
     // Mouse in should not remove
     fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
+    const pausedProgress = document
+      .querySelector<HTMLProgressElement>('.rc-notification-notice-progress')
+      .getAttribute('value');
     act(() => {
+      // Timer cleanup should happen synchronously when hover starts.
       vi.advanceTimersByTime(1000);
     });
     expect(document.querySelector('.test')).toBeTruthy();
+    expect(
+      document.querySelector<HTMLProgressElement>('.rc-notification-notice-progress'),
+    ).toHaveAttribute('value', pausedProgress);
 
     // Mouse out should not remove until 500ms later
     fireEvent.mouseLeave(document.querySelector('.rc-notification-notice'));