refactor: message

components/message/demo/custom-style.vue

@@ -0,0 +1,46 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 自定义样式
+  en-US: Customized style
+---
+
+## zh-CN
+
+使用 `style` 和 `class` 来定义样式。
+
+## en-US
+
+The `style` and `class` are available to customize Message.
+
+</docs>
+
+<template>
+  <a-button @click="success">Customized style</a-button>
+</template>
+<script lang="ts">
+import { message } from 'ant-design-vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  setup() {
+    const success = () => {
+      message.success({
+        content: () => 'This is a prompt message with custom className and style',
+        class: 'custom-class',
+        style: {
+          marginTop: '20vh',
+        },
+      });
+    };
+    return {
+      success,
+    };
+  },
+});
+</script>
+<style>
+.custom-class {
+  color: red;
+}
+</style>

components/message/demo/index.vue

@@ -6,6 +6,7 @@
     <loading />
     <thenable />
     <update />
+    <customStyleVue />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -15,6 +16,7 @@ import Duration from './duration.vue';
 import Loading from './loading.vue';
 import Thenable from './thenable.vue';
 import Update from './update.vue';
+import customStyleVue from './custom-style.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -28,6 +30,7 @@ export default defineComponent({
     Loading,
     Thenable,
     Update,
+    customStyleVue,
   },
   setup() {
     return {};

components/message/demo/update.vue

@@ -8,20 +8,25 @@ title:
 
 ## zh-CN
 
-可以通过唯一的 `key` 来更新内容。
+可以通过唯一的 `key` 来更新内容、或者响应式数据。
 
 ## en-US
 
-Update message content with unique `key`.
+Update message content with unique `key`，or use reactive data.
 
 </docs>
 
 <template>
-  <a-button type="primary" @click="openMessage">Open the message box</a-button>
+  <a-button type="primary" @click="openMessage">Open the message box (update by key)</a-button>
+  <br />
+  <br />
+  <a-button type="primary" @click="openMessage2">
+    Open the message box (update by reactive)
+  </a-button>
 </template>
 <script lang="ts">
 import { message } from 'ant-design-vue';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 const key = 'updatable';
 export default defineComponent({
   setup() {
@@ -31,8 +36,17 @@ export default defineComponent({
         message.success({ content: 'Loaded!', key, duration: 2 });
       }, 1000);
     };
+    const content = ref('Loading...');
+    const openMessage2 = () => {
+      // content must use function
+      message.loading({ content: () => content.value });
+      setTimeout(() => {
+        content.value = 'Loaded!';
+      }, 1000);
+    };
     return {
       openMessage,
+      openMessage2,
     };
   },
 });

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 |
 | --- | --- | --- | --- |
-| content | content of the message | string\| VNode | - |
+| content | content of the message | string\| VNode \| () => 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 | - |
 
@@ -48,11 +48,15 @@ The properties of config are as follows:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| content | content of the message | string\| VNode | - |  |
+| class | Customized CSS class | string | - |
+| content | content of the message | string\| VNode \| () => 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 | VNode | - |  |
+| icon | Customized Icon | VNode \| ()=> VNode | - |  |
 | key | The unique identifier of the Message | string\|number | - |  |
+| style | Customized inline style | CSSProperties | - |  |
+| onClick | Specify a function that will be called when the message is clicked | function | - |  |
+| onClose | Specify a function that will be called when the message is closed | function | - |  |
 
 ### Global static methods
 
@@ -68,12 +72,16 @@ message.config({
   top: '100px',
   duration: 2,
   maxCount: 3,
+  rtl: true,
+  prefixCls: 'my-message',
 });
 ```
 
-| Argument | Description | Type | Default |
+| Argument | Description | Type | Default | Version |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
-| duration | time before auto-dismiss, in seconds | number | 1.5 |
+| duration | time before auto-dismiss, in seconds | number | 1.5 |  |
-| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
+| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |  |
-| maxCount | max message show, drop oldest if exceed limit | number | - |
+| maxCount | max message show, drop oldest if exceed limit | number | - |  |
-| top | distance from top | string | `24px` |
+| prefixCls | The prefix className of message node | string | `ant-message` | 3.0 |
+| rtl | Whether to enable RTL mode | boolean | false | 3.0 |
+| top | distance from top | string | `8px` |

components/message/index.tsx

@@ -5,18 +5,65 @@ import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFill
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
 import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
-import type { VueNode } from '../_util/type';
+import type { Key, VueNode } from '../_util/type';
+import type { NotificationInstance } from '../vc-notification/Notification';
+import classNames from '../_util/classNames';
 
 let defaultDuration = 3;
 let defaultTop: string;
-let messageInstance: any;
+let messageInstance: NotificationInstance;
 let key = 1;
 let localPrefixCls = '';
 let transitionName = 'move-up';
+let hasTransitionName = false;
 let getContainer = () => document.body;
 let maxCount: number;
+let rtl = false;
 
-function getMessageInstance(args: MessageArgsProps, callback: (i: any) => void) {
+export function getKeyThenIncreaseKey() {
+  return key++;
+}
+
+export interface ConfigOptions {
+  top?: string;
+  duration?: number;
+  prefixCls?: string;
+  getContainer?: () => HTMLElement;
+  transitionName?: string;
+  maxCount?: number;
+  rtl?: boolean;
+}
+
+function setMessageConfig(options: ConfigOptions) {
+  if (options.top !== undefined) {
+    defaultTop = options.top;
+    messageInstance = null; // delete messageInstance for new defaultTop
+  }
+  if (options.duration !== undefined) {
+    defaultDuration = options.duration;
+  }
+
+  if (options.prefixCls !== undefined) {
+    localPrefixCls = options.prefixCls;
+  }
+  if (options.getContainer !== undefined) {
+    getContainer = options.getContainer;
+  }
+  if (options.transitionName !== undefined) {
+    transitionName = options.transitionName;
+    messageInstance = null; // delete messageInstance for new transitionName
+    hasTransitionName = true;
+  }
+  if (options.maxCount !== undefined) {
+    maxCount = options.maxCount;
+    messageInstance = null;
+  }
+  if (options.rtl !== undefined) {
+    rtl = options.rtl;
+  }
+}
+
+function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationInstance) => void) {
   if (messageInstance) {
     callback(messageInstance);
     return;
@@ -27,6 +74,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: any) => void)
       prefixCls: args.prefixCls || localPrefixCls,
       rootPrefixCls: args.rootPrefixCls,
       transitionName,
+      hasTransitionName,
       style: { top: defaultTop }, // 覆盖原来的样式
       getContainer,
       maxCount,
@@ -49,7 +97,7 @@ export interface ThenableArgument {
   (val: any): void;
 }
 
-const iconMap = {
+const typeToIcon = {
   info: InfoCircleFilled,
   success: CheckCircleFilled,
   error: CloseCircleFilled,
@@ -57,16 +105,14 @@ const iconMap = {
   loading: LoadingOutlined,
 };
 
-export interface MessageType {
+export interface MessageType extends PromiseLike<any> {
   (): void;
-  then: (fill: ThenableArgument, reject: ThenableArgument) => Promise<void>;
-  promise: Promise<void>;
 }
 
 export interface MessageArgsProps {
   content: string | (() => VueNode) | VueNode;
-  duration: number | null;
+  duration?: number;
-  type: NoticeType;
+  type?: NoticeType;
   prefixCls?: string;
   rootPrefixCls?: string;
   onClose?: () => void;
@@ -75,12 +121,13 @@ export interface MessageArgsProps {
   style?: CSSProperties;
   class?: string;
   appContext?: any;
+  onClick?: (e: MouseEvent) => void;
 }
 
 function notice(args: MessageArgsProps): MessageType {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
 
-  const target = args.key || key++;
+  const target = args.key || getKeyThenIncreaseKey();
   const closePromise = new Promise(resolve => {
     const callback = () => {
       if (typeof args.onClose === 'function') {
@@ -95,18 +142,21 @@ function notice(args: MessageArgsProps): MessageType {
         style: args.style || {},
         class: args.class,
         content: ({ prefixCls }) => {
-          const Icon = iconMap[args.type];
+          const Icon = typeToIcon[args.type];
           const iconNode = Icon ? <Icon /> : '';
+          const messageClass = classNames(`${prefixCls}-custom-content`, {
+            [`${prefixCls}-${args.type}`]: args.type,
+            [`${prefixCls}-rtl`]: rtl === true,
+          });
           return (
-            <div
+            <div class={messageClass}>
-              class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
+              {typeof args.icon === 'function' ? args.icon() : args.icon || iconNode}
-            >
-              {typeof args.icon === 'function' ? args.icon : args.icon || iconNode}
               <span>{typeof args.content === 'function' ? args.content() : args.content}</span>
             </div>
           );
         },
         onClose: callback,
+        onClick: args.onClick,
       });
     });
   });
@@ -121,7 +171,7 @@ function notice(args: MessageArgsProps): MessageType {
   return result;
 }
 
-type ConfigDuration = number | (() => void);
+type ConfigDuration = number;
 type JointContent = VueNode | MessageArgsProps;
 export type ConfigOnClose = () => void;
 
@@ -132,73 +182,64 @@ function isArgsProps(content: JointContent): content is MessageArgsProps {
   );
 }
 
-export interface ConfigOptions {
-  top?: string;
-  duration?: number;
-  prefixCls?: string;
-  getContainer?: () => HTMLElement;
-  transitionName?: string;
-  maxCount?: number;
-}
-
 const api: any = {
   open: notice,
-  config(options: ConfigOptions) {
+  config: setMessageConfig,
-    if (options.top !== undefined) {
+  destroy(messageKey?: Key) {
-      defaultTop = options.top;
-      messageInstance = null; // delete messageInstance for new defaultTop
-    }
-    if (options.duration !== undefined) {
-      defaultDuration = options.duration;
-    }
-    if (options.prefixCls !== undefined) {
-      localPrefixCls = options.prefixCls;
-    }
-    if (options.getContainer !== undefined) {
-      getContainer = options.getContainer;
-    }
-    if (options.transitionName !== undefined) {
-      transitionName = options.transitionName;
-      messageInstance = null; // delete messageInstance for new transitionName
-    }
-    if (options.maxCount !== undefined) {
-      maxCount = options.maxCount;
-      messageInstance = null;
-    }
-  },
-  destroy() {
     if (messageInstance) {
-      messageInstance.destroy();
+      if (messageKey) {
+        const { removeNotice } = messageInstance;
+        removeNotice(messageKey);
+      } else {
+        const { destroy } = messageInstance;
+        destroy();
         messageInstance = null;
       }
+    }
   },
 };
 
-['success', 'info', 'warning', 'error', 'loading'].forEach(type => {
+export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
-  api[type] = (content: JointContent, duration: ConfigDuration, onClose?: ConfigOnClose) => {
+  originalApi[type] = (
+    content: JointContent,
+    duration?: ConfigDuration,
+    onClose?: ConfigOnClose,
+  ) => {
     if (isArgsProps(content)) {
-      return api.open({ ...content, type });
+      return originalApi.open({ ...content, type });
     }
+
     if (typeof duration === 'function') {
       onClose = duration;
       duration = undefined;
     }
-    return api.open({ content, duration, type, onClose });
+
+    return originalApi.open({ content, duration, type, onClose });
   };
-});
+}
+
+(['success', 'info', 'warning', 'error', 'loading'] as NoticeType[]).forEach(type =>
+  attachTypeApi(api, type),
+);
 
 api.warn = api.warning;
 
-export interface MessageApi {
+export interface MessageInstance {
   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: MessageArgsProps): MessageType;
-  config(options: ConfigOptions): void;
-  destroy(): void;
 }
 
+export interface MessageApi extends MessageInstance {
+  warn(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
+  config(options: ConfigOptions): void;
+  destroy(messageKey?: Key): void;
+}
+
+/** @private test Only function. Not work on production */
+export const getInstance = () => (process.env.NODE_ENV === 'test' ? messageInstance : null);
+
 export default api as MessageApi;

components/message/index.zh-CN.md

@@ -25,8 +25,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
 - `message.loading(content, [duration], onClose)`
 
 | 参数 | 说明 | 类型 | 默认值 |
-| -------- | --------------------------------------------- | -------------- | ------ |
+| --- | --- | --- | --- |
-| content  | 提示内容                                      | string\| VNode | -      |
+| content | 提示内容 | string\| VNode \| () => VNode | - |
 | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
 | onClose | 关闭时触发的回调函数 | Function | - |
 
@@ -47,13 +47,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
 - `message.warn(config)` // alias of warning
 - `message.loading(config)`
 
+`config` 对象属性如下：
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | --------------------------------------------- | -------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
-| content  | 提示内容                                      | string\| VNode | -      |      |
+| class | 自定义 CSS class | string | - |  |
+| content | 提示内容 | string\| VNode \| ()=> VNode | - |  |
 | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |  |
 | onClose | 关闭时触发的回调函数 | Function | - |  |
-| icon     | 自定义图标                                    | VNode          | -      |      |
+| icon | 自定义图标 | VNode \| () => VNode | - |  |
 | key | 当前提示的唯一标志 | string \| number | - |  |
+| style | 自定义内联样式 | CSSProperties | - |  |
+| onClick | 点击 message 时触发的回调函数 | function | - |  |
+| onClose | 关闭时触发的回调函数 | function | - |  |
 
 ### 全局方法
 
@@ -69,12 +75,16 @@ message.config({
   top: `100px`,
   duration: 2,
   maxCount: 3,
+  rtl: true,
+  prefixCls: 'my-message',
 });
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
-| duration | 默认自动关闭延时，单位秒 | number | 3 |
+| duration | 默认自动关闭延时，单位秒 | number | 3 |  |
-| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
+| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |  |
-| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |
+| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |  |
-| top | 消息距离顶部的位置 | string | `24px` |
+| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 3.0 |
+| rtl | 是否开启 RTL 模式 | boolean | false |  |  |
+| top | 消息距离顶部的位置 | string | `8px` |  |

components/message/style/index.less

@@ -7,7 +7,7 @@
   .reset-component();
 
   position: fixed;
-  top: 16px;
+  top: 8px;
   left: 0;
   z-index: @zindex-message;
   width: 100%;
@@ -16,9 +16,6 @@
   &-notice {
     padding: 8px;
     text-align: center;
-    &:first-child {
-      margin-top: -8px;
-    }
   }
 
   &-notice-content {
@@ -54,8 +51,7 @@
     font-size: @font-size-lg;
   }
 
-  &-notice.move-up-leave.move-up-leave-active {
+  &-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active {
-    overflow: hidden;
     animation-name: MessageMoveOut;
     animation-duration: 0.3s;
   }
@@ -67,9 +63,12 @@
     padding: 8px;
     opacity: 1;
   }
+
   100% {
     max-height: 0;
     padding: 0;
     opacity: 0;
   }
 }
+
+@import './rtl';

components/message/style/rtl.less

@@ -0,0 +1,17 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@message-prefix-cls: ~'@{ant-prefix}-message';
+
+.@{message-prefix-cls}-rtl {
+  direction: rtl;
+
+  span {
+    direction: rtl;
+  }
+
+  .@{iconfont-css-prefix} {
+    margin-right: 0;
+    margin-left: 8px;
+  }
+}

components/vc-notification/Notification.tsx

@@ -1,5 +1,5 @@
-import { getTransitionGroupProps } from 'ant-design-vue/es/_util/transition';
+import { getTransitionGroupProps } from '../_util/transition';
-import type { Key } from 'ant-design-vue/es/_util/type';
+import type { Key } from '../_util/type';
 import type { CSSProperties } from 'vue';
 import {
   createVNode,
@@ -125,7 +125,7 @@ const Notification = defineComponent<NotificationProps>({
       remove,
     });
     return () => {
-      const { prefixCls, closeIcon = slots.closeIcon?.() } = props;
+      const { prefixCls, closeIcon = slots.closeIcon?.({ prefixCls }) } = props;
       const noticeNodes = notices.value.map(({ notice, holderCallback }, index) => {
         const updateMark = index === notices.value.length - 1 ? notice.updateMark : undefined;
         const { key, userPassKey } = notice;
@@ -201,6 +201,8 @@ Notification.newInstance = function newNotificationInstance(properties, callback
     appContext,
     prefixCls: customizePrefixCls,
     rootPrefixCls: customRootPrefixCls,
+    transitionName: customTransitionName,
+    hasTransitionName,
     ...props
   } = properties || {};
   const div = document.createElement('div');
@@ -234,9 +236,17 @@ Notification.newInstance = function newNotificationInstance(properties, callback
         const global = globalConfigForApi;
         const prefixCls = global.getPrefixCls(name, customizePrefixCls);
         const rootPrefixCls = global.getRootPrefixCls(customRootPrefixCls, prefixCls);
+        const transitionName = hasTransitionName
+          ? customTransitionName
+          : `${rootPrefixCls}-${customTransitionName}`;
         return (
           <ConfigProvider {...global} notUpdateGlobalConfig={true} prefixCls={rootPrefixCls}>
-            <Notification ref={notiRef} {...attrs} prefixCls={prefixCls} />
+            <Notification
+              ref={notiRef}
+              {...attrs}
+              prefixCls={prefixCls}
+              transitionName={transitionName}
+            />
           </ConfigProvider>
         );
       };