From 01fab00cac1a4058d0ea3329310c1ec8553eab08 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 9 Dec 2018 18:37:41 +0800 Subject: [PATCH] feat: update message --- components/message/__tests__/index.test.js | 13 +++++ components/message/index.en-US.md | 27 ++++++--- components/message/index.js | 67 +++++++++------------- components/message/index.zh-CN.md | 25 +++++--- 4 files changed, 79 insertions(+), 53 deletions(-) diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index b04a435da..c2ec85445 100644 --- a/components/message/__tests__/index.test.js +++ b/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) => }) + 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 diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index 2438f9689..a5d4cdfd5 100644 --- a/components/message/index.en-US.md +++ b/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({ diff --git a/components/message/index.js b/components/message/index.js index 99169b53a..d2aa337c8 100644 --- a/components/message/index.js +++ b/components/message/index.js @@ -33,30 +33,21 @@ function getMessageInstance (callback) { // type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'; -function notice ( - content, - duration, - type, - onClose, -) { +function notice (args) { + const duration = args.duration !== undefined ? args.duration : defaultDuration const iconType = ({ info: 'info-circle', success: 'check-circle', - error: 'cross-circle', + error: 'close-circle', warning: 'exclamation-circle', loading: 'loading', - })[type] - - if (typeof duration === 'function') { - onClose = duration - duration = defaultDuration - } + })[args.type] const target = key++ const closePromise = new Promise((resolve) => { const callback = () => { - if (typeof onClose === 'function') { - onClose() + if (typeof args.onClose === 'function') { + args.onClose() } return resolve(true) } @@ -66,9 +57,11 @@ function notice ( duration, style: {}, content: (h) => ( -
- - {typeof content === 'function' ? content(h) : content} +
+ {args.icon + ? (typeof args.icon === 'function' ? args.icon(h) : args.icon) + : (iconType ? : '')} + {typeof content === 'function' ? args.content(h) : args.content}
), onClose: callback, @@ -97,26 +90,8 @@ function notice ( // transitionName?: string; // } -export default { - info (content, duration, onClose) { - 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) - }, +const api = { + open: notice, 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 diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index aa85bc9a3..322bfc8b7 100644 --- a/components/message/index.zh-CN.md +++ b/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({