diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index efa8fbb998..b91b26dc00 100644 --- a/components/message/__tests__/index.test.js +++ b/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); diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index cc3e3310be..a3b6d05c67 100644 --- a/components/message/index.en-US.md +++ b/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+) diff --git a/components/message/index.tsx b/components/message/index.tsx index fb5c6a46ec..5367ab5df1 100755 --- a/components/message/index.tsx +++ b/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; + } } }, }; diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index 8710efe45f..f6f7c7939a 100644 --- a/components/message/index.zh-CN.md +++ b/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+)