diff --git a/README.md b/README.md index fdc2b04..8d30871 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ props details: name - type + type default description @@ -129,9 +129,9 @@ props details: duration - number - 1.5 - after duration of time, this notice will disappear.(seconds) + number | false + 4.5 + The delay for automatic closing in seconds. Set to 0 or false to not close automatically. showProgress diff --git a/src/Notice.tsx b/src/Notice.tsx index 243e778..80c379a 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -38,7 +38,8 @@ const Notify = React.forwardRef 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 { - 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 { if (!mergedHovering && mergedShowProgress && (pauseOnHover || spentTime === 0)) { @@ -81,7 +82,7 @@ const Notify = React.forwardRef { 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 { diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx index 2072839..eb51b8b 100644 --- a/src/hooks/useNotification.tsx +++ b/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 */ diff --git a/src/interface.ts b/src/interface.ts index 1a5727d..c50ddc1 100644 --- a/src/interface.ts +++ b/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 }; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 05b302b..6b47858 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -162,7 +162,7 @@ describe('Notification.Basic', () => {

), key, - duration: null, + duration: false, }); }); @@ -192,7 +192,7 @@ describe('Notification.Basic', () => { {notUpdatableValue}

), - duration: null, + duration: false, }); }); @@ -204,7 +204,7 @@ describe('Notification.Basic', () => {

), key, - duration: null, + duration: false, }); }); @@ -490,7 +490,7 @@ describe('Notification.Basic', () => {

), key, - duration: null, + duration: false, onClick: () => { clicked += 1; }, diff --git a/tests/stack.test.tsx b/tests/stack.test.tsx index be6bc9e..628bbcb 100644 --- a/tests/stack.test.tsx +++ b/tests/stack.test.tsx @@ -17,7 +17,7 @@ describe('stack', () => { onClick={() => { api.open({ content:
Test
, - duration: null, + duration: false, }); }} /> @@ -56,7 +56,7 @@ describe('stack', () => { onClick={() => { api.open({ content:
Test
, - duration: null, + duration: false, closable: true, }); }}