Skip to content

Commit 39a96b9

Browse files
kongshan-zhuyukongshan-zhuyu
authored
Refactor/status tag (#310)
* refactor: removed unnecessary code * refactor(StatusTag): modify StatusTag component demos * refactor: modify StatusTagProps to IStatusTagProps * refactor: modify BlockHeaderProps to IBlockHeaderProps
1 parent b2330bd commit 39a96b9

File tree

7 files changed

+93
-92
lines changed

7 files changed

+93
-92
lines changed

‎src/blockHeader/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import './style.scss';
66

77
export declare type SizeType = 'small' | 'middle' | undefined;
88

9-
export interface BlockHeaderProps {
9+
export interface IBlockHeaderProps {
1010
// 标题
1111
title: string;
1212
// 标题前的图标，默认是一个色块
@@ -37,7 +37,7 @@ export interface BlockHeaderProps {
3737
onChange?: (expand: boolean) => void;
3838
children?: React.ReactNode;
3939
}
40-
const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
40+
const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
4141
const prefixCls = 'dtc-block-header';
4242
const {
4343
title,

‎src/statusTag/demos/basic.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Space } from 'antd';
3+
import { StatusTag } from 'dt-react-component';
4+
5+
export default () => {
6+
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>
14+
);
15+
};

‎src/statusTag/demos/border.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState } from 'react';
2+
import { Radio, Space } from 'antd';
3+
import { StatusTag } from 'dt-react-component';
4+
5+
export default () => {
6+
const [showBorder, setShowBorder] = useState<boolean>(true);
7+
return (
8+
<>
9+
<Space direction="vertical">
10+
<Radio.Group value={showBorder} onChange={(e) => setShowBorder(e.target.value)}>
11+
<Radio.Button value>Default</Radio.Button>
12+
<Radio.Button value={false}>无外边框</Radio.Button>
13+
</Radio.Group>
14+
<br />
15+
<StatusTag type="run" showBorder={showBorder}>
16+
运行中
17+
</StatusTag>
18+
<StatusTag color="rgb(45, 183, 245)" showBorder={showBorder}>
19+
rgb(45, 183, 245)
20+
</StatusTag>
21+
</Space>
22+
</>
23+
);
24+
};

‎src/statusTag/demos/colorful.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { Divider, Space } from 'antd';
3+
import { StatusTag } from 'dt-react-component';
4+
import { StatusTagType } from '../index';
5+
6+
export default () => {
7+
const types = ['warning', 'error', 'success', 'run', 'stopped'] as StatusTagType[];
8+
9+
return (
10+
<>
11+
<Divider orientation="left">Presets</Divider>
12+
<Space direction="vertical">
13+
{types.map((type) => (
14+
<StatusTag key={type} type={type}>
15+
{type}
16+
</StatusTag>
17+
))}
18+
</Space>
19+
<Divider orientation="left">Custom</Divider>
20+
<Space direction="vertical">
21+
<StatusTag color="#f50">#f50</StatusTag>
22+
<StatusTag color="rgb(45, 183, 245)">rgb(45, 183, 245)</StatusTag>
23+
<StatusTag color="hsl(102, 53%, 61%)">hsl(102, 53%, 61%)</StatusTag>
24+
<StatusTag color="hwb(205 6% 9%)">hwb(205 6% 9%)</StatusTag>
25+
</Space>
26+
</>
27+
);
28+
};

‎src/statusTag/demos/status.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { StatusTag } from 'dt-react-component';
3+
4+
export default () => {
5+
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+
</>
12+
);
13+
};

‎src/statusTag/index.md‎

Lines changed: 8 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -8,102 +8,23 @@ demo:
88

99
# StatusTag 状态标签
1010

11+
通过不同颜色的圆形图标区分状态
12+
1113
## 何时使用
1214

1315
StatusTag 组件作用于任务运行状态效果展示
1416

1517
## 示例
1618

17-
```jsx
18-
/**
19-
* title: "基础使用"
20-
*/
21-
import React from 'react';
22-
import { StatusTag } from 'dt-react-component';
23-
24-
export default () => {
25-
return (
26-
<>
27-
<StatusTag type="run">运行中</StatusTag>
28-
<StatusTag type="success">成功</StatusTag>
29-
<StatusTag type="stopped">取消</StatusTag>
30-
<StatusTag type="error">运行失败</StatusTag>
31-
<StatusTag type="warning">提交中</StatusTag>
32-
</>
33-
);
34-
};
35-
```
36-
37-
```jsx
38-
/**
39-
* title: "取消外边框"
40-
*/
41-
import React from 'react';
42-
import { StatusTag } from 'dt-react-component';
43-
44-
export default () => {
45-
return (
46-
<>
47-
<StatusTag type="run" showBorder={false}>
48-
运行中
49-
</StatusTag>
50-
<StatusTag type="error" showBorder={false}>
51-
运行失败
52-
</StatusTag>
53-
<StatusTag type="success" showBorder={false}>
54-
成功
55-
</StatusTag>
56-
<StatusTag type="stopped" showBorder={false}>
57-
取消
58-
</StatusTag>
59-
<StatusTag type="warning" showBorder={false}>
60-
等待提交
61-
</StatusTag>
62-
</>
63-
);
64-
};
65-
```
66-
67-
```jsx
68-
/**
69-
* title: "自定义颜色"
70-
*/
71-
import React from 'react';
72-
import { StatusTag } from 'dt-react-component';
73-
74-
export default () => {
75-
return (
76-
<>
77-
<StatusTag type="run" color="#bc84a8">
78-
运行中
79-
</StatusTag>
80-
<StatusTag type="run" color="#2177b8" showBorder={false}>
81-
运行中
82-
</StatusTag>
83-
</>
84-
);
85-
};
86-
```
87-
88-
```jsx
89-
/**
90-
* title: "圆点"
91-
*/
92-
import React from 'react';
93-
import { StatusTag } from 'dt-react-component';
94-
95-
export default () => {
96-
return (
97-
<>
98-
<StatusTag type="run" showBorder={false} />
99-
<StatusTag color="#2177b8" showBorder={false} />
100-
</>
101-
);
102-
};
103-
```
19+
<code src="./demos/basic.tsx" description="内置五种不同的 `type` ">基础使用</code>
20+
<code src="./demos/status.tsx" description="用于表示状态的小圆点">状态点</code>
21+
<code src="./demos/colorful.tsx" description="我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">自定义状态</code>
22+
<code src="./demos/border.tsx" description="通过设置 `showBorder={false}` 可以隐藏外边框，默认为存在外边框">外边框</code>
10423

10524
## API
10625

26+
### StatusTag
27+
10728
| 参数 | 说明 | 类型 | 默认值 |
10829
| ---------- | -------------------------------------------------------- | --------------------------------------------------------- | ----------- |
10930
| type | 设置状态类型 | `'warning' \| 'error' \| 'success' \| 'run' \| 'stopped'` | `'success'` |

‎src/statusTag/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import './style.scss';
44

55
export type StatusTagType = 'warning' | 'error' | 'success' | 'run' | 'stopped';
66

7-
export interface StatusTagProps extends React.HTMLAttributes<HTMLDivElement> {
7+
export interface IStatusTagProps extends React.HTMLAttributes<HTMLDivElement> {
88
type?: StatusTagType;
99
className?: string;
1010
showBorder?: boolean;
@@ -13,7 +13,7 @@ export interface StatusTagProps extends React.HTMLAttributes<HTMLDivElement> {
1313
onClick?: () => void;
1414
}
1515

16-
const StatusTag: React.FC<StatusTagProps> = function StatusTag(props) {
16+
const StatusTag: React.FC<IStatusTagProps> = function StatusTag(props) {
1717
const { className, type = 'success', showBorder = true, color, ...other } = props;
1818
const prefixCls = 'dtc-statusTag';
1919

@@ -28,7 +28,7 @@ const StatusTag: React.FC<StatusTagProps> = function StatusTag(props) {
2828
return (
2929
<div {...other} className={classes}>
3030
<div className={statusClass} style={style} />
31-
<span className={`${prefixCls}__text`}>{props.children || ''}</span>
31+
<span className={`${prefixCls}__text`}>{props.children}</span>
3232
</div>
3333
);
3434
};

0 commit comments

Comments
 (0)