From 934fe16690d52e0df09a5472bab0d8598021344b Mon Sep 17 00:00:00 2001
From: xrkffgg <xrkffgg@gmail.com>
Date: Tue, 7 Apr 2020 10:55:36 +0800
Subject: [PATCH] style: add anchor rtl (#22875)

---
 components/anchor/Anchor.tsx       |  6 +++--
 components/anchor/style/index.less |  2 ++
 components/anchor/style/rtl.less   | 40 ++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 components/anchor/style/rtl.less

diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index f9ff481f72..a0cc0c4958 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -274,7 +274,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
     }
   };
 
-  renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
       className = '',
@@ -298,7 +298,9 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(className, `${prefixCls}-wrapper`);
+    const wrapperClass = classNames(className, `${prefixCls}-wrapper`, {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
index 9797308072..4ec7fb3d80 100644
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@@ -80,3 +80,5 @@
     padding-bottom: 5px;
   }
 }
+
+@import './rtl';
diff --git a/components/anchor/style/rtl.less b/components/anchor/style/rtl.less
new file mode 100644
index 0000000000..326aa2778e
--- /dev/null
+++ b/components/anchor/style/rtl.less
@@ -0,0 +1,40 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@anchor-border-width: 2px;
+
+.@{ant-prefix}-anchor {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-wrapper {
+    .@{ant-prefix}-anchor-rtl& {
+      margin-right: -4px;
+      margin-left: 0;
+      padding-right: 4px;
+      padding-left: 0;
+    }
+  }
+
+  &-ink {
+    .@{ant-prefix}-anchor-rtl & {
+      right: 0;
+      left: auto;
+    }
+
+    &-ball {
+      .@{ant-prefix}-anchor-rtl & {
+        right: 50%;
+        left: 0;
+        transform: translateX(50%);
+      }
+    }
+  }
+
+  &-link {
+    .@{ant-prefix}-anchor-rtl & {
+      padding: 7px 16px 7px 0;
+    }
+  }
+}