add maxCount config to message (#10169)

components/message/__tests__/index.test.js

@@ -33,6 +33,20 @@ describe('message', () => {
     expect(document.querySelectorAll('.custom-container').length).toBe(1);
   });
 
+  it('should be able to config maxCount', () => {
+    message.config({
+      maxCount: 5,
+    });
+    for (let i = 0; i < 10; i += 1) {
+      message.info('test');
+    }
+    message.info('last');
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
+    expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+  });
+
   it('should be able to hide manually', () => {
     const hide1 = message.info('whatever', 0);
     const hide2 = message.info('whatever', 0);

components/message/index.en-US.md

@@ -40,6 +40,7 @@ Methods for global configuration and destruction are also provided:
 message.config({
   top: 100,
   duration: 2,
+  maxCount: 3,
 });
 ```
 
@@ -48,3 +49,4 @@ message.config({
 | duration | time before auto-dismiss, in seconds | number | 1.5 |
 | getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
 | top | distance from top | number | 24px |
+| maxCount | max message show, drop oldest if exceed limit | number | - |

components/message/index.tsx

@@ -9,6 +9,7 @@ let key = 1;
 let prefixCls = 'ant-message';
 let transitionName = 'move-up';
 let getContainer: () => HTMLElement;
+let maxCount: number;
 
 function getMessageInstance(callback: (i: any) => void) {
   if (messageInstance) {
@@ -20,6 +21,7 @@ function getMessageInstance(callback: (i: any) => void) {
     transitionName,
     style: { top: defaultTop }, // 覆盖原来的样式
     getContainer,
+    maxCount,
   }, (instance: any) => {
     if (messageInstance) {
       callback(messageInstance);
@@ -83,6 +85,7 @@ export interface ConfigOptions {
   prefixCls?: string;
   getContainer?: () => HTMLElement;
   transitionName?: string;
+  maxCount?: number;
 }
 
 export default {
@@ -123,6 +126,10 @@ export default {
       transitionName = options.transitionName;
       messageInstance = null; // delete messageInstance for new transitionName
     }
+    if (options.maxCount !== undefined) {
+      maxCount = options.maxCount;
+      messageInstance = null;
+    }
   },
   destroy() {
     if (messageInstance) {

components/message/index.zh-CN.md

@@ -41,6 +41,7 @@ title: Message
 message.config({
   top: 100,
   duration: 2,
+  maxCount: 3,
 });
 ```
 
@@ -49,3 +50,4 @@ message.config({
 | duration | 默认自动关闭延时，单位秒 | number | 3 |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
 | top | 消息距离顶部的位置 | number | 24px |
+| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |