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);
+ },
+ );
+ });
});