Skip to content

Commit 3f73f5b

Browse files
LuckyFBBmortalYoung
LuckyFBB
and
mortalYoung
authored
feat(statustag): support bg statusTag (#450)
* feat(statustag): support bg statusTag and change some props * update PresetColorType Co-authored-by: 野迂迂 <[email protected]> * fix(statustag): update fontSize and border style, md API, remove color variable * feat(statustag): change presetColor type and support bg in custom fill type and set bg opacity 0.15 --------- Co-authored-by: 野迂迂 <[email protected]>
1 parent 0b3c9c0 commit 3f73f5b

File tree

11 files changed

+276
-143
lines changed

11 files changed

+276
-143
lines changed

‎src/statusTag/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ exports[`test StatusTag suite should support StatusTag success render 1`] = `
66
"baseElement": <body>
77
<div>
88
<div
9-
class="dtc-statusTag dtc-statusTag__border"
9+
class="dtc-statusTag"
1010
>
1111
<div
12-
class="dtc-statusTag__default dtc-statusTag__success"
13-
/>
12+
class="dtc-statusTag__icon"
13+
>
14+
<span
15+
class="dtc-statusTag__icon--default dtc-statusTag__green--iconBg"
16+
/>
17+
</div>
1418
<span
1519
class="dtc-statusTag__text"
1620
>
@@ -21,11 +25,15 @@ exports[`test StatusTag suite should support StatusTag success render 1`] = `
2125
</body>,
2226
"container": <div>
2327
<div
24-
class="dtc-statusTag dtc-statusTag__border"
28+
class="dtc-statusTag"
2529
>
2630
<div
27-
class="dtc-statusTag__default dtc-statusTag__success"
28-
/>
31+
class="dtc-statusTag__icon"
32+
>
33+
<span
34+
class="dtc-statusTag__icon--default dtc-statusTag__green--iconBg"
35+
/>
36+
</div>
2937
<span
3038
class="dtc-statusTag__text"
3139
>

‎src/statusTag/__tests__/index.test.tsx‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,49 @@ describe('test StatusTag suite', () => {
1010
const wrapper = render(<StatusTag>完成</StatusTag>);
1111
expect(wrapper).toMatchSnapshot();
1212
});
13-
test('should support StatusTag render the default className in StatusTag', () => {
14-
const { container } = render(<StatusTag>完成</StatusTag>);
15-
expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}__border`]);
13+
test('should support StatusTag render correct', () => {
14+
const { container, rerender } = render(<StatusTag>完成</StatusTag>);
15+
expect(container.firstChild).toHaveClass(...[`${prefixCls}`]);
16+
rerender(<StatusTag type="outline">完成</StatusTag>);
17+
expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}--border`]);
18+
rerender(<StatusTag type="fill">完成</StatusTag>);
19+
expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}--fill`]);
1620
});
17-
test('should render StatusTag render correct type', () => {
18-
const { container } = render(<StatusTag type="run">完成</StatusTag>);
19-
expect(container.querySelector(`.${prefixCls}__run`)).toBeInTheDocument();
21+
test('should render StatusTag render correct inner color', () => {
22+
const { container, rerender } = render(<StatusTag color="green">完成</StatusTag>);
23+
expect(container.querySelector(`.${prefixCls}__green--iconBg`)).toBeInTheDocument();
24+
rerender(
25+
<StatusTag color="purple" type="fill">
26+
完成
27+
</StatusTag>
28+
);
29+
expect(container.querySelector(`.${prefixCls}__purple--fill`)).toBeInTheDocument();
2030
});
21-
test('should render StatusTag render correct color', () => {
22-
const { container } = render(<StatusTag color="#2177b8">完成</StatusTag>);
23-
const textWapper = container.querySelector(`.${prefixCls}__default`);
24-
expect(textWapper).toHaveStyle({ background: '#2177b8' });
31+
test('should render StatusTag render correct custom color', () => {
32+
const { container, rerender } = render(<StatusTag color="#2177b8">完成</StatusTag>);
33+
let wrapper = container.querySelector(`.${prefixCls}__icon--default`);
34+
expect(wrapper).toHaveStyle({
35+
background: 'rgb(33, 119, 184)',
36+
});
37+
rerender(
38+
<StatusTag color="#2177b8" type="fill">
39+
完成
40+
</StatusTag>
41+
);
42+
wrapper = container.querySelector(`.${prefixCls}--fill`);
43+
expect(wrapper).toHaveStyle({
44+
color: 'rgb(33, 119, 184)',
45+
background: 'rgba(33, 119, 184, 0.15)',
46+
});
2547
});
2648
test('should render StatusTag render correct text', () => {
2749
const { container } = render(<StatusTag>自定义文案</StatusTag>);
28-
const textWapper = container.querySelector(`.${prefixCls}__text`)!;
29-
expect(textWapper.innerHTML).toEqual('自定义文案');
50+
const textWarper = container.querySelector(`.${prefixCls}__text`)!;
51+
expect(textWarper.innerHTML).toEqual('自定义文案');
3052
});
3153
test('should render StatusTag loading', () => {
3254
const { container } = render(<StatusTag loading>自定义文案</StatusTag>);
33-
const loadingWapper = container.querySelector(`.ant-spin-spinning`)!;
34-
expect(loadingWapper).toBeInTheDocument();
55+
const loadingWarper = container.querySelector(`.ant-spin-spinning`)!;
56+
expect(loadingWarper).toBeInTheDocument();
3557
});
3658
});

‎src/statusTag/demos/basic.tsx‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,46 @@
1-
import React from 'react';
2-
import { Space } from 'antd';
1+
import React, { useState } from 'react';
2+
import { Divider, Radio, Space } from 'antd';
33
import { StatusTag } from 'dt-react-component';
4+
import { StatusTagType } from 'dt-react-component/statusTag';
45

56
export default () => {
7+
const presets = ['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink'];
8+
9+
const [type, setType] = useState<StatusTagType>('default');
10+
611
return (
7-
<Space direction="vertical">
8-
<StatusTag type="run">运行中</StatusTag>
9-
<StatusTag type="success">成功</StatusTag>
10-
<StatusTag type="stopped">取消</StatusTag>
11-
<StatusTag type="error">运行失败</StatusTag>
12-
<StatusTag type="warning">提交中</StatusTag>
13-
</Space>
12+
<>
13+
<Radio.Group value={type} onChange={(e) => setType(e.target.value)}>
14+
<Radio.Button value="default">无外边框</Radio.Button>
15+
<Radio.Button value="outline">有外边框</Radio.Button>
16+
<Radio.Button value="fill">有背景色</Radio.Button>
17+
</Radio.Group>
18+
<Divider orientation="left">Presets</Divider>
19+
<Space direction="vertical">
20+
{presets.map((preset) => (
21+
<StatusTag key={preset} type={type} color={preset}>
22+
{preset}
23+
</StatusTag>
24+
))}
25+
</Space>
26+
<Divider orientation="left">Custom</Divider>
27+
<Space direction="vertical">
28+
<StatusTag type={type} color="#f50">
29+
#f50
30+
</StatusTag>
31+
<StatusTag type={type} color="rgb(45, 183, 245)">
32+
rgb(45, 183, 245)
33+
</StatusTag>
34+
<StatusTag type={type} color="#a31980">
35+
#a31980
36+
</StatusTag>
37+
<StatusTag type={type} color="#0fd5e8">
38+
#0fd5e8
39+
</StatusTag>
40+
<StatusTag type={type} color="#3D446E" background="#EBECF0">
41+
#3D446E
42+
</StatusTag>
43+
</Space>
44+
</>
1445
);
1546
};

‎src/statusTag/demos/border.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/statusTag/demos/colorful.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/statusTag/demos/icon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { SketchOutlined } from '@ant-design/icons';
3+
import { Space } from 'antd';
4+
import { StatusTag } from 'dt-react-component';
5+
6+
export default () => {
7+
return (
8+
<Space direction="vertical">
9+
<StatusTag color="green" type="outline" icon={<SketchOutlined />}>
10+
成功
11+
</StatusTag>
12+
<StatusTag color="blue" icon={<SketchOutlined />}>
13+
运行中
14+
</StatusTag>
15+
<StatusTag color="yellow" type="fill" icon={<SketchOutlined />}>
16+
运行中
17+
</StatusTag>
18+
<StatusTag color="#2f10fb" type="fill" icon={<SketchOutlined />}>
19+
运行中
20+
</StatusTag>
21+
</Space>
22+
);
23+
};

‎src/statusTag/demos/loading.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { StatusTag } from 'dt-react-component';
55
export default () => {
66
return (
77
<Space direction="vertical">
8-
<StatusTag type="success" showBorder={false} loading>
8+
<StatusTag color="green" type="outline" loading>
99
成功
1010
</StatusTag>
11-
<StatusTag type="run" loading>
11+
<StatusTag color="blue" type="outline" loading>
1212
运行中
1313
</StatusTag>
1414
</Space>

‎src/statusTag/demos/status.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
2+
import { Space } from 'antd';
23
import { StatusTag } from 'dt-react-component';
34

45
export default () => {
56
return (
6-
<>
7-
<StatusTag type="run" showBorder={false} />
8-
<StatusTag type="success" showBorder={false} />
9-
<StatusTag type="stopped" showBorder={false} />
10-
<StatusTag type="warning" showBorder={false} />
11-
</>
7+
<Space direction="horizontal">
8+
<StatusTag color="blue" />
9+
<StatusTag color="green" />
10+
<StatusTag color="purple" />
11+
<StatusTag color="yellow" />
12+
</Space>
1213
);
1314
};

‎src/statusTag/index.md‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,19 @@ StatusTag 组件作用于任务运行状态效果展示
1616

1717
## 示例
1818

19-
<code src="./demos/basic.tsx" description="内置五种不同的 `type` ">基础使用</code>
19+
<code src="./demos/basic.tsx" description="内置6种不同的`color`，三种类型`default | outline | fill`，同时我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">基础使用</code>
2020
<code src="./demos/status.tsx" description="用于表示状态的小圆点">状态点</code>
21-
<code src="./demos/border.tsx" description="通过设置 `showBorder={false}` 可以隐藏外边框，默认为存在外边框">外边框</code>
22-
<code src="./demos/colorful.tsx" description="我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">自定义状态</code>
2321
<code src="./demos/loading.tsx" description="通过设置 `loading` 可以设置加载中的状态标签">加载中</code>
22+
<code src="./demos/icon.tsx" description="可以通过`icon`自定义图标">加载中</code>
2423

2524
## API
2625

2726
### StatusTag
2827

29-
| 参数 | 说明 | 类型 | 默认值 |
30-
| ---------- | -------------------------------------------------------- | --------------------------------------------------------- | ----------- |
31-
| type | 设置状态类型 | `'warning' \| 'error' \| 'success' \| 'run' \| 'stopped'` | `'success'` |
32-
| showBorder | 是否展示外面的 border | `boolean` | `true` |
33-
| color | 自定义颜色(当 type 所支持的颜色不满足时可用，优先级更高) | `string` | - |
34-
| onClick | 点击事件 | `() => void` | - |
35-
| loading | 设置状态标签载入状态 | `boolean` | `false` |
28+
| 参数 | 说明 | 类型 | 默认值 |
29+
| ---------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------- | --- |
30+
| color | 状态色，内置了六种颜色，不满足时可自定义(仅支持 RGB 和十六进制颜色) | `blue \| yellow \| green \| gray \| red \| purple \| cyan \| pink` \| `string` | `success` | - |
31+
| icon | 自定义图标 | `React.ReactNode` | - |
32+
| loading | 状态标签载入状态 | `boolean` | `false` |
33+
| type | 状态类型 | `default \| outline \| fill` | `default` |
34+
| background | 背景颜色，仅在自定义颜色且为 fill 的情况下生效 | `string` | `--` |

0 commit comments

Comments
 (0)