fix hover pause timer

Author: zombieJ

src/hooks/useNoticeTimer.ts

@@ -18,32 +18,44 @@ export default function useNoticeTimer(
   const onEventUpdate = useEvent(onUpdate);
 
   const [walking, setWalking] = React.useState(durationMs > 0);
-  const startTimestampRef = React.useRef<number | null>(null);
   const passTimeRef = React.useRef(0);
+  const lastRafTimeRef = React.useRef<number | null>(null);
 
   function syncPassTime() {
     const now = Date.now();
-    const passedTime = now - (startTimestampRef.current || now);
-    startTimestampRef.current = now;
-    passTimeRef.current += passedTime;
+    const lastRafTime = lastRafTimeRef.current;
+
+    if (lastRafTime !== null) {
+      passTimeRef.current += now - lastRafTime;
+    }
+
+    lastRafTimeRef.current = now;
   }
 
   const onPause = React.useCallback(() => {
     syncPassTime();
+    if (durationMs > 0) {
+      onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+    }
+    lastRafTimeRef.current = null;
     setWalking(false);
-  }, []);
+    // `onEventUpdate` is a `useEvent` callback and always reads the latest value.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [durationMs]);
 
   const onResume = React.useCallback(() => {
     if (durationMs > 0) {
       setWalking(true);
     } else {
       onEventUpdate(0);
     }
-  }, [durationMs, onEventUpdate]);
+    // `onEventUpdate` is a `useEvent` callback and always reads the latest value.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [durationMs]);
 
   React.useEffect(() => {
     if (durationMs <= 0) {
-      startTimestampRef.current = null;
+      lastRafTimeRef.current = null;
       onEventUpdate(0);
       return;
     }
@@ -52,7 +64,7 @@ export default function useNoticeTimer(
     onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
 
     if (!walking) {
-      startTimestampRef.current = null;
+      lastRafTimeRef.current = null;
       return;
     }
 
@@ -62,6 +74,8 @@ export default function useNoticeTimer(
       return;
     }
 
+    lastRafTimeRef.current = Date.now();
+
     const timeout = window.setTimeout(() => {
       passTimeRef.current = durationMs;
       onEventUpdate(1);
@@ -85,14 +99,15 @@ export default function useNoticeTimer(
       }
     }
 
-    startTimestampRef.current = Date.now();
     rafId = raf(step);
 
     return () => {
       window.clearTimeout(timeout);
       raf.cancel(rafId);
     };
-  }, [durationMs, walking]);
+    // `useEvent` callbacks and refs always read latest values.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [durationMs, 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(() => {
+      // Elapsed time should not advance while hovering.
       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'));