feat: add notification rtl config (#23185)

* feat: add notification rtl config

* test: add test

components/notification/__tests__/index.test.js

@@ -88,6 +88,16 @@ describe('notification', () => {
     notification.destroy();
   });
 
+  it('should be able to config rtl', () => {
+    notification.config({
+      rtl: true,
+    });
+    notification.open({
+      message: 'whatever',
+    });
+    expect(document.querySelectorAll('.ant-notification-rtl').length).toBe(1);
+  });
+
   it('should be able to open with icon', async () => {
     const openNotificationWithIcon = async type => {
       const iconPrefix = '.ant-notification-notice-icon';

components/notification/index.en-US.md

@@ -55,6 +55,7 @@ notification.config({
   placement: 'bottomRight',
   bottom: 50,
   duration: 3,
+  rtl: true,
 });
 ```
 
@@ -66,6 +67,7 @@ notification.config({
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |
+| rtl | whether to enable RTL mode | boolean | `false` |
 
 ## FAQ
 

components/notification/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Notification from 'rc-notification';
 import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
 import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
 import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
@@ -29,8 +30,10 @@ export interface ConfigProps {
   placement?: NotificationPlacement;
   getContainer?: () => HTMLElement;
   closeIcon?: React.ReactNode;
+  rtl?: boolean;
 }
 
+let rtl = false;
 function setNotificationConfig(options: ConfigProps) {
   const { duration, placement, bottom, top, getContainer, closeIcon } = options;
   if (duration !== undefined) {
@@ -51,6 +54,9 @@ function setNotificationConfig(options: ConfigProps) {
   if (closeIcon !== undefined) {
     defaultCloseIcon = closeIcon;
   }
+  if (options.rtl !== undefined) {
+    rtl = options.rtl;
+  }
 }
 
 function getPlacementStyle(
@@ -122,11 +128,15 @@ function getNotificationInstance(
     </span>
   );
 
+  const notificationClass = classNames(`${outerPrefixCls}-${placement}`, {
+    [`${outerPrefixCls}-rtl`]: rtl === true,
+  });
+
   notificationInstance[cacheKey] = new Promise(resolve => {
     Notification.newInstance(
       {
         prefixCls: outerPrefixCls,
-        className: `${outerPrefixCls}-${placement}`,
+        className: notificationClass,
         style: getPlacementStyle(placement, top, bottom),
         getContainer,
         closeIcon: closeIconToRender,

components/notification/index.zh-CN.md

@@ -56,6 +56,7 @@ notification.config({
   placement: 'bottomRight',
   bottom: 50,
   duration: 3,
+  rtl: true,
 });
 ```
 
@@ -67,6 +68,7 @@ notification.config({
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
+| rtl | 是否开启 RTL 模式 | boolean | `false` |
 
 ## FAQ
 

components/notification/style/index.less

@@ -212,3 +212,5 @@
     opacity: 0;
   }
 }
+
+@import './rtl';

components/notification/style/rtl.less

@@ -0,0 +1,53 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@notification-prefix-cls: ~'@{ant-prefix}-notification';
+
+.@{notification-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-notice {
+    &-closable &-message {
+      .@{notification-prefix-cls}-rtl & {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+
+    &-with-icon &-message {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+    }
+
+    &-with-icon &-description {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+    }
+
+    &-icon {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+
+    &-close {
+      .@{notification-prefix-cls}-rtl & {
+        right: auto;
+        left: 22px;
+      }
+    }
+
+    &-btn {
+      .@{notification-prefix-cls}-rtl & {
+        float: left;
+      }
+    }
+  }
+}