feat: Change duration to number|false type (#379)

* feat: Change duration to number|false type

* feat: update readme

* feat: update

Author: wanpan11

README.md

@@ -97,7 +97,7 @@ props details:
     <thead>
     <tr>
         <th style="width: 100px;">name</th>
-        <th style="width: 50px;">type</th>
+        <th style="width: 200px;">type</th>
         <th style="width: 50px;">default</th>
         <th>description</th>
     </tr>
@@ -129,9 +129,9 @@ props details:
         </tr>
         <tr>
           <td>duration</td>
-          <td>number</td>
-          <td>1.5</td>
-          <td>after duration of time, this notice will disappear.(seconds)</td>
+          <td>number | false</td>
+          <td>4.5</td>
+          <td>The delay for automatic closing in seconds. Set to 0 or false to not close automatically.</td>
         </tr>
         <tr>
           <td>showProgress</td>

src/Notice.tsx

@@ -38,7 +38,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   const [percent, setPercent] = React.useState(0);
   const [spentTime, setSpentTime] = React.useState(0);
   const mergedHovering = forcedHovering || hovering;
-  const mergedShowProgress = duration > 0 && showProgress;
+  const mergedDuration: number = typeof duration === 'number' ? duration : 0;
+  const mergedShowProgress = mergedDuration > 0 && showProgress;
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -53,13 +54,13 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
   // ======================== Effect ========================
   React.useEffect(() => {
-    if (!mergedHovering && duration > 0) {
+    if (!mergedHovering && mergedDuration > 0) {
       const start = Date.now() - spentTime;
       const timeout = setTimeout(
         () => {
           onInternalClose();
         },
-        duration * 1000 - spentTime,
+        mergedDuration * 1000 - spentTime,
       );
 
       return () => {
@@ -70,7 +71,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, mergedHovering, times]);
+  }, [mergedDuration, mergedHovering, times]);
 
   React.useEffect(() => {
     if (!mergedHovering && mergedShowProgress && (pauseOnHover || spentTime === 0)) {
@@ -81,7 +82,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
         cancelAnimationFrame(animationFrame);
         animationFrame = requestAnimationFrame((timestamp) => {
           const runtime = timestamp + spentTime - start;
-          const progress = Math.min(runtime / (duration * 1000), 1);
+          const progress = Math.min(runtime / (mergedDuration * 1000), 1);
           setPercent(progress * 100);
           if (progress < 1) {
             calculate();
@@ -98,7 +99,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, spentTime, mergedHovering, mergedShowProgress, times]);
+  }, [mergedDuration, spentTime, mergedHovering, mergedShowProgress, times]);
 
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {

src/hooks/useNotification.tsx

@@ -19,7 +19,7 @@ export interface NotificationConfig {
     | boolean
     | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   maxCount?: number;
-  duration?: number;
+  duration?: number | false | null;
   showProgress?: boolean;
   pauseOnHover?: boolean;
   /** @private. Config for notification holder style. Safe to remove if refactor */

src/interface.ts

@@ -6,7 +6,7 @@ type NoticeSemanticProps = 'wrapper';
 
 export interface NoticeConfig {
   content?: React.ReactNode;
-  duration?: number | null;
+  duration?: number | false | null;
   showProgress?: boolean;
   pauseOnHover?: boolean;
 
@@ -32,7 +32,7 @@ export interface OpenConfig extends NoticeConfig {
   key: React.Key;
   placement?: Placement;
   content?: React.ReactNode;
-  duration?: number | null;
+  duration?: number | false | null;
 }
 
 export type InnerOpenConfig = OpenConfig & { times?: number };

tests/index.test.tsx

@@ -162,7 +162,7 @@ describe('Notification.Basic', () => {
           </p>
         ),
         key,
-        duration: null,
+        duration: false,
       });
     });
 
@@ -192,7 +192,7 @@ describe('Notification.Basic', () => {
             {notUpdatableValue}
           </p>
         ),
-        duration: null,
+        duration: false,
       });
     });
 
@@ -204,7 +204,7 @@ describe('Notification.Basic', () => {
           </p>
         ),
         key,
-        duration: null,
+        duration: false,
       });
     });
 
@@ -490,7 +490,7 @@ describe('Notification.Basic', () => {
           </p>
         ),
         key,
-        duration: null,
+        duration: false,
         onClick: () => {
           clicked += 1;
         },

tests/stack.test.tsx

@@ -17,7 +17,7 @@ describe('stack', () => {
             onClick={() => {
               api.open({
                 content: <div className="context-content">Test</div>,
-                duration: null,
+                duration: false,
               });
             }}
           />
@@ -56,7 +56,7 @@ describe('stack', () => {
             onClick={() => {
               api.open({
                 content: <div className="context-content">Test</div>,
-                duration: null,
+                duration: false,
                 closable: true,
               });
             }}