feat(pauseOnHover): add pauseOnHover options (#335)

Author: yociduo

README.md

@@ -136,6 +136,12 @@ props details:
           <td>false</td>
           <td>show with progress bar for auto-closing notification</td>
         </tr>
+        <tr>
+          <td>pauseOnHover</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>keep the timer running or not on hover</td>
+        </tr>
         <tr>
           <td>style</td>
           <td>Object</td>

docs/examples/showProgress.tsx

@@ -18,6 +18,16 @@ export default () => {
       >
         Show With Progress
       </button>
+      <button
+        onClick={() => {
+          notice.open({
+            content: `${new Date().toISOString()}`,
+            pauseOnHover: false,
+          });
+        }}
+      >
+        Not Pause On Hover
+      </button>
       {contextHolder}
     </>
   );

src/Notice.tsx

@@ -22,6 +22,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     className,
     duration = 4.5,
     showProgress,
+    pauseOnHover = true,
 
     eventKey,
     content,
@@ -63,15 +64,17 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       );
 
       return () => {
-        clearTimeout(timeout);
+        if (pauseOnHover) {
+          clearTimeout(timeout);
+        }
         setSpentTime(Date.now() - start);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, mergedHovering, times]);
 
   React.useEffect(() => {
-    if (!mergedHovering && mergedShowProgress) {
+    if (!mergedHovering && mergedShowProgress && (pauseOnHover || spentTime === 0)) {
       const start = performance.now();
       let animationFrame: number;
 
@@ -90,11 +93,13 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       calculate();
 
       return () => {
-        cancelAnimationFrame(animationFrame);
+        if (pauseOnHover) {
+          cancelAnimationFrame(animationFrame);
+        }
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, mergedHovering, mergedShowProgress, times]);
+  }, [duration, spentTime, mergedHovering, mergedShowProgress, times]);
 
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {

src/hooks/useNotification.tsx

@@ -18,6 +18,7 @@ export interface NotificationConfig {
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
+  pauseOnHover?: boolean;
   /** @private. Config for notification holder style. Safe to remove if refactor */
   className?: (placement: Placement) => string;
   /** @private. Config for notification holder style. Safe to remove if refactor */

src/interface.ts

@@ -8,6 +8,7 @@ export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
   showProgress?: boolean;
+  pauseOnHover?: boolean;
   closeIcon?: React.ReactNode;
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   className?: string;

tests/index.test.tsx

@@ -309,6 +309,74 @@ describe('Notification.Basic', () => {
     expect(document.querySelector('.test')).toBeFalsy();
   });
 
+  describe('pauseOnHover is false', () => {
+    it('does not freeze when pauseOnHover is false', () => {
+      const { instance } = renderDemo();
+
+      act(() => {
+        instance.open({
+          content: (
+            <p id="not-freeze" className="not-freeze">
+              not freeze
+            </p>
+          ),
+          duration: 0.3,
+          pauseOnHover: false,
+        });
+      });
+
+      expect(document.querySelectorAll('.not-freeze')).toHaveLength(1);
+
+      // Mouse in should remove
+      fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(document.querySelectorAll('.not-freeze')).toHaveLength(0);
+    });
+
+    it('continue timing after hover', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        pauseOnHover: false,
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.test')).toBeTruthy();
+
+      // Wait for 500ms
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+      expect(document.querySelector('.test')).toBeTruthy();
+
+      // Mouse in should not remove
+      fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(document.querySelector('.test')).toBeTruthy();
+
+      // Mouse out should not remove until 500ms later
+      fireEvent.mouseLeave(document.querySelector('.rc-notification-notice'));
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(document.querySelector('.test')).toBeTruthy();
+
+      //
+      act(() => {
+        vi.advanceTimersByTime(100);
+      });
+      expect(document.querySelector('.test')).toBeFalsy();
+    });
+  });
+
   describe('maxCount', () => {
     it('remove work when maxCount set', () => {
       const { instance } = renderDemo({