feat: meaage add key for update content

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'menu', // dev components
+    componentName: 'message', // dev components
   },
 };

components/message/__tests__/__snapshots__/demo.test.js.snap

@@ -9,3 +9,5 @@ exports[`renders ./components/message/demo/loading.md correctly 1`] = `<button t
 exports[`renders ./components/message/demo/other.md correctly 1`] = `<div><button type="button" class="ant-btn"><span>Success</span></button> <button type="button" class="ant-btn"><span>Error</span></button> <button type="button" class="ant-btn"><span>Warning</span></button></div>`;
 
 exports[`renders ./components/message/demo/thenable.md correctly 1`] = `<button type="button" class="ant-btn"><span>Display a sequence of message</span></button>`;
+
+exports[`renders ./components/message/demo/update.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the message box</span></button>`;

components/message/__tests__/index.test.js

@@ -97,13 +97,14 @@ describe('message', () => {
     });
   });
 
-  it('should be called like promise', () => {
+  it('should be called like promise', done => {
     const defaultDuration = 3;
     const now = Date.now();
     message.info('whatever').then(() => {
       // calculate the approximately duration value
       const aboutDuration = parseInt((Date.now() - now) / 1000, 10);
       expect(aboutDuration).toBe(defaultDuration);
+      done();
     });
   });
 

components/message/demo/index.vue

@@ -4,6 +4,7 @@ import Info from './info';
 import Loading from './loading';
 import Other from './other';
 import Thenable from './thenable';
+import Update from './update';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 const md = {
@@ -36,6 +37,7 @@ export default {
         <Loading />
         <Other />
         <Thenable />
+        <Update />
         <api>
           <CN slot="cn" />
           <US />

components/message/demo/info.md

@@ -5,7 +5,7 @@
 
 <us>
 #### Normal prompt
-Normal messages as feedbacks.
+Normal message for information.
 </us>
 
 ```tpl

components/message/demo/loading.md

@@ -4,7 +4,7 @@
 </cn>
 
 <us>
-#### Message of loading
+#### Message with loading indicator
 Display a global loading indicator, which is dismissed by itself asynchronously.
 </us>
 

components/message/demo/other.md

@@ -20,13 +20,13 @@ Messages of success, error and warning types.
   export default {
     methods: {
       success() {
-        this.$message.success('This is a message of success');
+        this.$message.success('This is a success message');
       },
       error() {
-        this.$message.error('This is a message of error');
+        this.$message.error('This is an error message');
       },
       warning() {
-        this.$message.warning('This is message of warning');
+        this.$message.warning('This is a warning message');
       },
     },
   };

components/message/demo/update.md

@@ -0,0 +1,28 @@
+<cn>
+#### 更新消息内容
+可以通过唯一的 `key` 来更新内容。
+</cn>
+
+<us>
+#### Update Message Content
+Update message content with unique `key`.
+</us>
+
+```tpl
+<template>
+  <a-button type="primary" @click="openMessage">Open the message box</a-button>
+</template>
+<script>
+  const key = 'updatable';
+  export default {
+    methods: {
+      openMessage() {
+        this.$message.loading({ content: 'Loading...', key });
+        setTimeout(() => {
+          this.$message.success({ content: 'Loaded!', key, duration: 2 });
+        }, 1000);
+      },
+    },
+  };
+</script>
+```

components/message/index.en-US.md

@@ -23,15 +23,22 @@ 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.
 
 - `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:
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| content | content of the message | string\| VNode \|(h) => VNode | - |
-| 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 | string\| VNode \|(h) => VNode | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| content | content of the message | string\| VNode \|(h) => VNode | - |  |
+| 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 | string\| VNode \|(h) => VNode | - |  |
+| key | The unique identifier of the Message | string\|number | - | 1.5.0 |
 
 ### Global static methods
 

components/message/index.js

@@ -46,7 +46,7 @@ function notice(args) {
     loading: 'loading',
   }[args.type];
 
-  const target = key++;
+  const target = args.key || key++;
   const closePromise = new Promise(resolve => {
     const callback = () => {
       if (typeof args.onClose === 'function') {
@@ -59,24 +59,24 @@ function notice(args) {
         key: target,
         duration,
         style: {},
-        content: h => (
-          <div
-            class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
-          >
-            {args.icon ? (
-              typeof args.icon === 'function' ? (
-                args.icon(h)
-              ) : (
-                args.icon
-              )
-            ) : iconType ? (
-              <Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
-            ) : (
-              ''
-            )}
-            <span>{typeof args.content === 'function' ? args.content(h) : args.content}</span>
-          </div>
-        ),
+        content: h => {
+          const iconNode = (
+            <Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
+          );
+          const switchIconNode = iconType ? iconNode : '';
+          return (
+            <div
+              class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
+            >
+              {args.icon
+                ? typeof args.icon === 'function'
+                  ? args.icon(h)
+                  : args.icon
+                : switchIconNode}
+              <span>{typeof args.content === 'function' ? args.content(h) : args.content}</span>
+            </div>
+          );
+        },
         onClose: callback,
       });
     });
@@ -95,6 +95,10 @@ function notice(args) {
 // type ConfigDuration = number | (() => void);
 // export type ConfigOnClose = () => void;
 
+function isArgsProps(content) {
+  return Object.prototype.toString.call(content) === '[object Object]' && !!content.content;
+}
+
 // export interface ConfigOptions {
 //   top?: number;
 //   duration?: number;
@@ -138,11 +142,14 @@ const api = {
 
 ['success', 'info', 'warning', 'error', 'loading'].forEach(type => {
   api[type] = (content, duration, onClose) => {
+    if (isArgsProps(content)) {
+      return api.open({ ...content, type });
+    }
     if (typeof duration === 'function') {
       onClose = duration;
       duration = undefined;
     }
-    return api.open({ content, duration: duration, type, onClose });
+    return api.open({ content, duration, type, onClose });
   };
 });