From 3d76859bbc92a425b1b2f5a48c528b166f249844 Mon Sep 17 00:00:00 2001
From: xrkffgg <xrkffgg@gmail.com>
Date: Tue, 21 Apr 2020 10:49:59 +0800
Subject: [PATCH] style: add dropdown group title rtl style (#23404)

* style: add dropdown group title rtl style

* fix margin

* fix lint
---
 components/dropdown/demo/sub-menu.md             | 6 ++++--
 components/dropdown/style/rtl.less               | 7 +++++++
 site/theme/template/Layout/Header/More.tsx       | 5 ++---
 site/theme/template/Layout/Header/Navigation.tsx | 9 ++++-----
 site/theme/template/Layout/Header/index.tsx      | 3 +++
 site/theme/template/Layout/Header/interface.tsx  | 1 +
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index f54a9e952a..35dafc443d 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -21,8 +21,10 @@ const { SubMenu } = Menu;
 
 const menu = (
   <Menu>
-    <Menu.Item>1st menu item</Menu.Item>
-    <Menu.Item>2nd menu item</Menu.Item>
+    <Menu.ItemGroup title="Group title">
+      <Menu.Item>1st menu item</Menu.Item>
+      <Menu.Item>2nd menu item</Menu.Item>
+    </Menu.ItemGroup>
     <SubMenu title="sub menu">
       <Menu.Item>3rd menu item</Menu.Item>
       <Menu.Item>4th menu item</Menu.Item>
diff --git a/components/dropdown/style/rtl.less b/components/dropdown/style/rtl.less
index 87333ba615..b6047c1fd9 100644
--- a/components/dropdown/style/rtl.less
+++ b/components/dropdown/style/rtl.less
@@ -16,6 +16,13 @@
   }
 
   &-menu {
+    &-item-group-title {
+      .@{dropdown-prefix-cls}-rtl & {
+        direction: rtl;
+        text-align: right;
+      }
+    }
+
     &-submenu-popup {
       ul,
       li {
diff --git a/site/theme/template/Layout/Header/More.tsx b/site/theme/template/Layout/Header/More.tsx
index 5f245fe8e9..da1ef0535c 100644
--- a/site/theme/template/Layout/Header/More.tsx
+++ b/site/theme/template/Layout/Header/More.tsx
@@ -55,7 +55,7 @@ export function getEcosystemGroup({ isZhCN }: SharedProps): React.ReactElement {
 
 export default (props: SharedProps) => {
   const menu = <Menu>{getEcosystemGroup(props)}</Menu>;
-
+  const DownStyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
   return (
     <Dropdown overlay={menu} placement="bottomRight">
       <Button size="small" className="header-button">
@@ -63,9 +63,8 @@ export default (props: SharedProps) => {
         <DownOutlined
           style={{
             fontSize: '9px',
-            marginLeft: 2,
+            margin: DownStyle,
             verticalAlign: 'middle',
-            marginTop: -1,
           }}
         />
       </Button>
diff --git a/site/theme/template/Layout/Header/Navigation.tsx b/site/theme/template/Layout/Header/Navigation.tsx
index ce5eeac6c6..e5e1e2f25a 100644
--- a/site/theme/template/Layout/Header/Navigation.tsx
+++ b/site/theme/template/Layout/Header/Navigation.tsx
@@ -12,6 +12,7 @@ import './Navigation.less';
 
 export interface NavigationProps extends SharedProps {
   isMobile: boolean;
+  isRTL: boolean;
   pathname: string;
   responsive: null | 'narrow' | 'crowded';
   location: { pathname: string };
@@ -22,6 +23,7 @@ export interface NavigationProps extends SharedProps {
 
 export default ({
   isZhCN,
+  isRTL,
   isMobile,
   pathname,
   responsive,
@@ -32,10 +34,7 @@ export default ({
 }: NavigationProps) => {
   const menuMode = isMobile ? 'inline' : 'horizontal';
 
-  const module = pathname
-    .split('/')
-    .slice(0, -1)
-    .join('/');
+  const module = pathname.split('/').slice(0, -1).join('/');
   let activeMenuItem = module || 'home';
   if (location.pathname === 'changelog' || location.pathname === 'changelog-cn') {
     activeMenuItem = 'docs/react';
@@ -56,7 +55,7 @@ export default ({
     <Menu.Item key="switch-direction" onClick={onDirectionChange}>
       {directionText}
     </Menu.Item>,
-    getEcosystemGroup({ isZhCN }),
+    getEcosystemGroup({ isZhCN, isRTL }),
   ];
 
   if (isMobile) {
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
index 4ccdc0ca72..1aebf4555f 100644
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/site/theme/template/Layout/Header/index.tsx
@@ -180,6 +180,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       <SiteContext.Consumer>
         {({ isMobile }) => {
           const { menuVisible, windowWidth, searching } = this.state;
+          const { direction } = this.context;
           const {
             location,
             themeConfig,
@@ -197,6 +198,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           const isHome = ['', 'index', 'index-cn'].includes(pathname);
 
           const isZhCN = locale === 'zh-CN';
+          const isRTL = direction === 'rtl';
           let responsive: null | 'narrow' | 'crowded' = null;
           if (windowWidth < RESPONSIVE_XS) {
             responsive = 'crowded';
@@ -211,6 +213,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
 
           const sharedProps = {
             isZhCN,
+            isRTL,
           };
 
           const searchBox = (
diff --git a/site/theme/template/Layout/Header/interface.tsx b/site/theme/template/Layout/Header/interface.tsx
index 096b372620..8a0755c1bf 100644
--- a/site/theme/template/Layout/Header/interface.tsx
+++ b/site/theme/template/Layout/Header/interface.tsx
@@ -1,3 +1,4 @@
 export interface SharedProps {
   isZhCN: boolean;
+  isRTL: boolean;
 }