@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 CHANGED
@@ -83,16 +83,16 @@ export default () => (
83
83
  <td>Stroke color.</td>
84
84
  </tr>
85
85
  <tr>
86
- <td>trailWidth</td>
86
+ <td>railWidth</td>
87
87
  <td>Number</td>
88
88
  <td>1</td>
89
- <td>Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth is not defined, it is the same as strokeWidth.</td>
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>trailColor</td>
92
+ <td>railColor</td>
93
93
  <td>String</td>
94
94
  <td>#D9D9D9</td>
95
- <td>Color for lighter trail stroke underneath the actual progress path.</td>
95
+ <td>Color for lighter rail stroke underneath the actual progress path.</td>
96
96
  </tr>
97
97
  <tr>
98
98
  <td>strokeLinecap</td>
@@ -18,10 +18,10 @@ const Circle = props => {
18
18
  styles = {},
19
19
  steps,
20
20
  strokeWidth,
21
- trailWidth,
21
+ railWidth,
22
22
  gapDegree = 0,
23
23
  gapPosition,
24
- trailColor,
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, trailColor, mergedStrokeLinecap, strokeWidth);
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] : trailColor;
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-trail`, classNames.rail),
137
+ className: cls(`${prefixCls}-circle-rail`, classNames.rail),
138
138
  r: radius,
139
139
  cx: halfSize,
140
140
  cy: halfSize,
141
- stroke: trailColor,
141
+ stroke: railColor,
142
142
  strokeLinecap: mergedStrokeLinecap,
143
- strokeWidth: trailWidth || 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
- trailColor,
18
- trailWidth,
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-trail`,
55
+ className: `${prefixCls}-line-rail`,
56
56
  d: pathString,
57
57
  strokeLinecap: strokeLinecap,
58
- stroke: trailColor,
59
- strokeWidth: trailWidth || 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
@@ -5,8 +5,8 @@ export const defaultProps = {
5
5
  strokeColor: '#2db7f5',
6
6
  strokeLinecap: 'round',
7
7
  strokeWidth: 1,
8
- trailColor: '#D9D9D9',
9
- trailWidth: 1,
8
+ railColor: '#D9D9D9',
9
+ railWidth: 1,
10
10
  gapPosition: 'bottom',
11
11
  loading: false
12
12
  };
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
- trailWidth?: number;
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
- trailColor?: string;
12
+ railColor?: string;
13
13
  strokeLinecap?: StrokeLinecapType;
14
14
  prefixCls?: string;
15
15
  style?: React.CSSProperties;
@@ -27,10 +27,10 @@ const Circle = props => {
27
27
  styles = {},
28
28
  steps,
29
29
  strokeWidth,
30
- trailWidth,
30
+ railWidth,
31
31
  gapDegree = 0,
32
32
  gapPosition,
33
- trailColor,
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, trailColor, mergedStrokeLinecap, strokeWidth);
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] : trailColor;
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-trail`, classNames.rail),
146
+ className: (0, _classnames.default)(`${prefixCls}-circle-rail`, classNames.rail),
147
147
  r: radius,
148
148
  cx: halfSize,
149
149
  cy: halfSize,
150
- stroke: trailColor,
150
+ stroke: railColor,
151
151
  strokeLinecap: mergedStrokeLinecap,
152
- strokeWidth: trailWidth || 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
- trailColor,
27
- trailWidth,
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-trail`,
64
+ className: `${prefixCls}-line-rail`,
65
65
  d: pathString,
66
66
  strokeLinecap: strokeLinecap,
67
- stroke: trailColor,
68
- strokeWidth: trailWidth || 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
@@ -11,8 +11,8 @@ const defaultProps = exports.defaultProps = {
11
11
  strokeColor: '#2db7f5',
12
12
  strokeLinecap: 'round',
13
13
  strokeWidth: 1,
14
- trailColor: '#D9D9D9',
15
- trailWidth: 1,
14
+ railColor: '#D9D9D9',
15
+ railWidth: 1,
16
16
  gapPosition: 'bottom',
17
17
  loading: false
18
18
  };
@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
3
3
  export interface ProgressProps {
4
4
  id?: string;
5
5
  strokeWidth?: number;
6
- trailWidth?: number;
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
- trailColor?: string;
12
+ railColor?: string;
13
13
  strokeLinecap?: StrokeLinecapType;
14
14
  prefixCls?: string;
15
15
  style?: React.CSSProperties;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/progress",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "progress ui component for react",
5
5
  "keywords": [
6
6
  "react",