feat(show-progress): add show progress support (#322)

* feat(show-progress): add show progress support

* feat(show-progress): update readme changes

* feat(show-progress): move the progress bar to the bottom

* fix: remove rc-progress and resolve conversation

* feat(show-progress): using standard progress element

* fix: also define the standard property 'appearance' for compatibility

* fix: remove progress wrapper

* docs: revert hooks add showProgress demo

* fix(show-progress): keep on hover and reverse

* fix: add spent time to continue the progress

* fix: add test case for spentTime

* fix: fixing the start time for animation

Author: yociduo

README.md

@@ -130,6 +130,12 @@ props details:
           <td>1.5</td>
           <td>after duration of time, this notice will disappear.(seconds)</td>
         </tr>
+        <tr>
+          <td>showProgress</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>show with progress bar for auto-closing notification</td>
+        </tr>
         <tr>
           <td>style</td>
           <td>Object</td>

assets/index.less

@@ -90,6 +90,34 @@
         filter: alpha(opacity=100);
       }
     }
+
+    // Progress
+    &-progress {
+      position: absolute;
+      left: 3px;
+      right: 3px;
+      border-radius: 1px;
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      display: block;
+      inline-size: 100%;
+      block-size: 2px;
+      border: 0;
+
+      &,
+      &::-webkit-progress-bar {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &::-moz-progress-bar {
+        background-color: #31afff;
+      }
+
+      &::-webkit-progress-value {
+        background-color: #31afff;
+      }
+    }
   }
 
   &-fade {

docs/demo/showProgress.md

@@ -0,0 +1,8 @@
+---
+title: showProgress
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/showProgress.tsx"></code>

docs/examples/showProgress.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable no-console */
+import React from 'react';
+import '../../assets/index.less';
+import { useNotification } from '../../src';
+import motion from './motion';
+
+export default () => {
+  const [notice, contextHolder] = useNotification({ motion, showProgress: true });
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          notice.open({
+            content: `${new Date().toISOString()}`,
+          });
+        }}
+      >
+        Show With Progress
+      </button>
+      {contextHolder}
+    </>
+  );
+};

src/Notice.tsx

@@ -21,6 +21,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     style,
     className,
     duration = 4.5,
+    showProgress,
 
     eventKey,
     content,
@@ -34,7 +35,10 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     hovering: forcedHovering,
   } = props;
   const [hovering, setHovering] = React.useState(false);
+  const [percent, setPercent] = React.useState(0);
+  const [spentTime, setSpentTime] = React.useState(0);
   const mergedHovering = forcedHovering || hovering;
+  const mergedShowProgress = duration > 0 && showProgress;
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -50,17 +54,48 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   // ======================== Effect ========================
   React.useEffect(() => {
     if (!mergedHovering && duration > 0) {
-      const timeout = setTimeout(() => {
-        onInternalClose();
-      }, duration * 1000);
+      const start = Date.now() - spentTime;
+      const timeout = setTimeout(
+        () => {
+          onInternalClose();
+        },
+        duration * 1000 - spentTime,
+      );
 
       return () => {
         clearTimeout(timeout);
+        setSpentTime(Date.now() - start);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, mergedHovering, times]);
 
+  React.useEffect(() => {
+    if (!mergedHovering && mergedShowProgress) {
+      const start = performance.now();
+      let animationFrame: number;
+
+      const calculate = () => {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame((timestamp) => {
+          const runtime = timestamp + spentTime - start;
+          const progress = Math.min(runtime / (duration * 1000), 1);
+          setPercent(progress * 100);
+          if (progress < 1) {
+            calculate();
+          }
+        });
+      };
+
+      calculate();
+
+      return () => {
+        cancelAnimationFrame(animationFrame);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, mergedHovering, mergedShowProgress, times]);
+
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {
@@ -74,6 +109,9 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
   const ariaProps = pickAttrs(closableObj, true);
 
+  // ======================== Progress ========================
+  const validPercent = 100 - (!percent || percent < 0 ? 0 : percent > 100 ? 100 : percent);
+
   // ======================== Render ========================
   const noticePrefixCls = `${prefixCls}-notice`;
 
@@ -115,6 +153,13 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
           {closableObj.closeIcon}
         </a>
       )}
+
+      {/* Progress Bar */}
+      {mergedShowProgress && (
+        <progress className={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
+          {validPercent + '%'}
+        </progress>
+      )}
     </div>
   );
 });

src/hooks/useNotification.tsx

@@ -17,6 +17,7 @@ export interface NotificationConfig {
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;
+  showProgress?: 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

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

tests/index.test.tsx

@@ -270,6 +270,45 @@ describe('Notification.Basic', () => {
     expect(document.querySelectorAll('.freeze')).toHaveLength(0);
   });
 
+  it('continue timing after hover', () => {
+    const { instance } = renderDemo({
+      duration: 1,
+    });
+
+    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(1000);
+    });
+    expect(document.querySelector('.test')).toBeTruthy();
+
+    // Mouse out should not remove until 500ms later
+    fireEvent.mouseLeave(document.querySelector('.rc-notification-notice'));
+    act(() => {
+      vi.advanceTimersByTime(450);
+    });
+    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({
@@ -688,6 +727,7 @@ describe('Notification.Basic', () => {
     fireEvent.keyDown(document.querySelector('.rc-notification-notice-close'), { key: 'Enter' }); // origin latest
     expect(closeCount).toEqual(1);
   });
+
   it('Support aria-* in closable', () => {
     const { instance } = renderDemo({
       closable: {
@@ -712,4 +752,33 @@ describe('Notification.Basic', () => {
       document.querySelector('.rc-notification-notice-close').getAttribute('aria-labelledby'),
     ).toEqual('close');
   });
+
+  describe('showProgress', () => {
+    it('show with progress', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy();
+
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy();
+
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
+    });
+  });
 });