fix: should work properly when the key is zero (#253)

Co-authored-by: tangwenhui <[email protected]>

Author: kiner-tang

docs/examples/simple.tsx

@@ -120,6 +120,29 @@ function customCloseIconFn() {
   });
 }
 
+
+function callWithKey0() {
+  const key = 0;
+  notification.notice({
+    duration: 3,
+    content: <span>first call with key 0</span>,
+    onClose() {
+      console.log('simple close');
+    },
+    key
+  });
+  setTimeout(() => {
+    notification.notice({
+      duration: 3,
+      content: <span>second call with key 0</span>,
+      onClose() {
+        console.log('simple close');
+      },
+      key
+    });
+  }, 2000);
+}
+
 const Demo = () => (
   <div>
     <button type="button" onClick={simpleFn}>
@@ -140,6 +163,9 @@ const Demo = () => (
     <button type="button" onClick={customCloseIconFn}>
       custom close icon
     </button>
+    <button type="button" onClick={callWithKey0}>
+      call with key 0
+    </button>
   </div>
 );
 

src/Notification.tsx

@@ -96,7 +96,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
   }
 
   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<NotificationProps, NotificationState> {
   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;
       }),
     }));

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(<div>{node}</div>));
+        },
+      },
+      (notification) => {
+        notificationInstance = notification;
+
+        notificationInstance.notice({
+          content: <span className="content first">bamboo</span>,
+          duration: 0.3,
+          key,
+        });
+
+        setTimeout(() => {
+          notificationInstance.notice({
+            content: <span className="content second">bamboo</span>,
+            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);
+      },
+    );
+  });
 });