style: add message rtl (#22513)

* style: add message rtl

* fix: change config

* fix: add rtl test

components/message/__tests__/config.test.js

@@ -2,83 +2,91 @@ import { sleep } from '../../../tests/utils';
 import message from '..';
 
 describe('message.config', () => {
-beforeEach(() => {
-  jest.useFakeTimers();
-});
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
 
-afterEach(() => {
-  message.destroy();
-  jest.useRealTimers();
-});
+  afterEach(() => {
+    message.destroy();
+    jest.useRealTimers();
+  });
 
-it('should be able to config top', () => {
-  message.config({
-    top: 100,
+  it('should be able to config top', () => {
+    message.config({
+      top: 100,
+    });
+    message.info('whatever');
+    expect(document.querySelectorAll('.ant-message')[0].style.top).toBe('100px');
   });
-  message.info('whatever');
-  expect(document.querySelectorAll('.ant-message')[0].style.top).toBe('100px');
-});
 
-it('should be able to config getContainer', () => {
-  message.config({
-    getContainer: () => {
-      const div = document.createElement('div');
-      div.className = 'custom-container';
-      document.body.appendChild(div);
-      return div;
-    },
+  it('should be able to config rtl', () => {
+    message.config({
+      rtl: true,
+    });
+    message.info('whatever');
+    expect(document.querySelectorAll('.ant-message-rtl').length).toBe(1);
   });
-  message.info('whatever');
-  expect(document.querySelectorAll('.custom-container').length).toBe(1);
-});
 
-it('should be able to config maxCount', () => {
-  message.config({
-    maxCount: 5,
+  it('should be able to config getContainer', () => {
+    message.config({
+      getContainer: () => {
+        const div = document.createElement('div');
+        div.className = 'custom-container';
+        document.body.appendChild(div);
+        return div;
+      },
+    });
+    message.info('whatever');
+    expect(document.querySelectorAll('.custom-container').length).toBe(1);
   });
-  for (let i = 0; i < 10; i += 1) {
-    message.info('test');
-  }
-  message.info('last');
-  expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
-  expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
-  jest.runAllTimers();
-  expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-});
 
-it('should be able to config duration', async () => {
-  jest.useRealTimers();
-  message.config({
-    duration: 0.5,
+  it('should be able to config maxCount', () => {
+    message.config({
+      maxCount: 5,
+    });
+    for (let i = 0; i < 10; i += 1) {
+      message.info('test');
+    }
+    message.info('last');
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
+    expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
+    jest.runAllTimers();
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
   });
-  message.info('last');
-  await sleep(600);
-  expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-  message.config({
-    duration: 3,
-  });
-});
 
-it('should be able to config prefixCls', () => {
-  message.config({
-    prefixCls: 'prefix-test',
+  it('should be able to config duration', async () => {
+    jest.useRealTimers();
+    message.config({
+      duration: 0.5,
+    });
+    message.info('last');
+    await sleep(600);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    message.config({
+      duration: 3,
+    });
   });
-  message.info('last');
-  expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-  expect(document.querySelectorAll('.prefix-test-notice').length).toBe(1);
-  message.config({
-    prefixCls: 'ant-message',
-  });
-});
 
-it('should be able to config transitionName', () => {
-  message.config({
-    transitionName: '',
+  it('should be able to config prefixCls', () => {
+    message.config({
+      prefixCls: 'prefix-test',
+    });
+    message.info('last');
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(document.querySelectorAll('.prefix-test-notice').length).toBe(1);
+    message.config({
+      prefixCls: 'ant-message',
+    });
   });
-  message.info('last');
-  expect(document.querySelectorAll('.move-up-enter').length).toBe(0);
-  message.config({
-    transitionName: 'move-up',
+
+  it('should be able to config transitionName', () => {
+    message.config({
+      transitionName: '',
+    });
+    message.info('last');
+    expect(document.querySelectorAll('.move-up-enter').length).toBe(0);
+    message.config({
+      transitionName: 'move-up',
+    });
   });
 });
-});

components/message/index.en-US.md

@@ -70,6 +70,7 @@ message.config({
   top: 100,
   duration: 2,
   maxCount: 3,
+  rtl: true,
 });
 ```
 
@@ -79,3 +80,4 @@ message.config({
 | getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
 | maxCount | max message show, drop oldest if exceed limit | number | - |
 | top | distance from top | number | 24 |
+| rtl | whether to enable RTL mode | boolean | `false` |

components/message/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import Notification from 'rc-notification';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
@@ -14,6 +15,7 @@ let prefixCls = 'ant-message';
 let transitionName = 'move-up';
 let getContainer: () => HTMLElement;
 let maxCount: number;
+let rtl = false;
 
 function getMessageInstance(callback: (i: any) => void) {
   if (messageInstance) {
@@ -72,6 +74,11 @@ function notice(args: ArgsProps): MessageType {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
   const IconComponent = iconMap[args.type];
 
+  const messageClass = classNames(`${prefixCls}-custom-content`, {
+    [`${prefixCls}-${args.type}`]: args.type,
+    [`${prefixCls}-rtl`]: rtl === true,
+  });
+
   const target = args.key || key++;
   const closePromise = new Promise(resolve => {
     const callback = () => {
@@ -86,11 +93,7 @@ function notice(args: ArgsProps): MessageType {
         duration,
         style: {},
         content: (
-          <div
-            className={`${prefixCls}-custom-content${
-              args.type ? ` ${prefixCls}-${args.type}` : ''
-            }`}
-          >
+          <div className={messageClass}>
             {args.icon || (IconComponent && <IconComponent />)}
             <span>{args.content}</span>
           </div>
@@ -129,6 +132,7 @@ export interface ConfigOptions {
   getContainer?: () => HTMLElement;
   transitionName?: string;
   maxCount?: number;
+  rtl?: boolean;
 }
 
 const api: any = {
@@ -155,6 +159,9 @@ const api: any = {
       maxCount = options.maxCount;
       messageInstance = null;
     }
+    if (options.rtl !== undefined) {
+      rtl = options.rtl;
+    }
   },
   destroy() {
     if (messageInstance) {

components/message/index.zh-CN.md

@@ -71,6 +71,7 @@ message.config({
   top: 100,
   duration: 2,
   maxCount: 3,
+  rtl: true,
 });
 ```
 
@@ -80,3 +81,4 @@ message.config({
 | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |
 | top | 消息距离顶部的位置 | number | 24 |
+| rtl | 是否开启 RTL 模式 | boolean | `false` |

components/message/style/index.less

@@ -72,3 +72,5 @@
     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;
+  }
+}