diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index 9d2d18c..508a682 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -120,6 +120,29 @@ function customCloseIconFn() { }); } + +function callWithKey0() { + const key = 0; + notification.notice({ + duration: 3, + content: first call with key 0, + onClose() { + console.log('simple close'); + }, + key + }); + setTimeout(() => { + notification.notice({ + duration: 3, + content: second call with key 0, + onClose() { + console.log('simple close'); + }, + key + }); + }, 2000); +} + const Demo = () => (
+
); diff --git a/src/Notification.tsx b/src/Notification.tsx index fcb059f..6589bd4 100644 --- a/src/Notification.tsx +++ b/src/Notification.tsx @@ -96,7 +96,7 @@ class Notification extends Component { } add = (originNotice: NoticeContent, holderCallback?: HolderReadyCallback) => { - const key = originNotice.key || getUuid(); + const key = originNotice.key ?? getUuid(); const notice: NoticeContent & { key: React.Key; userPassKey?: React.Key } = { ...originNotice, key, @@ -139,7 +139,7 @@ class Notification extends Component { remove = (removeKey: React.Key) => { this.setState(({ notices }: NotificationState) => ({ notices: notices.filter(({ notice: { key, userPassKey } }) => { - const mergedKey = userPassKey || key; + const mergedKey = userPassKey ?? key; return mergedKey !== removeKey; }), })); diff --git a/tests/index.test.js b/tests/index.test.js index 73df75e..216d817 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -573,4 +573,42 @@ describe('Notification.Basic', () => { }, 10); }); }); + + it('should work properly when the key is zero', (done) => { + let container; + + let notificationInstance; + const key = 0; + Notification.newInstance( + { + TEST_RENDER: (node) => { + ({ container } = render(
{node}
)); + }, + }, + (notification) => { + notificationInstance = notification; + + notificationInstance.notice({ + content: bamboo, + duration: 0.3, + key, + }); + + setTimeout(() => { + notificationInstance.notice({ + content: bamboo, + duration: 0.3, + key, + }); + setTimeout(() => { + expect(container.querySelectorAll('.content')).toHaveLength(1); + expect(container.querySelectorAll('.first')).toHaveLength(0); + expect(container.querySelectorAll('.second')).toHaveLength(1); + notification.destroy(); + done(); + }, 10); + }, 200); + }, + ); + }); });