fix: offset

ant-design · Jun 6, 2020 · 245276c · 245276c
1 parent a4fae15
commit 245276c
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 28 deletions.
diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap
@@ -775,7 +775,7 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
   <sup
     class="ant-scroll-number ant-badge-count"
     data-show="true"
-    style="left:-10px;margin-top:10px"
+    style="left:10px;margin-top:10px"
     title="5"
   >
     <span

diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
@@ -7,21 +7,21 @@ title:
 
 ## zh-CN
 
-设置状态点的位置偏移。
+设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
 
 ## en-US
 
-Set offset of the badge dot.
+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(
-  <div>
+  <>
     <Badge count={5} offset={[10, 10]}>
       <a href="#" className="head-example" />
     </Badge>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git 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
@@ -90,7 +90,7 @@ const Badge: React.FC<BadgeProps> = ({
     if (direction === 'rtl') {
       return offset
         ? {
-            left: -parseInt(offset[0] as string, 10),
+            left: parseInt(offset[0] as string, 10),
             marginTop: offset[1],
             ...style,
           }

diff --git 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` | '' |  |