From 3a12f6c96fbf65a7a6a94679c6040e0aa4ff3fb7 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 9 Apr 2024 15:56:55 +0800 Subject: [PATCH 01/12] feat(show-progress): add show progress support --- assets/index.less | 5 +++++ docs/examples/hooks.tsx | 28 ++++++++++++++-------------- package.json | 1 + src/Notice.tsx | 33 +++++++++++++++++++++++++++++++++ src/hooks/useNotification.tsx | 1 + src/interface.ts | 1 + tests/index.test.tsx | 28 ++++++++++++++++++++++++++++ 7 files changed, 83 insertions(+), 14 deletions(-) diff --git a/assets/index.less b/assets/index.less index 441ed46..60709d0 100644 --- a/assets/index.less +++ b/assets/index.less @@ -90,6 +90,11 @@ filter: alpha(opacity=100); } } + + // Progress + &-progress { + display: block; + } } &-fade { diff --git a/docs/examples/hooks.tsx b/docs/examples/hooks.tsx index a9d3094..b347404 100644 --- a/docs/examples/hooks.tsx +++ b/docs/examples/hooks.tsx @@ -4,6 +4,14 @@ import '../../assets/index.less'; import { useNotification } from '../../src'; import motion from './motion'; +const getConfig = () => ({ + content: `${Array(Math.round(Math.random() * 5) + 1) + .fill(1) + .map(() => new Date().toISOString()) + .join('\n')}`, + duration: null, +}); + const App = () => { const [notice, contextHolder] = useNotification({ motion, closable: true }); @@ -25,31 +33,23 @@ const App = () => { {/* Not Close */} - {/* Not Close */} + {/* Show Progress */} diff --git a/package.json b/package.json index 22c34e2..b8c301a 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@babel/runtime": "^7.10.1", "classnames": "2.x", "rc-motion": "^2.9.0", + "rc-progress": "^4.0.0", "rc-util": "^5.20.1" }, "lint-staged": { diff --git a/src/Notice.tsx b/src/Notice.tsx index 84adcb6..9b901f2 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -3,6 +3,7 @@ import KeyCode from 'rc-util/lib/KeyCode'; import * as React from 'react'; import type { NoticeConfig } from './interface'; import pickAttrs from 'rc-util/lib/pickAttrs'; +import { Line } from 'rc-progress'; export interface NoticeProps extends Omit { prefixCls: string; @@ -21,6 +22,7 @@ const Notify = React.forwardRef 0 && showProgress; // ======================== Close ========================= const onInternalClose = () => { @@ -61,6 +65,32 @@ const Notify = React.forwardRef { + if (!mergedHovering && mergedShowProgress) { + const start = performance.now(); + let animationFrame: number; + + const calculate = () => { + cancelAnimationFrame(animationFrame); + animationFrame = requestAnimationFrame((timestamp) => { + const runtime = timestamp - start; + const progress = Math.min(runtime / (duration * 1000), 1); + setPercent(progress * 100); + if (progress < 1) { + calculate(); + } + }); + }; + + calculate(); + + return () => { + setPercent(0); + cancelAnimationFrame(animationFrame); + }; + } + }, [duration, mergedHovering, mergedShowProgress, times]); + // ======================== Closable ======================== const closableObj = React.useMemo(() => { if (typeof closable === 'object' && closable !== null) { @@ -95,6 +125,9 @@ const Notify = React.forwardRef + {/* Progress Bar */} + {mergedShowProgress && } + {/* Content */}
{content}
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx index ad79905..31f5d81 100644 --- a/src/hooks/useNotification.tsx +++ b/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 */ diff --git a/src/interface.ts b/src/interface.ts index b9de386..b5d48f1 100644 --- a/src/interface.ts +++ b/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; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 6fa75ee..b905a49 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -688,6 +688,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 +713,31 @@ describe('Notification.Basic', () => { document.querySelector('.rc-notification-notice-close').getAttribute('aria-labelledby'), ).toEqual('close'); }); + + it('show progress', () => { + const { instance } = renderDemo({ + duration: 1, + showProgress: true, + }); + + act(() => { + instance.open({ + content:

1

, + }); + }); + + 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(); + }); }); From b470dc4385e2f0504800b9011dff9238b40fbccf Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 9 Apr 2024 16:02:48 +0800 Subject: [PATCH 02/12] feat(show-progress): update readme changes --- README.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index bc059f5..58d1aa3 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,9 @@ React Notification UI Component ```js import Notification from 'rc-notification'; -Notification.newInstance({}, notification => { +Notification.newInstance({}, (notification) => { notification.notice({ - content: 'content' + content: 'content', }); }); ``` @@ -34,8 +34,8 @@ Notification.newInstance({}, notification => { ## Compatibility | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## Example @@ -130,6 +130,12 @@ props details: 1.5 after duration of time, this notice will disappear.(seconds) + + showProgress + boolean + + show progress bar for auto-closing notification + style Object From 8a0a951d16c28990bc6f1faeaef835ff4458688e Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Thu, 11 Apr 2024 11:57:04 +0800 Subject: [PATCH 03/12] feat(show-progress): move the progress bar to the bottom --- README.md | 2 +- assets/index.less | 4 +++- docs/examples/hooks.tsx | 6 +++--- src/Notice.tsx | 6 +++--- tests/index.test.tsx | 2 +- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 58d1aa3..b1fbdb0 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ props details: showProgress boolean - show progress bar for auto-closing notification + show with progress bar for auto-closing notification style diff --git a/assets/index.less b/assets/index.less index 60709d0..7d272b7 100644 --- a/assets/index.less +++ b/assets/index.less @@ -93,7 +93,9 @@ // Progress &-progress { - display: block; + position: absolute; + left: 3px; + right: 3px; } } diff --git a/docs/examples/hooks.tsx b/docs/examples/hooks.tsx index b347404..18d12dc 100644 --- a/docs/examples/hooks.tsx +++ b/docs/examples/hooks.tsx @@ -39,17 +39,17 @@ const App = () => { Not Auto Close - {/* Show Progress */} + {/* Show With Progress */} diff --git a/src/Notice.tsx b/src/Notice.tsx index 9b901f2..35ba1ea 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -125,9 +125,6 @@ const Notify = React.forwardRef - {/* Progress Bar */} - {mergedShowProgress && } - {/* Content */}
{content}
@@ -148,6 +145,9 @@ const Notify = React.forwardRef )} + + {/* Progress Bar */} + {mergedShowProgress && } ); }); diff --git a/tests/index.test.tsx b/tests/index.test.tsx index b905a49..51db0f9 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -714,7 +714,7 @@ describe('Notification.Basic', () => { ).toEqual('close'); }); - it('show progress', () => { + it('show with progress', () => { const { instance } = renderDemo({ duration: 1, showProgress: true, From c73f095cd7b0d01836ae35e7573103c86b950f7e Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Mon, 6 May 2024 17:18:37 +0800 Subject: [PATCH 04/12] fix: remove rc-progress and resolve conversation --- README.md | 10 +++++----- assets/index.less | 6 ++++++ package.json | 1 - src/Notice.tsx | 12 ++++++++++-- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index b1fbdb0..43984c6 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,9 @@ React Notification UI Component ```js import Notification from 'rc-notification'; -Notification.newInstance({}, (notification) => { +Notification.newInstance({}, notification => { notification.notice({ - content: 'content', + content: 'content' }); }); ``` @@ -34,8 +34,8 @@ Notification.newInstance({}, (notification) => { ## Compatibility | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| --- | --- | --- | --- | --- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## Example @@ -133,7 +133,7 @@ props details: showProgress boolean - + false show with progress bar for auto-closing notification diff --git a/assets/index.less b/assets/index.less index 7d272b7..fdc4563 100644 --- a/assets/index.less +++ b/assets/index.less @@ -96,6 +96,12 @@ position: absolute; left: 3px; right: 3px; + background-color: rgba(0, 0, 0, 0.04); + + &-bar { + height: 2px; + background-color: #31afff; + } } } diff --git a/package.json b/package.json index b8c301a..22c34e2 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,6 @@ "@babel/runtime": "^7.10.1", "classnames": "2.x", "rc-motion": "^2.9.0", - "rc-progress": "^4.0.0", "rc-util": "^5.20.1" }, "lint-staged": { diff --git a/src/Notice.tsx b/src/Notice.tsx index 35ba1ea..3615efd 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -3,7 +3,6 @@ import KeyCode from 'rc-util/lib/KeyCode'; import * as React from 'react'; import type { NoticeConfig } from './interface'; import pickAttrs from 'rc-util/lib/pickAttrs'; -import { Line } from 'rc-progress'; export interface NoticeProps extends Omit { prefixCls: string; @@ -104,6 +103,11 @@ const Notify = React.forwardRef 100 ? 100 : percent}%`, + }; + // ======================== Render ======================== const noticePrefixCls = `${prefixCls}-notice`; @@ -147,7 +151,11 @@ const Notify = React.forwardRef} + {mergedShowProgress && ( +
+
+
+ )} ); }); From e894b981029d6ae6d7014dc6d87417f35252eb86 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 7 May 2024 11:01:04 +0800 Subject: [PATCH 05/12] feat(show-progress): using standard progress element --- assets/index.less | 29 +++++++++++++++++++++++------ src/Notice.tsx | 10 +++++----- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/assets/index.less b/assets/index.less index fdc4563..9aaaa25 100644 --- a/assets/index.less +++ b/assets/index.less @@ -93,13 +93,30 @@ // Progress &-progress { - position: absolute; - left: 3px; - right: 3px; - background-color: rgba(0, 0, 0, 0.04); + -webkit-appearance: none; + display: block; + inline-size: 100%; + block-size: 2px; + border: 0; + + &-wrapper { + position: absolute; + left: 3px; + right: 3px; + border-radius: 1px; + overflow: hidden; + } + + &, + &::-webkit-progress-bar { + background-color: rgba(0, 0, 0, 0.04); + } + + &::-moz-progress-bar { + background-color: #31afff; + } - &-bar { - height: 2px; + &::-webkit-progress-value { background-color: #31afff; } } diff --git a/src/Notice.tsx b/src/Notice.tsx index 3615efd..3a1b343 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -104,9 +104,7 @@ const Notify = React.forwardRef 100 ? 100 : percent}%`, - }; + const validPercent = !percent || percent < 0 ? 0 : percent > 100 ? 100 : percent; // ======================== Render ======================== const noticePrefixCls = `${prefixCls}-notice`; @@ -152,8 +150,10 @@ const Notify = React.forwardRef -
+
+ + {validPercent + '%'} +
)} From 127851f91731ad1fd437b05aac21aace79eb262f Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 7 May 2024 11:16:17 +0800 Subject: [PATCH 06/12] fix: also define the standard property 'appearance' for compatibility --- assets/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/index.less b/assets/index.less index 9aaaa25..7a96e01 100644 --- a/assets/index.less +++ b/assets/index.less @@ -93,6 +93,7 @@ // Progress &-progress { + appearance: none; -webkit-appearance: none; display: block; inline-size: 100%; From f139d25d2256799a73b4d8e441bcd01e190ad4c1 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 7 May 2024 11:26:57 +0800 Subject: [PATCH 07/12] fix: remove progress wrapper --- assets/index.less | 13 +++++-------- src/Notice.tsx | 8 +++----- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/assets/index.less b/assets/index.less index 7a96e01..5fbbf71 100644 --- a/assets/index.less +++ b/assets/index.less @@ -93,6 +93,11 @@ // Progress &-progress { + position: absolute; + left: 3px; + right: 3px; + border-radius: 1px; + overflow: hidden; appearance: none; -webkit-appearance: none; display: block; @@ -100,14 +105,6 @@ block-size: 2px; border: 0; - &-wrapper { - position: absolute; - left: 3px; - right: 3px; - border-radius: 1px; - overflow: hidden; - } - &, &::-webkit-progress-bar { background-color: rgba(0, 0, 0, 0.04); diff --git a/src/Notice.tsx b/src/Notice.tsx index 3a1b343..58b3735 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -150,11 +150,9 @@ const Notify = React.forwardRef - - {validPercent + '%'} - - + + {validPercent + '%'} + )} ); From aab4875e8c9766d275ec66f1de001eccbb3acaee Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Tue, 7 May 2024 13:38:15 +0800 Subject: [PATCH 08/12] docs: revert hooks add showProgress demo --- docs/demo/showProgress.md | 8 ++++++++ docs/examples/hooks.tsx | 28 ++++++++++++++-------------- docs/examples/showProgress.tsx | 24 ++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 14 deletions(-) create mode 100644 docs/demo/showProgress.md create mode 100644 docs/examples/showProgress.tsx diff --git a/docs/demo/showProgress.md b/docs/demo/showProgress.md new file mode 100644 index 0000000..e895cd9 --- /dev/null +++ b/docs/demo/showProgress.md @@ -0,0 +1,8 @@ +--- +title: showProgress +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/hooks.tsx b/docs/examples/hooks.tsx index 18d12dc..a9d3094 100644 --- a/docs/examples/hooks.tsx +++ b/docs/examples/hooks.tsx @@ -4,14 +4,6 @@ import '../../assets/index.less'; import { useNotification } from '../../src'; import motion from './motion'; -const getConfig = () => ({ - content: `${Array(Math.round(Math.random() * 5) + 1) - .fill(1) - .map(() => new Date().toISOString()) - .join('\n')}`, - duration: null, -}); - const App = () => { const [notice, contextHolder] = useNotification({ motion, closable: true }); @@ -33,23 +25,31 @@ const App = () => { {/* Not Close */} - {/* Show With Progress */} + {/* Not Close */} diff --git a/docs/examples/showProgress.tsx b/docs/examples/showProgress.tsx new file mode 100644 index 0000000..50e80eb --- /dev/null +++ b/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 ( + <> + + {contextHolder} + + ); +}; From 4098b52bb6476c40af671d1c954cb148fec10895 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Wed, 8 May 2024 10:46:10 +0800 Subject: [PATCH 09/12] fix(show-progress): keep on hover and reverse --- src/Notice.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index 58b3735..c1b9fb7 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -84,7 +84,6 @@ const Notify = React.forwardRef { - setPercent(0); cancelAnimationFrame(animationFrame); }; } @@ -104,7 +103,7 @@ const Notify = React.forwardRef 100 ? 100 : percent; + const validPercent = 100 - (!percent || percent < 0 ? 0 : percent > 100 ? 100 : percent); // ======================== Render ======================== const noticePrefixCls = `${prefixCls}-notice`; From efa9bf2a4c82eeec7c20e85bab44369c2b6570fa Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Sat, 11 May 2024 10:54:56 +0800 Subject: [PATCH 10/12] fix: add spent time to continue the progress --- src/Notice.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index c1b9fb7..8fb18e7 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -36,6 +36,7 @@ const Notify = React.forwardRef 0 && showProgress; @@ -53,12 +54,14 @@ const Notify = React.forwardRef { if (!mergedHovering && duration > 0) { + const start = performance.now() - spentTime; const timeout = setTimeout(() => { onInternalClose(); }, duration * 1000); return () => { clearTimeout(timeout); + setSpentTime(performance.now() - start); }; } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -72,7 +75,7 @@ const Notify = React.forwardRef { cancelAnimationFrame(animationFrame); animationFrame = requestAnimationFrame((timestamp) => { - const runtime = timestamp - start; + const runtime = timestamp + spentTime - start; const progress = Math.min(runtime / (duration * 1000), 1); setPercent(progress * 100); if (progress < 1) { @@ -87,6 +90,7 @@ const Notify = React.forwardRef Date: Sat, 11 May 2024 11:30:30 +0800 Subject: [PATCH 11/12] fix: add test case for spentTime --- src/Notice.tsx | 15 +++++---- tests/index.test.tsx | 77 +++++++++++++++++++++++++++++++++----------- 2 files changed, 68 insertions(+), 24 deletions(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index 8fb18e7..ef9e9e4 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -54,14 +54,17 @@ const Notify = React.forwardRef { if (!mergedHovering && duration > 0) { - const start = performance.now() - spentTime; - const timeout = setTimeout(() => { - onInternalClose(); - }, duration * 1000); + const start = Date.now() - spentTime; + const timeout = setTimeout( + () => { + onInternalClose(); + }, + duration * 1000 - spentTime, + ); return () => { clearTimeout(timeout); - setSpentTime(performance.now() - start); + setSpentTime(Date.now() - start); }; } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -69,7 +72,7 @@ const Notify = React.forwardRef { if (!mergedHovering && mergedShowProgress) { - const start = performance.now(); + const start = Date.now(); let animationFrame: number; const calculate = () => { diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 51db0f9..5dbbeb5 100644 --- a/tests/index.test.tsx +++ b/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:

1

, + }); + }); + + 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({ @@ -714,30 +753,32 @@ describe('Notification.Basic', () => { ).toEqual('close'); }); - it('show with progress', () => { - const { instance } = renderDemo({ - duration: 1, - showProgress: true, - }); + describe('showProgress', () => { + it('show with progress', () => { + const { instance } = renderDemo({ + duration: 1, + showProgress: true, + }); - act(() => { - instance.open({ - content:

1

, + act(() => { + instance.open({ + content:

1

, + }); }); - }); - expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy(); + expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy(); - act(() => { - vi.advanceTimersByTime(500); - }); + act(() => { + vi.advanceTimersByTime(500); + }); - expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy(); + expect(document.querySelector('.rc-notification-notice-progress')).toBeTruthy(); - act(() => { - vi.advanceTimersByTime(500); - }); + act(() => { + vi.advanceTimersByTime(500); + }); - expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy(); + expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy(); + }); }); }); From 996ef9e6c1d29bc646acaa342ef8bf92ca254c86 Mon Sep 17 00:00:00 2001 From: Eden Wang Date: Sat, 11 May 2024 11:35:58 +0800 Subject: [PATCH 12/12] fix: fixing the start time for animation --- src/Notice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index ef9e9e4..69bb940 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -72,7 +72,7 @@ const Notify = React.forwardRef { if (!mergedHovering && mergedShowProgress) { - const start = Date.now(); + const start = performance.now(); let animationFrame: number; const calculate = () => {