@rc-component/progress 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/es/Circle/index.js +7 -7
- package/es/Line.js +5 -5
- package/es/common.js +2 -2
- package/es/interface.d.ts +2 -2
- package/lib/Circle/index.js +7 -7
- package/lib/Line.js +5 -5
- package/lib/common.js +2 -2
- package/lib/interface.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,16 +83,16 @@ export default () => (
|
|
|
83
83
|
<td>Stroke color.</td>
|
|
84
84
|
</tr>
|
|
85
85
|
<tr>
|
|
86
|
-
<td>
|
|
86
|
+
<td>railWidth</td>
|
|
87
87
|
<td>Number</td>
|
|
88
88
|
<td>1</td>
|
|
89
|
-
<td>Width of the
|
|
89
|
+
<td>Width of the rail stroke. Unit is percentage of SVG canvas size. Rail is always centered relative to actual progress path. If railWidth is not defined, it is the same as strokeWidth.</td>
|
|
90
90
|
</tr>
|
|
91
91
|
<tr>
|
|
92
|
-
<td>
|
|
92
|
+
<td>railColor</td>
|
|
93
93
|
<td>String</td>
|
|
94
94
|
<td>#D9D9D9</td>
|
|
95
|
-
<td>Color for lighter
|
|
95
|
+
<td>Color for lighter rail stroke underneath the actual progress path.</td>
|
|
96
96
|
</tr>
|
|
97
97
|
<tr>
|
|
98
98
|
<td>strokeLinecap</td>
|
package/es/Circle/index.js
CHANGED
|
@@ -18,10 +18,10 @@ const Circle = props => {
|
|
|
18
18
|
styles = {},
|
|
19
19
|
steps,
|
|
20
20
|
strokeWidth,
|
|
21
|
-
|
|
21
|
+
railWidth,
|
|
22
22
|
gapDegree = 0,
|
|
23
23
|
gapPosition,
|
|
24
|
-
|
|
24
|
+
railColor,
|
|
25
25
|
strokeLinecap,
|
|
26
26
|
style,
|
|
27
27
|
className,
|
|
@@ -59,7 +59,7 @@ const Circle = props => {
|
|
|
59
59
|
id: mergedId,
|
|
60
60
|
loading
|
|
61
61
|
});
|
|
62
|
-
const circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition,
|
|
62
|
+
const circleStyle = getCircleStyle(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, railColor, mergedStrokeLinecap, strokeWidth);
|
|
63
63
|
const paths = useTransitionDuration();
|
|
64
64
|
const getStokeList = () => {
|
|
65
65
|
let stackPtg = 0;
|
|
@@ -101,7 +101,7 @@ const Circle = props => {
|
|
|
101
101
|
const stepPtg = 100 / stepCount;
|
|
102
102
|
let stackPtg = 0;
|
|
103
103
|
return new Array(stepCount).fill(null).map((_, index) => {
|
|
104
|
-
const color = index <= current - 1 ? strokeColorList[0] :
|
|
104
|
+
const color = index <= current - 1 ? strokeColorList[0] : railColor;
|
|
105
105
|
const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
|
|
106
106
|
const circleStyleForStack = getCircleStyle(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepGap);
|
|
107
107
|
stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepGap) * 100 / perimeterWithoutGap;
|
|
@@ -134,13 +134,13 @@ const Circle = props => {
|
|
|
134
134
|
id: id,
|
|
135
135
|
role: "presentation"
|
|
136
136
|
}, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
|
|
137
|
-
className: cls(`${prefixCls}-circle-
|
|
137
|
+
className: cls(`${prefixCls}-circle-rail`, classNames.rail),
|
|
138
138
|
r: radius,
|
|
139
139
|
cx: halfSize,
|
|
140
140
|
cy: halfSize,
|
|
141
|
-
stroke:
|
|
141
|
+
stroke: railColor,
|
|
142
142
|
strokeLinecap: mergedStrokeLinecap,
|
|
143
|
-
strokeWidth:
|
|
143
|
+
strokeWidth: railWidth || strokeWidth,
|
|
144
144
|
style: {
|
|
145
145
|
...circleStyle,
|
|
146
146
|
...styles.rail
|
package/es/Line.js
CHANGED
|
@@ -14,8 +14,8 @@ const Line = props => {
|
|
|
14
14
|
strokeLinecap,
|
|
15
15
|
strokeWidth,
|
|
16
16
|
style,
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
railColor,
|
|
18
|
+
railWidth,
|
|
19
19
|
transition,
|
|
20
20
|
loading,
|
|
21
21
|
...restProps
|
|
@@ -52,11 +52,11 @@ const Line = props => {
|
|
|
52
52
|
preserveAspectRatio: "none",
|
|
53
53
|
style: style
|
|
54
54
|
}, restProps), /*#__PURE__*/React.createElement("path", {
|
|
55
|
-
className: `${prefixCls}-line-
|
|
55
|
+
className: `${prefixCls}-line-rail`,
|
|
56
56
|
d: pathString,
|
|
57
57
|
strokeLinecap: strokeLinecap,
|
|
58
|
-
stroke:
|
|
59
|
-
strokeWidth:
|
|
58
|
+
stroke: railColor,
|
|
59
|
+
strokeWidth: railWidth || strokeWidth,
|
|
60
60
|
fillOpacity: "0"
|
|
61
61
|
}), percentList.map((ptg, index) => {
|
|
62
62
|
let dashPercent = 1;
|
package/es/common.js
CHANGED
package/es/interface.d.ts
CHANGED
|
@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
|
|
|
3
3
|
export interface ProgressProps {
|
|
4
4
|
id?: string;
|
|
5
5
|
strokeWidth?: number;
|
|
6
|
-
|
|
6
|
+
railWidth?: number;
|
|
7
7
|
className?: string;
|
|
8
8
|
classNames?: Partial<Record<SemanticName, string>>;
|
|
9
9
|
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
|
10
10
|
percent?: number | number[];
|
|
11
11
|
strokeColor?: StrokeColorType;
|
|
12
|
-
|
|
12
|
+
railColor?: string;
|
|
13
13
|
strokeLinecap?: StrokeLinecapType;
|
|
14
14
|
prefixCls?: string;
|
|
15
15
|
style?: React.CSSProperties;
|
package/lib/Circle/index.js
CHANGED
|
@@ -27,10 +27,10 @@ const Circle = props => {
|
|
|
27
27
|
styles = {},
|
|
28
28
|
steps,
|
|
29
29
|
strokeWidth,
|
|
30
|
-
|
|
30
|
+
railWidth,
|
|
31
31
|
gapDegree = 0,
|
|
32
32
|
gapPosition,
|
|
33
|
-
|
|
33
|
+
railColor,
|
|
34
34
|
strokeLinecap,
|
|
35
35
|
style,
|
|
36
36
|
className,
|
|
@@ -68,7 +68,7 @@ const Circle = props => {
|
|
|
68
68
|
id: mergedId,
|
|
69
69
|
loading
|
|
70
70
|
});
|
|
71
|
-
const circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition,
|
|
71
|
+
const circleStyle = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, 0, 100, rotateDeg, gapDegree, gapPosition, railColor, mergedStrokeLinecap, strokeWidth);
|
|
72
72
|
const paths = (0, _common.useTransitionDuration)();
|
|
73
73
|
const getStokeList = () => {
|
|
74
74
|
let stackPtg = 0;
|
|
@@ -110,7 +110,7 @@ const Circle = props => {
|
|
|
110
110
|
const stepPtg = 100 / stepCount;
|
|
111
111
|
let stackPtg = 0;
|
|
112
112
|
return new Array(stepCount).fill(null).map((_, index) => {
|
|
113
|
-
const color = index <= current - 1 ? strokeColorList[0] :
|
|
113
|
+
const color = index <= current - 1 ? strokeColorList[0] : railColor;
|
|
114
114
|
const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
|
|
115
115
|
const circleStyleForStack = (0, _util.getCircleStyle)(perimeter, perimeterWithoutGap, stackPtg, stepPtg, rotateDeg, gapDegree, gapPosition, color, 'butt', strokeWidth, stepGap);
|
|
116
116
|
stackPtg += (perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepGap) * 100 / perimeterWithoutGap;
|
|
@@ -143,13 +143,13 @@ const Circle = props => {
|
|
|
143
143
|
id: id,
|
|
144
144
|
role: "presentation"
|
|
145
145
|
}, restProps), !stepCount && /*#__PURE__*/React.createElement("circle", {
|
|
146
|
-
className: (0, _classnames.default)(`${prefixCls}-circle-
|
|
146
|
+
className: (0, _classnames.default)(`${prefixCls}-circle-rail`, classNames.rail),
|
|
147
147
|
r: radius,
|
|
148
148
|
cx: halfSize,
|
|
149
149
|
cy: halfSize,
|
|
150
|
-
stroke:
|
|
150
|
+
stroke: railColor,
|
|
151
151
|
strokeLinecap: mergedStrokeLinecap,
|
|
152
|
-
strokeWidth:
|
|
152
|
+
strokeWidth: railWidth || strokeWidth,
|
|
153
153
|
style: {
|
|
154
154
|
...circleStyle,
|
|
155
155
|
...styles.rail
|
package/lib/Line.js
CHANGED
|
@@ -23,8 +23,8 @@ const Line = props => {
|
|
|
23
23
|
strokeLinecap,
|
|
24
24
|
strokeWidth,
|
|
25
25
|
style,
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
railColor,
|
|
27
|
+
railWidth,
|
|
28
28
|
transition,
|
|
29
29
|
loading,
|
|
30
30
|
...restProps
|
|
@@ -61,11 +61,11 @@ const Line = props => {
|
|
|
61
61
|
preserveAspectRatio: "none",
|
|
62
62
|
style: style
|
|
63
63
|
}, restProps), /*#__PURE__*/React.createElement("path", {
|
|
64
|
-
className: `${prefixCls}-line-
|
|
64
|
+
className: `${prefixCls}-line-rail`,
|
|
65
65
|
d: pathString,
|
|
66
66
|
strokeLinecap: strokeLinecap,
|
|
67
|
-
stroke:
|
|
68
|
-
strokeWidth:
|
|
67
|
+
stroke: railColor,
|
|
68
|
+
strokeWidth: railWidth || strokeWidth,
|
|
69
69
|
fillOpacity: "0"
|
|
70
70
|
}), percentList.map((ptg, index) => {
|
|
71
71
|
let dashPercent = 1;
|
package/lib/common.js
CHANGED
package/lib/interface.d.ts
CHANGED
|
@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
|
|
|
3
3
|
export interface ProgressProps {
|
|
4
4
|
id?: string;
|
|
5
5
|
strokeWidth?: number;
|
|
6
|
-
|
|
6
|
+
railWidth?: number;
|
|
7
7
|
className?: string;
|
|
8
8
|
classNames?: Partial<Record<SemanticName, string>>;
|
|
9
9
|
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
|
10
10
|
percent?: number | number[];
|
|
11
11
|
strokeColor?: StrokeColorType;
|
|
12
|
-
|
|
12
|
+
railColor?: string;
|
|
13
13
|
strokeLinecap?: StrokeLinecapType;
|
|
14
14
|
prefixCls?: string;
|
|
15
15
|
style?: React.CSSProperties;
|