fix hover pause timer

Author: zombieJ

src/hooks/useNoticeTimer.ts

@@ -18,50 +18,65 @@ 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(() => {
+    if (!walking) {
+      return;
+    }
+
     syncPassTime();
+    if (durationMs > 0) {
+      onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+    }
     setWalking(false);
-  }, []);
+  }, [durationMs, walking]);
 
   const onResume = React.useCallback(() => {
     if (durationMs > 0) {
+      lastRafTimeRef.current = Date.now();
       setWalking(true);
     } else {
       onEventUpdate(0);
     }
-  }, [durationMs, onEventUpdate]);
+  }, [durationMs]);
 
   React.useEffect(() => {
     if (durationMs <= 0) {
-      startTimestampRef.current = null;
+      lastRafTimeRef.current = null;
       onEventUpdate(0);
       return;
     }
 
-    syncPassTime();
     onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
 
     if (!walking) {
-      startTimestampRef.current = null;
       return;
     }
 
+    syncPassTime();
+    onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+
     if (passTimeRef.current >= durationMs) {
       onEventUpdate(1);
       onEventClose();
       return;
     }
 
+    lastRafTimeRef.current = Date.now();
+
     const timeout = window.setTimeout(() => {
       passTimeRef.current = durationMs;
       onEventUpdate(1);
@@ -85,14 +100,13 @@ export default function useNoticeTimer(
       }
     }
 
-    startTimestampRef.current = Date.now();
     rafId = raf(step);
 
     return () => {
       window.clearTimeout(timeout);
-      raf.cancel(rafId);
+      raf.cancel(rafId!);
     };
-  }, [durationMs, walking]);
+  }, [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'));