style: add message rtl (#22513)

* style: add message rtl

* fix: change config

* fix: add rtl test

components/message/__tests__/config.test.js

@@ -2,24 +2,32 @@ import { sleep } from '../../../tests/utils';
 import message from '..';
 
 describe('message.config', () => {
-beforeEach(() => {
+  beforeEach(() => {
     jest.useFakeTimers();
-});
+  });
 
-afterEach(() => {
+  afterEach(() => {
     message.destroy();
     jest.useRealTimers();
-});
+  });
 
-it('should be able to config top', () => {
+  it('should be able to config top', () => {
     message.config({
       top: 100,
     });
     message.info('whatever');
     expect(document.querySelectorAll('.ant-message')[0].style.top).toBe('100px');
-});
+  });
+
+  it('should be able to config rtl', () => {
+    message.config({
+      rtl: true,
+    });
+    message.info('whatever');
+    expect(document.querySelectorAll('.ant-message-rtl').length).toBe(1);
+  });
 
-it('should be able to config getContainer', () => {
+  it('should be able to config getContainer', () => {
     message.config({
       getContainer: () => {
         const div = document.createElement('div');
@@ -30,9 +38,9 @@ it('should be able to config getContainer', () => {
     });
     message.info('whatever');
     expect(document.querySelectorAll('.custom-container').length).toBe(1);
-});
+  });
 
-it('should be able to config maxCount', () => {
+  it('should be able to config maxCount', () => {
     message.config({
       maxCount: 5,
     });
@@ -44,9 +52,9 @@ it('should be able to config maxCount', () => {
     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 () => {
+  it('should be able to config duration', async () => {
     jest.useRealTimers();
     message.config({
       duration: 0.5,
@@ -57,9 +65,9 @@ it('should be able to config duration', async () => {
     message.config({
       duration: 3,
     });
-});
+  });
 
-it('should be able to config prefixCls', () => {
+  it('should be able to config prefixCls', () => {
     message.config({
       prefixCls: 'prefix-test',
     });
@@ -69,9 +77,9 @@ it('should be able to config prefixCls', () => {
     message.config({
       prefixCls: 'ant-message',
     });
-});
+  });
 
-it('should be able to config transitionName', () => {
+  it('should be able to config transitionName', () => {
     message.config({
       transitionName: '',
     });
@@ -80,5 +88,5 @@ it('should be able to config transitionName', () => {
     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;
+  }
+}