feat: update message

components/message/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { asyncExpect } from '@/tests/utils'
 import message from '..'
+import Icon from '../../icon'
 
 describe('message', () => {
   beforeEach(() => {
@@ -126,7 +127,19 @@ describe('message', () => {
       expect(document.querySelectorAll('.ant-message-notice').length).toBe(0)
     }, 0)
   })
+  it('should allow custom icon', async () => {
+    message.open({ content: 'Message', icon: (h) => <Icon type='smile-o' /> })
+    await asyncExpect(() => {
+      expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1)
+    }, 0)
+  })
 
+  it('should have no icon', async () => {
+    message.open({ content: 'Message' })
+    await asyncExpect(() => {
+      expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0)
+    }, 0)
+  })
   // https://github.com/ant-design/ant-design/issues/8201
   it('should destroy messages correctly', async () => {
     // eslint-disable-next-line

components/message/index.en-US.md

@@ -11,15 +11,10 @@ This components provides some static methods, with usage and arguments as follow
 
 | Argument | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| content | content of the message | string\|vueNode \|function(h) | - |
+| content | content of the message | string\| VNode \|(h) => VNode | - |
 | 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 | - |
 
-Methods for global configuration and destruction are also provided:
-
-- `message.config(options)`
-- `message.destroy()`
-
 `afterClose` can be called in then-able interface:
 
 - `message[level](content, [duration]).then(afterClose)`
@@ -28,7 +23,25 @@ Methods for global configuration and destruction are also provided:
 where `level` refers one static methods of `message`. The result of `then` method will be a Promise.
 
 
-### message.config
+- `message.open(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 | - |
+
+### Global static methods
+
+Methods for global configuration and destruction are also provided:
+
+- `message.config(options)`
+- `message.destroy()`
+
+#### message.config
 
 ```js
 message.config({

components/message/index.js

@@ -33,30 +33,21 @@ function getMessageInstance (callback) {
 
 // type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
 
-function notice (
+function notice (args) {
-  content,
+  const duration = args.duration !== undefined ? args.duration : defaultDuration
-  duration,
-  type,
-  onClose,
-) {
   const iconType = ({
     info: 'info-circle',
     success: 'check-circle',
-    error: 'cross-circle',
+    error: 'close-circle',
     warning: 'exclamation-circle',
     loading: 'loading',
-  })[type]
+  })[args.type]
-
-  if (typeof duration === 'function') {
-    onClose = duration
-    duration = defaultDuration
-  }
 
   const target = key++
   const closePromise = new Promise((resolve) => {
     const callback = () => {
-      if (typeof onClose === 'function') {
+      if (typeof args.onClose === 'function') {
-        onClose()
+        args.onClose()
       }
       return resolve(true)
     }
@@ -66,9 +57,11 @@ function notice (
         duration,
         style: {},
         content: (h) => (
-          <div class={`${prefixCls}-custom-content ${prefixCls}-${type}`}>
+          <div class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}>
-            <Icon type={iconType} />
+            {args.icon
-            <span>{typeof content === 'function' ? content(h) : content}</span>
+              ? (typeof args.icon === 'function' ? args.icon(h) : args.icon)
+              : (iconType ? <Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} /> : '')}
+            <span>{typeof content === 'function' ? args.content(h) : args.content}</span>
           </div>
         ),
         onClose: callback,
@@ -97,26 +90,8 @@ function notice (
 //   transitionName?: string;
 // }
 
-export default {
+const api = {
-  info (content, duration, onClose) {
+  open: notice,
-    return notice(content, duration, 'info', onClose)
-  },
-  success (content, duration, onClose) {
-    return notice(content, duration, 'success', onClose)
-  },
-  error (content, duration, onClose) {
-    return notice(content, duration, 'error', onClose)
-  },
-  // Departed usage, please use warning()
-  warn (content, duration, onClose) {
-    return notice(content, duration, 'warning', onClose)
-  },
-  warning (content, duration, onClose) {
-    return notice(content, duration, 'warning', onClose)
-  },
-  loading (content, duration, onClose) {
-    return notice(content, duration, 'loading', onClose)
-  },
   config (options) {
     if (options.top !== undefined) {
       defaultTop = options.top
@@ -146,4 +121,18 @@ export default {
       messageInstance = null
     }
   },
+};
+
+['success', 'info', 'warning', 'error', 'loading'].forEach((type) => {
+  api[type] = (content, duration, onClose) => {
+    if (typeof duration === 'function') {
+      onClose = duration
+      duration = undefined
     }
+    return api.open({ content, duration: duration, type, onClose })
+  }
+})
+
+api.warn = api.warning
+
+export default api

components/message/index.zh-CN.md

@@ -11,15 +11,10 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 提示内容 | string\|vueNode \|function(h) | - |
+| content | 提示内容 | string\| VNode \|(h) => VNode | - |
 | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
 | onClose | 关闭时触发的回调函数 | Function | - |
 
-还提供了全局配置和全局销毁方法：
-
-- `message.config(options)`
-- `message.destroy()`
-
 组件同时提供 promise 接口
 
 - `message[level](content, [duration]).then(afterClose)`
@@ -28,7 +23,23 @@
 其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise 。
 
 
-### message.config
+- `message.open(config)`
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -------- | ----------- | ---- | ------- |
+| content | 提示内容 | string\| VNode \|(h) => VNode | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
+| onClose | 关闭时触发的回调函数 | Function | - |
+| icon | 自定义图标 | string\| VNode \|(h) => VNode | - |
+
+### 全局方法
+
+还提供了全局配置和全局销毁方法：
+
+- `message.config(options)`
+- `message.destroy()`
+
+#### message.config
 
 ```js
 message.config({