fix: notification are overlapping (#5994)

* fix notification are overlapping

* update test case

* update test case

components/notification/__tests__/index.test.js

@@ -42,4 +42,19 @@ describe('notification', () => {
     expect(document.querySelectorAll('.ant-notification').length).toBe(0);
     expect(document.querySelectorAll('.ant-notification-notice').length).toBe(0);
   });
+
+  it('should be able to open with icon', () => {
+    const openNotificationWithIcon = (type) => {
+      const iconPrefix = '.ant-notification-notice-icon';
+      notification[type]({
+        message: 'Notification Title',
+        duration: 0,
+        description: 'This is the content of the notification.',
+      });
+      expect(document.querySelectorAll(`${iconPrefix}-${type}`).length).toBe(1);
+    };
+    ['success', 'info', 'warning', 'error'].forEach((type) => {
+      openNotificationWithIcon(type);
+    });
+  });
 });

components/notification/__tests__/placement.test.js

@@ -42,6 +42,11 @@ describe('Notification.placement', () => {
     expect(style.left).toBe('0px');
     expect(style.bottom).toBe('');
 
+    open({
+      placement: 'topLeft',
+    });
+    expect($$('.ant-notification-topLeft').length).toBe(1);
+
 
     // topRight
     open({
@@ -52,6 +57,12 @@ describe('Notification.placement', () => {
     expect(style.right).toBe('0px');
     expect(style.bottom).toBe('');
 
+    open({
+      placement: 'topRight',
+    });
+    expect($$('.ant-notification-topRight').length).toBe(1);
+
+
     // bottomRight
     open({
       placement: 'bottomRight',
@@ -61,6 +72,12 @@ describe('Notification.placement', () => {
     expect(style.right).toBe('0px');
     expect(style.bottom).toBe(defaultBottom);
 
+    open({
+      placement: 'bottomRight',
+    });
+    expect($$('.ant-notification-bottomRight').length).toBe(1);
+
+
     // bottomLeft
     open({
       placement: 'bottomLeft',
@@ -69,6 +86,11 @@ describe('Notification.placement', () => {
     expect(style.top).toBe('');
     expect(style.left).toBe('0px');
     expect(style.bottom).toBe(defaultBottom);
+
+    open({
+      placement: 'bottomLeft',
+    });
+    expect($$('.ant-notification-bottomLeft').length).toBe(1);
   });
 
   it('change notification placement by `config` method', () => {
@@ -80,7 +102,7 @@ describe('Notification.placement', () => {
       top: 50,
       bottom: 50,
     });
-    style = getStyle($$('.ant-notification-topLeft')[1]);
+    style = getStyle($$('.ant-notification-topLeft')[0]);
     expect(style.top).toBe('50px');
     expect(style.left).toBe('0px');
     expect(style.bottom).toBe('');
@@ -91,7 +113,7 @@ describe('Notification.placement', () => {
       top: 100,
       bottom: 50,
     });
-    style = getStyle($$('.ant-notification-topRight')[1]);
+    style = getStyle($$('.ant-notification-topRight')[0]);
     expect(style.top).toBe('100px');
     expect(style.right).toBe('0px');
     expect(style.bottom).toBe('');
@@ -102,7 +124,7 @@ describe('Notification.placement', () => {
       top: 50,
       bottom: 100,
     });
-    style = getStyle($$('.ant-notification-bottomRight')[1]);
+    style = getStyle($$('.ant-notification-bottomRight')[0]);
     expect(style.top).toBe('');
     expect(style.right).toBe('0px');
     expect(style.bottom).toBe('100px');
@@ -113,7 +135,7 @@ describe('Notification.placement', () => {
       top: 100,
       bottom: 50,
     });
-    style = getStyle($$('.ant-notification-bottomLeft')[1]);
+    style = getStyle($$('.ant-notification-bottomLeft')[0]);
     expect(style.top).toBe('');
     expect(style.left).toBe('0px');
     expect(style.bottom).toBe('50px');

components/notification/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Notification from 'rc-notification';
 import Icon from '../icon';
 import assign from 'object-assign';
-let notificationInstance;
+const notificationInstance = {};
 let defaultDuration = 4.5;
 let defaultTop = 24;
 let defaultBottom = 24;
@@ -66,15 +66,15 @@ export interface ConfigProps {
 }
 
 function getNotificationInstance(prefixCls) {
-  if (notificationInstance) {
-    return notificationInstance;
+  if (notificationInstance[defaultPlacement]) {
+    return notificationInstance[defaultPlacement];
   }
-  notificationInstance = (Notification as any).newInstance({
+  notificationInstance[defaultPlacement] = (Notification as any).newInstance({
     prefixCls: prefixCls,
     className: `${prefixCls}-${defaultPlacement}`,
     style: getPlacementStyle(defaultPlacement),
   });
-  return notificationInstance;
+  return notificationInstance[defaultPlacement];
 }
 
 function notice(args) {
@@ -83,7 +83,6 @@ function notice(args) {
 
   if (args.placement !== undefined) {
     defaultPlacement = args.placement;
-    notificationInstance = null; // delete notificationInstance for new defaultPlacement
   }
 
   let duration;
@@ -164,8 +163,8 @@ const api: {
     notice(args);
   },
   close(key) {
-    if (notificationInstance) {
-      notificationInstance.removeNotice(key);
+    if (notificationInstance[defaultPlacement]) {
+      notificationInstance[defaultPlacement].removeNotice(key);
     }
   },
   config(options: ConfigProps) {
@@ -181,17 +180,21 @@ const api: {
     }
     // delete notificationInstance
     if (placement !== undefined || bottom !== undefined || top !== undefined) {
-      notificationInstance = null;
+      const notify = notificationInstance[defaultPlacement];
+      if (notify) {
+        notify.destroy();
+      }
+      notificationInstance[defaultPlacement] = null;
     }
     if (duration !== undefined) {
       defaultDuration = duration;
     }
   },
   destroy() {
-    if (notificationInstance) {
-      notificationInstance.destroy();
-      notificationInstance = null;
-    }
+    Object.keys(notificationInstance).forEach(key => {
+      notificationInstance[key].destroy();
+      delete notificationInstance[key];
+    });
   },
 };