Skip to content

Commit 2cd1135

Browse files
zombieJzombieJ
authored
refactor: all use rail (#305)
* refactor: all use rail * docs: update * docs: fix typo
1 parent 9b7899e commit 2cd1135

File tree

10 files changed

+44
-44
lines changed

10 files changed

+44
-44
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,16 @@ export default () => (
8383
<td>Stroke color.</td>
8484
</tr>
8585
<tr>
86-
<td>trailWidth</td>
86+
<td>railWidth</td>
8787
<td>Number</td>
8888
<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>
9090
</tr>
9191
<tr>
92-
<td>trailColor</td>
92+
<td>railColor</td>
9393
<td>String</td>
9494
<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>
9696
</tr>
9797
<tr>
9898
<td>strokeLinecap</td>

‎docs/examples/gap.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ class Example extends React.Component<ProgressProps, any> {
7979
gapDegree={70}
8080
gapPosition="bottom"
8181
strokeWidth={6}
82-
trailWidth={6}
82+
railWidth={6}
8383
strokeLinecap="round"
8484
strokeColor={multiPercentageStrokeColors}
8585
/>

‎src/Circle/index.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ const Circle: React.FC<ProgressProps> = (props) => {
2020
styles = {},
2121
steps,
2222
strokeWidth,
23-
trailWidth,
23+
railWidth,
2424
gapDegree = 0,
2525
gapPosition,
26-
trailColor,
26+
railColor,
2727
strokeLinecap,
2828
style,
2929
className,
@@ -68,7 +68,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
6868
rotateDeg,
6969
gapDegree,
7070
gapPosition,
71-
trailColor,
71+
railColor,
7272
mergedStrokeLinecap,
7373
strokeWidth,
7474
);
@@ -129,7 +129,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
129129

130130
let stackPtg = 0;
131131
return new Array(stepCount).fill(null).map<React.ReactNode>((_, index) => {
132-
const color = index <= current - 1 ? strokeColorList[0] : trailColor;
132+
const color = index <= current - 1 ? strokeColorList[0] : railColor;
133133
const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
134134
const circleStyleForStack = getCircleStyle(
135135
perimeter,
@@ -181,13 +181,13 @@ const Circle: React.FC<ProgressProps> = (props) => {
181181
>
182182
{!stepCount && (
183183
<circle
184-
className={cls(`${prefixCls}-circle-trail`, classNames.rail)}
184+
className={cls(`${prefixCls}-circle-rail`, classNames.rail)}
185185
r={radius}
186186
cx={halfSize}
187187
cy={halfSize}
188-
stroke={trailColor}
188+
stroke={railColor}
189189
strokeLinecap={mergedStrokeLinecap}
190-
strokeWidth={trailWidth || strokeWidth}
190+
strokeWidth={railWidth || strokeWidth}
191191
style={{
192192
...circleStyle,
193193
...styles.rail,

‎src/Line.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const Line: React.FC<ProgressProps> = (props) => {
1515
strokeLinecap,
1616
strokeWidth,
1717
style,
18-
trailColor,
19-
trailWidth,
18+
railColor,
19+
railWidth,
2020
transition,
2121
loading,
2222
...restProps
@@ -57,11 +57,11 @@ const Line: React.FC<ProgressProps> = (props) => {
5757
{...restProps}
5858
>
5959
<path
60-
className={`${prefixCls}-line-trail`}
60+
className={`${prefixCls}-line-rail`}
6161
d={pathString}
6262
strokeLinecap={strokeLinecap}
63-
stroke={trailColor}
64-
strokeWidth={trailWidth || strokeWidth}
63+
stroke={railColor}
64+
strokeWidth={railWidth || strokeWidth}
6565
fillOpacity="0"
6666
/>
6767
{percentList.map((ptg, index) => {

‎src/common.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export const defaultProps: Partial<ProgressProps> = {
77
strokeColor: '#2db7f5',
88
strokeLinecap: 'round',
99
strokeWidth: 1,
10-
trailColor: '#D9D9D9',
11-
trailWidth: 1,
10+
railColor: '#D9D9D9',
11+
railWidth: 1,
1212
gapPosition: 'bottom',
1313
loading: false,
1414
};

‎src/interface.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track';
33
export interface ProgressProps {
44
id?: string;
55
strokeWidth?: number;
6-
trailWidth?: number;
6+
railWidth?: number;
77
className?: string;
88
classNames?: Partial<Record<SemanticName, string>>;
99
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
1010
percent?: number | number[];
1111
strokeColor?: StrokeColorType;
12-
trailColor?: string;
12+
railColor?: string;
1313
strokeLinecap?: StrokeLinecapType;
1414
prefixCls?: string;
1515
style?: React.CSSProperties;

‎tests/__snapshots__/conic.spec.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports[`Circle.conic gapDegree 1`] = `
88
viewBox="0 0 100 100"
99
>
1010
<circle
11-
class="rc-progress-circle-trail"
11+
class="rc-progress-circle-rail"
1212
cx="50"
1313
cy="50"
1414
r="47"
@@ -59,7 +59,7 @@ exports[`Circle.conic should work 1`] = `
5959
viewBox="0 0 100 100"
6060
>
6161
<circle
62-
class="rc-progress-circle-trail"
62+
class="rc-progress-circle-rail"
6363
cx="50"
6464
cy="50"
6565
r="47"

‎tests/__snapshots__/index.spec.js.snap

+17-17
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`Progress Circle change with animation 1`] = `
77
viewBox="0 0 100 100"
88
>
99
<circle
10-
class="rc-progress-circle-trail"
10+
class="rc-progress-circle-rail"
1111
cx="50"
1212
cy="50"
1313
r="49.5"
@@ -36,7 +36,7 @@ exports[`Progress Circle change with animation 2`] = `
3636
viewBox="0 0 100 100"
3737
>
3838
<circle
39-
class="rc-progress-circle-trail"
39+
class="rc-progress-circle-rail"
4040
cx="50"
4141
cy="50"
4242
r="49.5"
@@ -66,7 +66,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
6666
viewBox="0 0 100 100"
6767
>
6868
<circle
69-
class="rc-progress-circle-trail"
69+
class="rc-progress-circle-rail"
7070
cx="50"
7171
cy="50"
7272
r="47"
@@ -112,7 +112,7 @@ exports[`Progress Circle should gradient works and circles have different gradie
112112
viewBox="0 0 100 100"
113113
>
114114
<circle
115-
class="rc-progress-circle-trail"
115+
class="rc-progress-circle-rail"
116116
cx="50"
117117
cy="50"
118118
r="47"
@@ -163,7 +163,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
163163
viewBox="0 0 100 100"
164164
>
165165
<circle
166-
class="rc-progress-circle-trail"
166+
class="rc-progress-circle-rail"
167167
cx="50"
168168
cy="50"
169169
r="47"
@@ -189,7 +189,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
189189
viewBox="0 0 100 100"
190190
>
191191
<circle
192-
class="rc-progress-circle-trail"
192+
class="rc-progress-circle-rail"
193193
cx="50"
194194
cy="50"
195195
r="47"
@@ -215,7 +215,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
215215
viewBox="0 0 100 100"
216216
>
217217
<circle
218-
class="rc-progress-circle-trail"
218+
class="rc-progress-circle-rail"
219219
cx="50"
220220
cy="50"
221221
r="47"
@@ -241,7 +241,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
241241
viewBox="0 0 100 100"
242242
>
243243
<circle
244-
class="rc-progress-circle-trail"
244+
class="rc-progress-circle-rail"
245245
cx="50"
246246
cy="50"
247247
r="47"
@@ -267,7 +267,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
267267
viewBox="0 0 100 100"
268268
>
269269
<circle
270-
class="rc-progress-circle-trail"
270+
class="rc-progress-circle-rail"
271271
cx="50"
272272
cy="50"
273273
r="47"
@@ -293,7 +293,7 @@ exports[`Progress Circle should show right gapPosition 1`] = `
293293
viewBox="0 0 100 100"
294294
>
295295
<circle
296-
class="rc-progress-circle-trail"
296+
class="rc-progress-circle-rail"
297297
cx="50"
298298
cy="50"
299299
r="47"
@@ -324,7 +324,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
324324
viewBox="0 0 100 1"
325325
>
326326
<path
327-
class="rc-progress-line-trail"
327+
class="rc-progress-line-rail"
328328
d="M 0,0.5
329329
L 100,0.5"
330330
fill-opacity="0"
@@ -350,7 +350,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
350350
viewBox="0 0 100 1"
351351
>
352352
<path
353-
class="rc-progress-line-trail"
353+
class="rc-progress-line-rail"
354354
d="M 0.5,0.5
355355
L 99.5,0.5"
356356
fill-opacity="0"
@@ -376,7 +376,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
376376
viewBox="0 0 100 1"
377377
>
378378
<path
379-
class="rc-progress-line-trail"
379+
class="rc-progress-line-rail"
380380
d="M 0,0.5
381381
L 100,0.5"
382382
fill-opacity="0"
@@ -405,7 +405,7 @@ exports[`Progress Line change with animation 1`] = `
405405
viewBox="0 0 100 1"
406406
>
407407
<path
408-
class="rc-progress-line-trail"
408+
class="rc-progress-line-rail"
409409
d="M 0.5,0.5
410410
L 99.5,0.5"
411411
fill-opacity="0"
@@ -433,7 +433,7 @@ exports[`Progress Line change with animation 2`] = `
433433
viewBox="0 0 100 1"
434434
>
435435
<path
436-
class="rc-progress-line-trail"
436+
class="rc-progress-line-rail"
437437
d="M 0.5,0.5
438438
L 99.5,0.5"
439439
fill-opacity="0"
@@ -462,7 +462,7 @@ exports[`Progress should support percentage array changes 1`] = `
462462
viewBox="0 0 100 100"
463463
>
464464
<circle
465-
class="rc-progress-circle-trail"
465+
class="rc-progress-circle-rail"
466466
cx="50"
467467
cy="50"
468468
r="49.5"
@@ -502,7 +502,7 @@ exports[`Progress should support percentage array changes 2`] = `
502502
viewBox="0 0 100 100"
503503
>
504504
<circle
505-
class="rc-progress-circle-trail"
505+
class="rc-progress-circle-rail"
506506
cx="50"
507507
cy="50"
508508
r="49.5"

‎tests/index.spec.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ describe('Progress', () => {
179179
steps={steps}
180180
percent={percent}
181181
strokeColor="red"
182-
trailColor="grey"
182+
railColor="grey"
183183
strokeWidth={20}
184184
/>,
185185
);
@@ -199,7 +199,7 @@ describe('Progress', () => {
199199
'0%': '#108ee9',
200200
'100%': '#87d068',
201201
}}
202-
trailColor="grey"
202+
railColor="grey"
203203
strokeWidth={20}
204204
/>,
205205
);
@@ -215,7 +215,7 @@ describe('Progress', () => {
215215
gapDegree={60}
216216
percent={50}
217217
strokeColor="red"
218-
trailColor="grey"
218+
railColor="grey"
219219
strokeWidth={20}
220220
/>,
221221
);

‎tests/semantic.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('Semantic', () => {
2626
);
2727

2828
expect(container.querySelector('.rc-progress-circle')).toHaveClass(classNames.root);
29-
expect(container.querySelector('.rc-progress-circle-trail')).toHaveClass(classNames.rail);
29+
expect(container.querySelector('.rc-progress-circle-rail')).toHaveClass(classNames.rail);
3030
expect(container.querySelector('.rc-progress-circle-path')).toHaveClass(classNames.track);
3131

3232
expect(container.querySelector('.my-root')).toHaveStyle(styles.root);

0 commit comments

Comments
 (0)