refactor: message & notification (#5113)

* refactor: notification

* refactor: message

* refactor: notification

* test: update message & notification test

Author: tangjinzhou

components/components.ts

@@ -114,6 +114,7 @@ export { default as Modal } from './modal';
 export type { StatisticProps } from './statistic';
 export { default as Statistic, StatisticCountdown } from './statistic';
 
+export type { NotificationPlacement } from './notification';
 export { default as notification } from './notification';
 
 export type { PageHeaderProps } from './page-header';

components/config-provider/index.tsx

@@ -9,6 +9,8 @@ import type { TransformCellTextProps } from '../table/interface';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import type { RequiredMark } from '../form/Form';
 import type { MaybeRef } from '../_util/type';
+import message from '../message';
+import notification from '../notification';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 
@@ -248,6 +250,17 @@ const ConfigProvider = defineComponent({
       );
     };
 
+    watchEffect(() => {
+      if (props.direction) {
+        message.config({
+          rtl: props.direction === 'rtl',
+        });
+        notification.config({
+          rtl: props.direction === 'rtl',
+        });
+      }
+    });
+
     return () => (
       <LocaleReceiver children={(_, __, legacyLocale) => renderProvider(legacyLocale as Locale)} />
     );

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

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/message/demo/custom-style.vue correctly 1`] = `
+<button class="ant-btn" type="button">
+  <!----><span>Customized style</span>
+</button>
+`;
+
 exports[`renders ./components/message/demo/duration.vue correctly 1`] = `
 <button class="ant-btn" type="button">
   <!----><span>Customized display duration</span>
@@ -36,6 +42,11 @@ exports[`renders ./components/message/demo/thenable.vue correctly 1`] = `
 
 exports[`renders ./components/message/demo/update.vue correctly 1`] = `
 <button class="ant-btn ant-btn-primary" type="button">
-  <!----><span>Open the message box</span>
+  <!----><span>Open the message box (update by key)</span>
+</button>
+<br>
+<br>
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Open the message box (update by reactive)</span>
 </button>
 `;

components/message/__tests__/index.test.js

@@ -1,16 +1,22 @@
 import { asyncExpect } from '../../../tests/utils';
-import message from '..';
+import message, { getInstance } from '..';
 import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
 
 describe('message', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
     document.body.outerHTML = '';
   });
 
   afterEach(() => {
     message.destroy();
   });
 
+  afterEach(() => {
+    message.destroy();
+    jest.useRealTimers();
+  });
+
   it('should be able to config top', async () => {
     message.config({
       top: '100px',
@@ -41,53 +47,42 @@ describe('message', () => {
       message.info('test');
     }
     message.info('last');
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
-      expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
-    }, 0);
+    await Promise.resolve();
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
+    expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
   });
 
   it('should be able to hide manually', async () => {
     const hide1 = message.info('whatever', 0);
     const hide2 = message.info('whatever', 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-      hide1();
-    }, 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
-      hide2();
-    }, 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 0);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    hide1();
+    jest.runAllTimers();
+    expect(getInstance().component.value.notices).toHaveLength(1);
+    hide2();
+    jest.runAllTimers();
+    expect(getInstance().component.value.notices).toHaveLength(0);
   });
 
   it('should be able to destroy globally', async () => {
-    await asyncExpect(() => {
-      message.info('whatever', 0);
-    });
-    await asyncExpect(() => {
-      message.info('whatever', 0);
-    });
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message').length).toBe(1);
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-    });
-    await asyncExpect(() => {
-      message.destroy();
-    });
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message').length).toBe(0);
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    });
+    message.info('whatever', 0);
+    message.info('whatever', 0);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.ant-message').length).toBe(1);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    message.destroy();
+    expect(document.querySelectorAll('.ant-message').length).toBe(0);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 
   it('should not need to use duration argument when using the onClose arguments', () => {
     message.info('whatever', () => {});
   });
 
   it('should have the default duration when using the onClose arguments', done => {
+    jest.useRealTimers();
     const defaultDuration = 3;
     const now = Date.now();
     message.info('whatever', () => {
@@ -99,6 +94,7 @@ describe('message', () => {
   });
 
   it('should be called like promise', done => {
+    jest.useRealTimers();
     const defaultDuration = 3;
     const now = Date.now();
     message.info('whatever').then(() => {
@@ -112,38 +108,32 @@ describe('message', () => {
   // https:// github.com/ant-design/ant-design/issues/8201
   it('should hide message correctly', async () => {
     let hide = message.loading('Action in progress..', 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
-      hide();
-    }, 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 0);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    hide();
+    await Promise.resolve();
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
   it('should allow custom icon', async () => {
     message.open({ content: 'Message', icon: <SmileOutlined /> });
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
-    }, 0);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
   });
 
   it('should have no icon', async () => {
     message.open({ content: 'Message' });
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
-    }, 0);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
   });
   // https://github.com/ant-design/ant-design/issues/8201
   it('should destroy messages correctly', async () => {
     message.loading('Action in progress1..', 0);
     message.loading('Action in progress2..', 0);
     setTimeout(() => message.destroy(), 1000);
-
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-    }, 0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 1500);
+    await Promise.resolve();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
 });

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 |
-| --- | --- | --- | --- |
-| duration | time before auto-dismiss, in seconds | number | 1.5 |
-| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
-| maxCount | max message show, drop oldest if exceed limit | number | - |
-| top | distance from top | string | `24px` |
+| Argument | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| duration | time before auto-dismiss, in seconds | number | 1.5 |  |
+| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |  |
+| maxCount | max message show, drop oldest if exceed limit | number | - |  |
+| 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` |