feat: Notification support maxCount (#31807)

Co-authored-by: branhuang <branhuang@tencent.com>

components/notification/__tests__/config.test.js

@@ -0,0 +1,44 @@
+import notification, { getInstance } from '..';
+import { sleep } from '../../../tests/utils';
+
+describe('notification.config', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    notification.destroy();
+  });
+
+  it('should be able to config maxCount', async () => {
+    notification.config({
+      maxCount: 5,
+      duration: 0.5,
+    });
+
+    for (let i = 0; i < 10; i += 1) {
+      notification.open({
+        message: 'Notification message',
+        key: i,
+      });
+    }
+
+    notification.open({
+      message: 'Notification last',
+      key: '11',
+    });
+
+    await Promise.resolve();
+
+    expect(document.querySelectorAll('.ant-notification-notice').length).toBe(5);
+    expect(document.querySelectorAll('.ant-notification-notice')[4].textContent).toBe(
+      'Notification last',
+    );
+
+    jest.runAllTimers();
+    await sleep(500);
+    expect((await getInstance('ant-notification-topRight')).component.state.notices).toHaveLength(
+      0,
+    );
+  });
+});

components/notification/index.en-US.md

@@ -65,7 +65,7 @@ notification.config({
 ```
 
 | Property | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |
 | closeIcon | Custom close icon | ReactNode | - |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
@@ -73,6 +73,7 @@ notification.config({
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | rtl | Whether to enable RTL mode | boolean | false |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
+| maxCount | Max Notification show, drop oldest if exceed limit | number | - |  |
 
 ## FAQ
 
@@ -100,4 +101,4 @@ return (
 
 ### How to set static methods prefixCls ？
 
-You can config with [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+)
+You can config with [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>)

components/notification/index.tsx

@@ -25,6 +25,7 @@ let defaultPlacement: NotificationPlacement = 'topRight';
 let defaultGetContainer: () => HTMLElement;
 let defaultCloseIcon: React.ReactNode;
 let rtl = false;
+let maxCount: number;
 
 export interface ConfigProps {
   top?: number;
@@ -35,6 +36,7 @@ export interface ConfigProps {
   getContainer?: () => HTMLElement;
   closeIcon?: React.ReactNode;
   rtl?: boolean;
+  maxCount?: number;
 }
 
 function setNotificationConfig(options: ConfigProps) {
@@ -65,6 +67,9 @@ function setNotificationConfig(options: ConfigProps) {
   if (options.rtl !== undefined) {
     rtl = options.rtl;
   }
+  if (options.maxCount !== undefined) {
+    maxCount = options.maxCount;
+  }
 }
 
 function getPlacementStyle(
@@ -154,6 +159,7 @@ function getNotificationInstance(
         style: getPlacementStyle(placement, top, bottom),
         getContainer,
         closeIcon: closeIconToRender,
+        maxCount,
       },
       notification => {
         resolve(notification);

components/notification/index.zh-CN.md

@@ -66,7 +66,7 @@ notification.config({
 ```
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |
 | closeIcon | 自定义关闭图标 | ReactNode | - |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |
@@ -74,6 +74,7 @@ notification.config({
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | rtl | 是否开启 RTL 模式 | boolean | false |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
+| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |  |
 
 ## FAQ
 
@@ -101,4 +102,4 @@ return (
 
 ### 静态方法如何设置 prefixCls ？
 
-你可以通过 [`ConfigProvider.config`](/components/config-provider/#ConfigProvider.config()-4.13.0+) 进行设置。
+你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。