diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap index 267177fbbc1c..5f89af9ab909 100644 --- 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`] = ` `; + +exports[`renders ./components/message/demo/update.md correctly 1`] = ` + +`; diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index 938f6d4b43ea..d1692463b6ce 100644 --- 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
test
; + } + } + + mount(); + 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 new file mode 100644 index 000000000000..318c9c978a18 --- /dev/null +++ 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( + , + mountNode, +); +``` diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index 590e071bb793..c28a8b162240 100644 --- 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 index 97a3c1dc04d7..ce00359eccb7 100755 --- 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,11 +160,16 @@ 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 }); }; }); @@ -166,12 +177,12 @@ const api: any = { 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 index f7117487f005..83bd0986d103 100644 --- 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 | ### 全局方法