Skip to content

Commit 798aadc

Browse files
wangxueliangwangxueliang
committed
feat: update progress
1 parent 4193d24 commit 798aadc

File tree

5 files changed

+185
-83
lines changed

5 files changed

+185
-83
lines changed

‎components/progress/circle.jsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Circle as VCCircle } from '../vc-progress';
2+
import { validProgress } from './utils';
3+
import { ProgressProps } from './progress';
4+
5+
const statusColorMap = {
6+
normal: '#108ee9',
7+
exception: '#ff5500',
8+
success: '#87d068',
9+
};
10+
11+
function getPercentage({ percent, successPercent }) {
12+
const ptg = validProgress(percent);
13+
if (!successPercent) return ptg;
14+
15+
const successPtg = validProgress(successPercent);
16+
return [successPercent, validProgress(ptg - successPtg)];
17+
}
18+
19+
function getStrokeColor({ progressStatus, successPercent, strokeColor }) {
20+
const color = strokeColor || statusColorMap[progressStatus];
21+
if (!successPercent) return color;
22+
return [statusColorMap.success, color];
23+
}
24+
25+
const Circle = {
26+
functional: true,
27+
render(h, context) {
28+
const { props, children } = context;
29+
const {
30+
prefixCls,
31+
width,
32+
strokeWidth,
33+
trailColor,
34+
strokeLinecap,
35+
gapPosition,
36+
gapDegree,
37+
type,
38+
} = props;
39+
const circleSize = width || 120;
40+
const circleStyle = {
41+
width: circleSize,
42+
height: circleSize,
43+
fontSize: circleSize * 0.15 + 6,
44+
};
45+
const circleWidth = strokeWidth || 6;
46+
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
47+
const gapDeg = gapDegree || (type === 'dashboard' && 75);
48+
49+
return (
50+
<div class={`${prefixCls}-inner`} style={circleStyle}>
51+
<VCCircle
52+
percent={getPercentage(props)}
53+
strokeWidth={circleWidth}
54+
trailWidth={circleWidth}
55+
strokeColor={getStrokeColor(props)}
56+
strokeLinecap={strokeLinecap}
57+
trailColor={trailColor}
58+
prefixCls={prefixCls}
59+
gapDegree={gapDeg}
60+
gapPosition={gapPos}
61+
/>
62+
{children}
63+
</div>
64+
);
65+
},
66+
};
67+
68+
export default Circle;

‎components/progress/demo/segment.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,17 @@ A standard progress bar.
1010

1111
```html
1212
<template>
13-
<a-tooltip title="3 done / 3 in progress / 4 to do">
14-
<a-progress :percent="60" :successPercent="30" />
15-
</a-tooltip>
13+
<div>
14+
<a-tooltip title="3 done / 3 in progress / 4 to do">
15+
<a-progress :percent="60" :successPercent="30" />
16+
</a-tooltip>
17+
<a-tooltip title="3 done / 3 in progress / 4 to do">
18+
<a-progress :percent="60" :successPercent="30" type="circle" />
19+
</a-tooltip>
20+
<a-tooltip title="3 done / 3 in progress / 4 to do">
21+
<a-progress :percent="60" :successPercent="30" type="dashboard" />
22+
</a-tooltip>
23+
</div>
1624
</template>
1725
```
1826

‎components/progress/line.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { validProgress } from './utils';
2+
import { ProgressProps } from './progress';
3+
4+
const Line = {
5+
functional: true,
6+
render(h, context) {
7+
const { props, children } = context;
8+
const {
9+
prefixCls,
10+
percent,
11+
successPercent,
12+
strokeWidth,
13+
size,
14+
strokeColor,
15+
strokeLinecap,
16+
} = props;
17+
const percentStyle = {
18+
width: `${validProgress(percent)}%`,
19+
height: strokeWidth || (size === 'small' ? 6 : 8),
20+
background: strokeColor,
21+
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
22+
};
23+
const successPercentStyle = {
24+
width: `${validProgress(successPercent)}%`,
25+
height: strokeWidth || (size === 'small' ? 6 : 8),
26+
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
27+
};
28+
const successSegment =
29+
successPercent !== undefined ? (
30+
<div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
31+
) : null;
32+
return (
33+
<div>
34+
<div class={`${prefixCls}-outer`}>
35+
<div class={`${prefixCls}-inner`}>
36+
<div class={`${prefixCls}-bg`} style={percentStyle} />
37+
{successSegment}
38+
</div>
39+
</div>
40+
{children}
41+
</div>
42+
);
43+
},
44+
};
45+
46+
export default Line;

‎components/progress/progress.jsx

Lines changed: 52 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import classNames from 'classnames';
22
import PropTypes from '../_util/vue-types';
33
import { getOptionProps, initDefaultProps } from '../_util/props-util';
4+
import { ConfigConsumerProps } from '../config-provider';
45
import Icon from '../icon';
5-
import { Circle } from '../vc-progress';
6+
import Line from './line';
7+
import Circle from './circle';
8+
import { validProgress } from './utils';
69

710
function addUnit(num, unit) {
811
const unitType = unit || 'px';
912
return num ? num + unitType : null;
1013
}
11-
const statusColorMap = {
12-
normal: '#108ee9',
13-
exception: '#ff5500',
14-
success: '#87d068',
15-
};
1614

1715
export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
1816
export const ProgressSize = PropTypes.oneOf(['default', 'small']);
@@ -35,30 +33,46 @@ export const ProgressProps = {
3533
size: ProgressSize,
3634
};
3735

38-
const validProgress = progress => {
39-
if (!progress || progress < 0) {
40-
return 0;
41-
} else if (progress > 100) {
42-
return 100;
43-
}
44-
return progress;
45-
};
46-
4736
export default {
4837
name: 'AProgress',
4938
props: initDefaultProps(ProgressProps, {
5039
type: 'line',
5140
percent: 0,
5241
showInfo: true,
5342
trailColor: '#f3f3f3',
54-
prefixCls: 'ant-progress',
5543
size: 'default',
44+
gapDegree: 0,
45+
strokeLinecap: 'round',
5646
}),
47+
inject: {
48+
configProvider: { default: () => ({}) },
49+
},
50+
methods: {
51+
renderProcessInfo(prefixCls, progressStatus) {
52+
const { showInfo, format, type, percent, successPercent } = this.$props;
53+
if (!showInfo) return null;
5754

55+
let text;
56+
const textFormatter = format || (percentNumber => `${percentNumber}%`);
57+
const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
58+
if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
59+
text = textFormatter(validProgress(percent), validProgress(successPercent));
60+
} else if (progressStatus === 'exception') {
61+
text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
62+
} else if (progressStatus === 'success') {
63+
text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
64+
}
65+
return (
66+
<span class={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
67+
{text}
68+
</span>
69+
);
70+
},
71+
},
5872
render() {
5973
const props = getOptionProps(this);
6074
const {
61-
prefixCls,
75+
prefixCls: customizePrefixCls,
6276
percent = 0,
6377
status,
6478
format,
@@ -75,84 +89,42 @@ export default {
7589
strokeLinecap = 'round',
7690
...restProps
7791
} = props;
92+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
93+
const prefixCls = getPrefixCls('progress', customizePrefixCls);
94+
7895
const progressStatus =
79-
parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 &&
96+
parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >= 100 &&
8097
!('status' in props)
8198
? 'success'
8299
: status || 'normal';
83-
let progressInfo;
84100
let progress;
85-
const textFormatter = format || (percentNumber => `${percentNumber}%`);
86-
87-
if (showInfo) {
88-
let text;
89-
const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
90-
if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
91-
text = textFormatter(validProgress(percent), validProgress(successPercent));
92-
} else if (progressStatus === 'exception') {
93-
text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
94-
} else if (progressStatus === 'success') {
95-
text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
96-
}
97-
progressInfo = (
98-
<span class={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
99-
{text}
100-
</span>
101-
);
102-
}
101+
const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
103102

103+
// Render progress shape
104104
if (type === 'line') {
105-
const percentStyle = {
106-
width: `${validProgress(percent)}%`,
107-
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
108-
background: strokeColor,
109-
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
110-
};
111-
const successPercentStyle = {
112-
width: `${validProgress(successPercent)}%`,
113-
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
114-
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
105+
const lineProps = {
106+
props: {
107+
...props,
108+
prefixCls,
109+
},
115110
};
116-
const successSegment =
117-
successPercent !== undefined ? (
118-
<div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
119-
) : null;
120111
progress = (
121-
<div>
122-
<div class={`${prefixCls}-outer`}>
123-
<div class={`${prefixCls}-inner`}>
124-
<div class={`${prefixCls}-bg`} style={percentStyle} />
125-
{successSegment}
126-
</div>
127-
</div>
112+
<Line {...lineProps}>
128113
{progressInfo}
129-
</div>
114+
</Line>
130115
);
131116
} else if (type === 'circle' || type === 'dashboard') {
132-
const circleSize = width || 120;
133-
const circleStyle = {
134-
width: addUnit(circleSize),
135-
height: addUnit(circleSize),
136-
fontSize: addUnit(circleSize * 0.15 + 6),
117+
const circleProps = {
118+
props: {
119+
...props,
120+
prefixCls,
121+
progressStatus,
122+
},
137123
};
138-
const circleWidth = strokeWidth || 6;
139-
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
140-
const gapDeg = gapDegree || (type === 'dashboard' && 75);
141124
progress = (
142-
<div class={`${prefixCls}-inner`} style={circleStyle}>
143-
<Circle
144-
percent={validProgress(percent)}
145-
strokeWidth={circleWidth}
146-
trailWidth={circleWidth}
147-
strokeColor={strokeColor || statusColorMap[progressStatus]}
148-
strokeLinecap={strokeLinecap}
149-
trailColor={trailColor}
150-
prefixCls={prefixCls}
151-
gapDegree={gapDeg || 0}
152-
gapPosition={gapPos}
153-
/>
125+
<Circle {...circleProps}>
154126
{progressInfo}
155-
</div>
127+
</Circle>
156128
);
157129
}
158130

‎components/progress/utils.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function validProgress(progress) {
2+
if (!progress || progress < 0) {
3+
return 0;
4+
} else if (progress > 100) {
5+
return 100;
6+
}
7+
return progress;
8+
};

0 commit comments

Comments
 (0)