Skip to content

Commit 7b086ad

Browse files
liuxy0551liuxy0551
authored
refactor progressLine props (#321)
* feat: use git cz, simplify deployment command * refactor: progress line props * feat: reactNode --------- Co-authored-by: liuyi <> Co-authored-by: liuyi <[email protected]>
1 parent a6b032d commit 7b086ad

File tree

8 files changed

+162
-304
lines changed

8 files changed

+162
-304
lines changed

‎src/progressLine/__test__/progressLine.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect';
4+
import ProgressLine from '..';
5+
6+
describe('test ProgressLine', () => {
7+
it('renders title and percent', () => {
8+
const { getByText } = render(<ProgressLine title="Test Title" percent="50%" />);
9+
expect(getByText('Test Title')).toBeInTheDocument();
10+
expect(getByText('50%')).toBeInTheDocument();
11+
});
12+
13+
it('renders with custom color', () => {
14+
const { getByTestId } = render(<ProgressLine color="#FF0000" />);
15+
expect(getByTestId('progress-line')).toHaveStyle('background-color: #FF0000');
16+
});
17+
18+
it('renders with custom width', () => {
19+
const { getByTestId } = render(<ProgressLine width="500px" />);
20+
expect(getByTestId('progress-line-wrap')).toHaveStyle('width: 500px');
21+
});
22+
});

‎src/progressLine/demos/color.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { useState } from 'react';
2+
import { ProgressLine } from 'dt-react-component';
3+
4+
export default () => {
5+
const [color, setColor] = useState('#e66465');
6+
7+
return (
8+
<>
9+
<input
10+
type="color"
11+
value={color}
12+
onChange={(e) => setColor(e.target.value)}
13+
style={{ marginBottom: 16 }}
14+
/>
15+
<ProgressLine title="原子标签：25" color={color} percent="60%" />
16+
</>
17+
);
18+
};

‎src/progressLine/demos/percent.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { useState } from 'react';
2+
import { ProgressLine } from 'dt-react-component';
3+
import { InputNumber } from 'antd';
4+
5+
export default () => {
6+
const [num, setNum] = useState(60);
7+
8+
return (
9+
<>
10+
<InputNumber
11+
value={num}
12+
min={0}
13+
max={100}
14+
onChange={(value: any) => setNum(value)}
15+
style={{ marginBottom: 16 }}
16+
/>
17+
<ProgressLine title="衍生标签：35" color="#3BCEFF" percent={`${num}%`} />
18+
</>
19+
);
20+
};

‎src/progressLine/demos/title.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { useState } from 'react';
2+
import { ProgressLine } from 'dt-react-component';
3+
import { Input } from 'antd';
4+
5+
export default () => {
6+
const [title, setTitle] = useState('衍生标签：35');
7+
8+
return (
9+
<>
10+
<Input
11+
value={title}
12+
onChange={(e) => setTitle(e.target.value)}
13+
style={{ marginBottom: 16, width: 300 }}
14+
/>
15+
<ProgressLine title={title} color="#3BCEFF" percent="60%" />
16+
</>
17+
);
18+
};

‎src/progressLine/demos/width.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { useState } from 'react';
2+
import { ProgressLine } from 'dt-react-component';
3+
4+
export default () => {
5+
const [width, setWidth] = useState('200');
6+
7+
return (
8+
<>
9+
<input
10+
type="range"
11+
value={width}
12+
min="100"
13+
max="400"
14+
onChange={(e) => setWidth(e.target.value)}
15+
style={{ marginBottom: 16 }}
16+
/>
17+
<ProgressLine color="#3BCEFF" title="原子标签：25" percent="60%" width={`${width}px`} />
18+
</>
19+
);
20+
};

‎src/progressLine/index.md‎

Lines changed: 13 additions & 257 deletions
Original file line numberDiff line numberDiff line change
@@ -10,266 +10,22 @@ demo:
1010

1111
## 何时使用
1212

13-
ProgressLine 组件作用于进度条状态效果展示
13+
ProgressLine 组件作用于进度条状态 + 文案的效果展示
1414

1515
## 示例
1616

17-
```jsx
18-
import React from 'react';
19-
import { ProgressLine } from 'dt-react-component';
20-
21-
export default () => {
22-
const wrapperStyle: any = { display: 'flex', alignItems: 'center', marginBottom: '14px' };
23-
const labelStyle: any = { margin: '0 16px', width: '18%', textAlign: 'right' };
24-
const defaultStyle = 'rgb(159,148,244)';
25-
26-
return (
27-
<div>
28-
<div style={wrapperStyle}>
29-
<div style={labelStyle}>禁用头部描述:</div>
30-
<ProgressLine
31-
needTitle={false}
32-
color="#3BCEFF"
33-
title="衍生标签"
34-
num={20}
35-
percent="20%"
36-
/>
37-
&nbsp;
38-
</div>
39-
<div style={wrapperStyle}>
40-
<div style={labelStyle}>默认使用:</div>
41-
<ProgressLine
42-
color="#3BCEFF"
43-
title="衍生标签"
44-
num={20}
45-
percent="20%"
46-
width="280px"
47-
/>
48-
&nbsp;
49-
</div>
50-
<div style={wrapperStyle}>
51-
<div style={labelStyle}>修改 title:</div>
52-
<ProgressLine
53-
color="#3BCEFF"
54-
title="原子标签"
55-
num={20}
56-
percent="20%"
57-
width="280px"
58-
/>
59-
&nbsp;
60-
</div>
61-
<div style={wrapperStyle}>
62-
<div style={labelStyle}>修改 color:</div>
63-
<ProgressLine
64-
color={defaultStyle}
65-
title="原子标签"
66-
num={20}
67-
percent="20%"
68-
width="280px"
69-
/>
70-
&nbsp;
71-
</div>
72-
<div style={wrapperStyle}>
73-
<div style={labelStyle}>修改 num:</div>
74-
<ProgressLine
75-
color="#3BCEFF"
76-
title="原子标签"
77-
num={45}
78-
percent="45%"
79-
width="280px"
80-
/>
81-
&nbsp;
82-
</div>
83-
<div style={wrapperStyle}>
84-
<div style={labelStyle}>修改 width:</div>
85-
<ProgressLine
86-
color="#3BCEFF"
87-
title="原子标签"
88-
num={20}
89-
percent="20%"
90-
width="350px"
91-
/>
92-
&nbsp;
93-
</div>
94-
<div style={wrapperStyle}>
95-
<div style={labelStyle}>修改 percent:</div>
96-
<ProgressLine
97-
color="#3BCEFF"
98-
title="原子标签"
99-
num={75}
100-
percent="75%"
101-
width="280px"
102-
/>
103-
&nbsp;
104-
</div>
105-
</div>
106-
);
107-
};
108-
```
109-
110-
```jsx
111-
/**
112-
* title: "控制进度条描述"
113-
*/
114-
import React, { useState } from 'react';
115-
import { ProgressLine } from 'dt-react-component';
116-
import { Button } from 'antd';
117-
118-
export default () => {
119-
const [needTitle, setNeedTitle] = useState(false);
120-
121-
return (
122-
<>
123-
<Button
124-
type="primary"
125-
onClick={() => setNeedTitle((i) => !i)}
126-
style={{ marginBottom: 16 }}
127-
>
128-
设置是否需要 title
129-
</Button>
130-
<ProgressLine
131-
needTitle={needTitle}
132-
color="#3BCEFF"
133-
title="衍生标签"
134-
num={20}
135-
percent="20%"
136-
/>
137-
</>
138-
);
139-
};
140-
```
141-
142-
```jsx
143-
/**
144-
* title: "控制描述属性"
145-
*/
146-
import React, { useState } from 'react';
147-
import { ProgressLine } from 'dt-react-component';
148-
import { Input } from 'antd';
149-
150-
export default () => {
151-
const [title, setTitle] = useState('衍生标签');
152-
153-
return (
154-
<>
155-
<Input
156-
value={title}
157-
onChange={(e) => setTitle(e.target.value)}
158-
style={{ marginBottom: 16 }}
159-
></Input>
160-
<ProgressLine color="#3BCEFF" title={title} num={35} percent="60%" />
161-
</>
162-
);
163-
};
164-
```
165-
166-
```jsx
167-
/**
168-
* title: "控制进度"
169-
*/
170-
import React, { useState } from 'react';
171-
import { ProgressLine } from 'dt-react-component';
172-
import { InputNumber } from 'antd';
173-
174-
export default () => {
175-
const [num, setNum] = useState(60);
176-
177-
return (
178-
<>
179-
<InputNumber
180-
value={num}
181-
onChange={(value) => setNum(value)}
182-
style={{ marginBottom: 16 }}
183-
></InputNumber>
184-
<ProgressLine color="#3BCEFF" title="衍生标签" num={num} percent="60%" />
185-
</>
186-
);
187-
};
188-
```
189-
190-
```jsx
191-
/**
192-
* title: "控制百分比"
193-
*/
194-
import React, { useState } from 'react';
195-
import { ProgressLine } from 'dt-react-component';
196-
import { InputNumber } from 'antd';
197-
198-
export default () => {
199-
const [num, setNum] = useState(60);
200-
201-
return (
202-
<>
203-
<InputNumber
204-
value={num}
205-
onChange={(value) => setNum(value)}
206-
style={{ marginBottom: 16 }}
207-
></InputNumber>
208-
<ProgressLine color="#3BCEFF" title="衍生标签" num={num} percent={`${num}%`} />
209-
</>
210-
);
211-
};
212-
```
213-
214-
```jsx
215-
/**
216-
* title: "控制颜色"
217-
*/
218-
import React, { useState } from 'react';
219-
import { ProgressLine } from 'dt-react-component';
220-
221-
export default () => {
222-
const [color, setColor] = useState('#e66465');
223-
224-
return (
225-
<>
226-
<input type="color" value={color} onChange={(e) => setColor(e.target.value)} />
227-
<ProgressLine color={color} title="原子标签" num={35} percent="60%" />
228-
</>
229-
);
230-
};
231-
```
232-
233-
```jsx
234-
/**
235-
* title: "控制宽度"
236-
*/
237-
import React, { useState } from 'react';
238-
import { ProgressLine } from 'dt-react-component';
239-
240-
export default () => {
241-
const [width, setWidth] = useState('100');
242-
243-
console.log('width:', width);
244-
return (
245-
<>
246-
<input
247-
type="range"
248-
value={width}
249-
min="0"
250-
max="1000"
251-
onChange={(e) => setWidth(e.target.value)}
252-
/>
253-
<ProgressLine
254-
color="#3BCEFF"
255-
title="原子标签"
256-
num={35}
257-
percent="60%"
258-
width={`${width}px`}
259-
/>
260-
</>
261-
);
262-
};
263-
```
17+
<code src="./demos/title.tsx" description="进度条顶部左侧内容，支持 Tooltip">控制标题</code>
18+
<code src="./demos/percent.tsx" description="进度条顶部右侧百分比，要求带 %">控制百分比</code>
19+
<code src="./demos/color.tsx" description="进度条的颜色">控制颜色</code>
20+
<code src="./demos/width.tsx" description="进度条的宽度">控制宽度</code>
26421

26522
## API
26623

267-
| 参数 | 说明 | 类型 | 默认值 |
268-
| --------- | -------------------------------------------------- | ------------------ | ----------- |
269-
| className | 设置组件 className | `string` | - |
270-
| needTitle | 设置进度条头部描述是否展示，可选值为 true 或 false | `boolean` | `true` |
271-
| title | 设置进度条头部描述名 | `string \| number` | - |
272-
| num | 设置进度条头部描述属性值 | `string \| number` | - |
273-
| percent | 设置进度条头部描述属性值百分比 | `string \| number` | - |
274-
| color | 设置进度条颜色 | `string` | `'#3BCEFF'` |
275-
| width | 设置组件长度 | `string \| number` | `'280px'` |
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| ------------ | ------------------------------ | -------------------------------------------------------------------------------------------------- | ----------- |
26+
| className | 设置组件 className | `string` | - |
27+
| title | 设置进度条顶部左侧内容 | `ReactNode` | `''` |
28+
| percent | 设置进度条顶部百分比，要求带 % | `string` | `'0%'` |
29+
| color | 设置进度条颜色 | `string` | `'#3BCEFF'` |
30+
| width | 设置组件长度 | `string \| number` | `'280px'` |
31+
| tooltipProps | title 支持 Tooltip | [antd4 TooltipProps](https://4x.ant.design/components/tooltip-cn/#%E5%85%B1%E5%90%8C%E7%9A%84-API) | - |

0 commit comments

Comments
 (0)