refactor notice timer hook

Author: DeadPeople

src/Notification.tsx

@@ -20,11 +20,16 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   const onEventClose = useEvent(onClose);
 
   // ======================== Duration ========================
-  const [onResume, onPause] = useNoticeTimer(duration, onEventClose);
+  const [onResume, onPause] = useNoticeTimer(duration, onEventClose, () => {});
 
   // ========================= Render =========================
   return (
-    <div ref={ref} onClick={onClick} onMouseEnter={onPause} onMouseLeave={onResume}>
+    <div
+      ref={ref}
+      onClick={onClick}
+      onMouseEnter={pauseOnHover ? onPause : undefined}
+      onMouseLeave={pauseOnHover ? onResume : undefined}
+    >
       {content}
       {close && (
         <button

src/hooks/useNoticeTimer.ts

@@ -1,44 +1,63 @@
 import * as React from 'react';
-
-export default function useNoticeTimer(duration: number | false, onClose: VoidFunction) {
-  // Normalize: `false` means no auto-close
-  const mergedDuration: number = typeof duration === 'number' ? duration : 0;
-
-  const startTimestampRef = React.useRef(0);
-  const leftTimeRef = React.useRef(mergedDuration * 1000);
-  const timerRef = React.useRef<NodeJS.Timeout>();
-
-  const clear = () => {
-    clearTimeout(timerRef.current);
-  };
-
-  const onResume = () => {
-    clear();
-
-    // Only start timer when there is remaining time
-    if (leftTimeRef.current > 0) {
-      startTimestampRef.current = Date.now();
-      timerRef.current = setTimeout(() => {
-        onClose();
-      }, leftTimeRef.current);
+import raf from '@rc-component/util/es/raf';
+import useEvent from '@rc-component/util/es/hooks/useEvent';
+
+export default function useNoticeTimer(
+  duration: number | false,
+  onClose: VoidFunction,
+  onUpdate: (ptg: number) => void,
+) {
+  const mergedDuration = typeof duration === 'number' ? duration : 0;
+  const durationMs = Math.max(mergedDuration, 0) * 1000;
+  const onEventClose = useEvent(onClose);
+  const onEventUpdate = useEvent(onUpdate);
+
+  const [walking, setWalking] = React.useState(durationMs > 0);
+  const startTimestampRef = React.useRef<number | null>(null);
+  const passTimeRef = React.useRef(0);
+
+  function onPause() {
+    setWalking(false);
+  }
+
+  function onResume() {
+    setWalking(true);
+  }
+
+  function updateProgress() {
+    if (durationMs) {
+      const now = Date.now();
+      const passedTime = now - (startTimestampRef.current || now);
+      startTimestampRef.current = now;
+      passTimeRef.current += passedTime;
+      onEventUpdate(Math.min(passTimeRef.current / durationMs, 1));
+
+      // Return true if timesup
+      return passTimeRef.current >= durationMs;
     }
-  };
+    return false;
+  }
 
-  const onPause = () => {
-    clear();
+  React.useEffect(() => {
+    if (walking && durationMs > 0) {
+      let rafId: number | null = null;
 
-    // Record how much time is left so onResume can continue from here
-    leftTimeRef.current -= Date.now() - startTimestampRef.current;
-  };
+      function step() {
+        if (updateProgress()) {
+          onEventClose();
+        } else {
+          rafId = raf(step);
+        }
+      }
 
-  React.useEffect(() => {
-    // Reset remaining time whenever duration changes, then (re)start the timer
-    leftTimeRef.current = mergedDuration * 1000;
-    onResume();
+      startTimestampRef.current = Date.now();
+      rafId = raf(step);
 
-    // Clear the timer on unmount or before next effect run
-    return clear;
-  }, []);
+      return () => {
+        raf.cancel(rafId);
+      };
+    }
+  }, [walking]);
 
   return [onResume, onPause] as const;
 }