From 955fa520f1ef5e2eed0dfb6c45cb20449a8cc65c Mon Sep 17 00:00:00 2001
From: xrkffgg <xrkffgg@gmail.com>
Date: Sat, 6 Jun 2020 13:20:09 +0800
Subject: [PATCH] fix: badge offset in rtl (#24724)

* fix: badge offset in rtl

* fix: update snap

* add test

* fix: offset

* fix: snap
---
 .../__tests__/__snapshots__/demo.test.js.snap | 173 +++++++++++++++++
 .../__snapshots__/index.test.js.snap          | 175 ++++++++++++++++++
 components/badge/__tests__/index.test.js      |   7 +
 components/badge/demo/offset.md               |  27 +++
 components/badge/index.en-US.md               |  12 +-
 components/badge/index.tsx                    |   9 +
 components/badge/index.zh-CN.md               |  12 +-
 7 files changed, 393 insertions(+), 22 deletions(-)
 create mode 100644 components/badge/demo/offset.md

diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index ba5bd50da5..7c30cee616 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1497,6 +1497,179 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
+<span
+  class="ant-badge"
+>
+  <a
+    class="head-example"
+    href="#"
+  />
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="right:-10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
 <div>
   <span
diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap
index 2557724d16..67cf214af7 100644
--- a/components/badge/__tests__/__snapshots__/index.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/index.test.js.snap
@@ -762,6 +762,181 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
 />
 `;
 
+exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
+<span
+  class="ant-badge ant-badge-rtl"
+>
+  <a
+    class="head-example"
+    href="#"
+  >
+    head
+  </a>
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="left:10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`Badge should be compatible with borderColor style 1`] = `
 <span
   class="ant-badge ant-badge-not-a-wrapper"
diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
index f60b91ed93..42f2df304c 100644
--- a/components/badge/__tests__/index.test.js
+++ b/components/badge/__tests__/index.test.js
@@ -8,6 +8,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
 describe('Badge', () => {
   mountTest(Badge);
   rtlTest(Badge);
+  rtlTest(() => (
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example">
+        head
+      </a>
+    </Badge>
+  ));
 
   beforeEach(() => {
     jest.useFakeTimers();
diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
new file mode 100644
index 0000000000..2ae6c7449f
--- /dev/null
+++ b/components/badge/demo/offset.md
@@ -0,0 +1,27 @@
+---
+order: 5
+title:
+  zh-CN: 自定义位置偏移
+  en-US: Offset
+---
+
+## zh-CN
+
+设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
+
+## en-US
+
+Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
+
+```jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </>,
+  mountNode,
+);
+```
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index b66d46b89b..241d4f5a5b 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -13,22 +13,12 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 
 ## API
 
-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode |  |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
-| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
+| offset | set offset of the badge dot | `[number, number]` | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 7ff68d4e7f..3f670a069c 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -87,6 +87,15 @@ const Badge: React.FC<BadgeProps> = ({
   };
 
   const getStyleWithOffset = () => {
+    if (direction === 'rtl') {
+      return offset
+        ? {
+            left: parseInt(offset[0] as string, 10),
+            marginTop: offset[1],
+            ...style,
+          }
+        : style;
+    }
     return offset
       ? {
           right: -parseInt(offset[0] as string, 10),
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index f272aba08e..6d86dcb6b9 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -14,22 +14,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 
 ## API
 
-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
-| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
+| offset | 设置状态点的位置偏移 | `[number, number]` | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' |  |