test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

fix: badge offset in rtl (#24724)

Browse Source 
* fix: badge offset in rtl

* fix: update snap

* add test

* fix: offset

* fix: snap
This commit is contained in:
xrkffgg 2020-06-06 13:20:09 +08:00 committed by GitHub
parent e361b30ded
commit 955fa520f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 393 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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

175
components/badge/__tests__/__snapshots__/index.test.js.snap
View File

@ -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"

7
components/badge/__tests__/index.test.js
View File

@ -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();

27
components/badge/demo/offset.md Normal file
View File

@ -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,
);
```

12
components/badge/index.en-US.md
View File

@ -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` | `''` | |

9
components/badge/index.tsx
View File

@ -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),

12
components/badge/index.zh-CN.md
View File

@ -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` | '' | |