fix hover pause timer

Author: zombieJ

src/hooks/useNoticeTimer.ts

@@ -18,14 +18,18 @@ 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(() => {
@@ -35,64 +39,55 @@ export default function useNoticeTimer(
 
   const onResume = React.useCallback(() => {
     if (durationMs > 0) {
+      lastRafTimeRef.current = Date.now();
       setWalking(true);
     } else {
       onEventUpdate(0);
     }
-  }, [durationMs, onEventUpdate]);
+  }, [durationMs]);
 
+  // Reset when durationMs changed.
   React.useEffect(() => {
-    if (durationMs <= 0) {
-      startTimestampRef.current = null;
-      onEventUpdate(0);
-      return;
-    }
-
-    syncPassTime();
-    onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+    passTimeRef.current = 0;
+    setWalking(durationMs > 0);
+  }, [durationMs]);
 
+  // Trigger update when walking changed.
+  React.useEffect(() => {
     if (!walking) {
-      startTimestampRef.current = null;
       return;
     }
 
-    if (passTimeRef.current >= durationMs) {
-      onEventUpdate(1);
-      onEventClose();
-      return;
-    }
+    // Use raf to update since it can provide more accurate timing and better performance for animations.
+    if (trackProgress) {
+      let rafId: number | null = null;
 
-    const timeout = window.setTimeout(() => {
-      passTimeRef.current = durationMs;
-      onEventUpdate(1);
-      onEventClose();
-    }, durationMs - passTimeRef.current);
+      function step() {
+        syncPassTime();
 
-    if (!trackProgress) {
-      return () => {
-        window.clearTimeout(timeout);
-      };
-    }
+        if (passTimeRef.current >= durationMs) {
+          onEventUpdate(1);
+          onEventClose();
+        } else {
+          onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+          rafId = raf(step);
+        }
+      }
 
-    let rafId: number | null = null;
+      step();
 
-    function step() {
-      syncPassTime();
-      onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+      return () => {
+        raf.cancel(rafId!);
+      };
+    } else {
+      // Fallback to setTimeout when progress tracking is not needed, which can save some resources.
+      const timeoutId = window.setTimeout(onEventClose, durationMs);
 
-      if (passTimeRef.current < durationMs) {
-        rafId = raf(step);
-      }
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
     }
-
-    startTimestampRef.current = Date.now();
-    rafId = raf(step);
-
-    return () => {
-      window.clearTimeout(timeout);
-      raf.cancel(rafId);
-    };
-  }, [durationMs, walking]);
+  }, [walking]);
 
   return [onResume, onPause] as const;
 }

tests/index.test.tsx

@@ -32,6 +32,15 @@ describe('Notification.Basic', () => {
     return { ...renderResult, instance };
   }
 
+  function step(time: number, slice = 16) {
+    let current = 0;
+
+    while (current < time) {
+      vi.advanceTimersByTime(slice);
+      current += slice;
+    }
+  }
+
   it('works', () => {
     const { instance, unmount } = renderDemo();
 
@@ -273,6 +282,7 @@ describe('Notification.Basic', () => {
   it('continue timing after hover', () => {
     const { instance } = renderDemo({
       duration: 1,
+      showProgress: true,
     });
 
     act(() => {
@@ -291,10 +301,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'));
@@ -1139,13 +1156,13 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy();
 
       act(() => {
-        vi.advanceTimersByTime(500);
+        step(500);
       });
 
       expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy();
 
       act(() => {
-        vi.advanceTimersByTime(500);
+        step(500);
       });
 
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();