✨ support updating message content with a unique key

close #18621 fix: fix demo docs: change key api version number docs: fix docs
ant-design · Sep 25, 2019 · 53b3c5a · 53b3c5a
1 parent a40b54a
commit 53b3c5a
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 21 deletions.
diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap
@@ -72,3 +72,14 @@ exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
   </span>
 </button>
 `;
+
+exports[`renders ./components/message/demo/update.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open the message box
+  </span>
+</button>
+`;
diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js
@@ -146,4 +146,27 @@ describe('message', () => {
     jest.runAllTimers();
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
+
+  it('should support update message content with a unique key', () => {
+    const key = 'updatable';
+    class Test extends React.Component {
+      componentDidMount() {
+        message.loading({ content: 'Loading...', key });
+        // Testing that content of the message should be updated.
+        setTimeout(() => message.success({ content: 'Loaded', key }), 1000);
+        setTimeout(() => message.destroy(), 3000);
+      }
+
+      render() {
+        return <div>test</div>;
+      }
+    }
+
+    mount(<Test />);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    jest.advanceTimersByTime(1500);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+  });
 });
diff --git a/components/message/demo/update.md b/components/message/demo/update.md
@@ -0,0 +1,34 @@
+---
+order: 5
+title:
+  zh-CN: 更新消息内容
+  en-US: Update Message Content
+---
+
+## zh-CN
+
+可以通过唯一的 `key` 来更新内容。
+
+## en-US
+
+Update message content with unique `key`.
+
+```jsx
+import { Button, message } from 'antd';
+
+const key = 'updatable';
+
+const openMessage = () => {
+  message.loading({ content: 'Loading...', key });
+  setTimeout(() => {
+    message.success({ content: 'Loaded!', key, duration: 2 });
+  });
+};
+
+ReactDOM.render(
+  <Button type="primary" onClick={openMessage}>
+    Open the message box
+  </Button>,
+  mountNode,
+);
+```
diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md
@@ -25,7 +25,7 @@ This components provides some static methods, with usage and arguments as follow
 
 | Argument | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| content | content of the message | string\|ReactNode | - |  |
+| content | content of the message | string\|ReactNode\|config | - |  |
 | duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |  |
 | onClose | Specify a function that will be called when the message is closed | Function | - |  |
 
@@ -36,7 +36,15 @@ This components provides some static methods, with usage and arguments as follow
 
 where `level` refers one static methods of `message`. The result of `then` method will be a Promise.
 
+Supports passing parameters wrapped in an object:
+
 - `message.open(config)`
+- `message.success(config)`
+- `message.error(config)`
+- `message.info(config)`
+- `message.warning(config)`
+- `message.warn(config)` // alias of warning
+- `message.loading(config)`
 
 The properties of config are as follows:
 
@@ -46,6 +54,7 @@ The properties of config are as follows:
 | duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |  |
 | onClose | Specify a function that will be called when the message is closed | function | - |  |
 | icon | Customized Icon | ReactNode | - | 3.9.0 |
+| key | The unique identifier of the Message | string\|number | - | 3.24.0 |
 
 ### Global static methods
 

diff --git a/components/message/index.tsx b/components/message/index.tsx
@@ -53,6 +53,7 @@ export interface ArgsProps {
   type: NoticeType;
   onClose?: () => void;
   icon?: React.ReactNode;
+  key?: string | number;
 }
 
 function notice(args: ArgsProps): MessageType {
@@ -79,7 +80,7 @@ function notice(args: ArgsProps): MessageType {
       );
       const switchIconNode = iconType ? iconNode : '';
       instance.notice({
-        key: target,
+        key: args.key || target,
         duration,
         style: {},
         content: (
@@ -109,8 +110,13 @@ function notice(args: ArgsProps): MessageType {
 
 type ConfigContent = React.ReactNode | string;
 type ConfigDuration = number | (() => void);
+type JointContent = ConfigContent | ArgsProps;
 export type ConfigOnClose = () => void;
 
+function isArgsProps(content: JointContent): content is ArgsProps {
+  return typeof content === 'object' && !!(content as ArgsProps).content;
+}
+
 export interface ConfigOptions {
   top?: number;
   duration?: number;
@@ -154,24 +160,29 @@ const api: any = {
 };
 
 ['success', 'info', 'warning', 'error', 'loading'].forEach(type => {
-  api[type] = (content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => {
+  api[type] = (content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose) => {
+    if (isArgsProps(content)) {
+      return api.open({ ...content, type });
+    }
+
     if (typeof duration === 'function') {
       onClose = duration;
       duration = undefined;
     }
+
     return api.open({ content, duration, type, onClose });
   };
 });
 
 api.warn = api.warning;
 
 export interface MessageApi {
-  info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  error(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  warn(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  warning(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  loading(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  warn(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  loading(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   open(args: ArgsProps): MessageType;
   config(options: ConfigOptions): void;
   destroy(): void;

diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
@@ -24,11 +24,11 @@ title: Message
 - `message.warn(content, [duration], onClose)` // alias of warning
 - `message.loading(content, [duration], onClose)`
 
-| 参数     | 说明                                          | 类型              | 默认值 | 版本 |
-| -------- | --------------------------------------------- | ----------------- | ------ | ---- |
-| content  | 提示内容                                      | string\|ReactNode | -      |      |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number            | 3      |      |
-| onClose  | 关闭时触发的回调函数                          | Function          | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| content | 提示内容 | string\|ReactNode\|config | - |  |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |  |
+| onClose | 关闭时触发的回调函数 | Function | - |  |
 
 组件同时提供 promise 接口。
 
@@ -37,14 +37,25 @@ title: Message
 
 其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
 
-- `message.open(config)`
+也可以对象的形式传递参数：
 
-| 参数     | 说明                                          | 类型      | 默认值 | 版本  |
-| -------- | --------------------------------------------- | --------- | ------ | ----- |
-| content  | 提示内容                                      | ReactNode | -      |       |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number    | 3      |       |
-| onClose  | 关闭时触发的回调函数                          | Function  | -      |       |
-| icon     | 自定义图标                                    | ReactNode | -      | 3.9.0 |
+- `message.open(config)`
+- `message.success(config)`
+- `message.error(config)`
+- `message.info(config)`
+- `message.warning(config)`
+- `message.warn(config)` // alias of warning
+- `message.loading(config)`
+
+`config` 对象属性如下：
+
+| 参数     | 说明                                          | 类型           | 默认值 | 版本   |
+| -------- | --------------------------------------------- | -------------- | ------ | ------ |
+| content  | 提示内容                                      | ReactNode      | -      |        |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number         | 3      |        |
+| onClose  | 关闭时触发的回调函数                          | Function       | -      |        |
+| icon     | 自定义图标                                    | ReactNode      | -      | 3.9.0  |
+| key      | 当前提示的唯一标志                            | string\|number | -      | 3.24.0 |
 
 ### 全局方法