feat: message destroy the specified key (#26052)

close #25236
close #26054

components/message/__tests__/index.test.js

@@ -25,6 +25,20 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 
+  it('should be able to remove manually with a unique key', () => {
+    const key1 = 'key1';
+    const key2 = 'key2';
+    message.info({ content: 'Message1', key: 'key1', duration: 0 });
+    message.info({ content: 'Message2', key: 'key2', duration: 0 });
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    message.destroy(key1);
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    message.destroy(key2);
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+  });
+
   it('should be able to destroy globally', () => {
     message.info('whatever', 0);
     message.info('whatever', 0);

components/message/index.en-US.md

@@ -66,6 +66,8 @@ Methods for global configuration and destruction are also provided:
 - `message.config(options)`
 - `message.destroy()`
 
+> use `message.destroy(key)` to remove a message。
+
 #### message.config
 
 > When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)

components/message/index.tsx

@@ -193,10 +193,16 @@ function isArgsProps(content: JointContent): content is ArgsProps {
 const api: any = {
   open: notice,
   config: setMessageConfig,
-  destroy() {
+  destroy(messageKey?: number | string) {
     if (messageInstance) {
-      messageInstance.destroy();
-      messageInstance = null;
+      if (messageKey) {
+        const { removeNotice } = messageInstance;
+        removeNotice(messageKey);
+      } else {
+        const { destroy } = messageInstance;
+        destroy();
+        messageInstance = null;
+      }
     }
   },
 };

components/message/index.zh-CN.md

@@ -67,6 +67,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
 - `message.config(options)`
 - `message.destroy()`
 
+> 也可通过 `message.destroy(key)` 来关闭一条消息。
+
 #### message.config
 
 > 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)