Skip to content

Commit 6df24f2

Browse files
li-jia-nanli-jia-nan
authored
chore: rename space => gap (#275)
1 parent ff694e1 commit 6df24f2

10 files changed

+99
-110
lines changed

‎docs/examples/fast-progress.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import * as React from 'react';
2-
import { Line, Circle, ProgressProps } from 'rc-progress';
1+
import React from 'react';
2+
import { Line, Circle } from 'rc-progress';
3+
import type { ProgressProps } from 'rc-progress';
34

45
class App extends React.Component<ProgressProps, any> {
5-
constructor(props) {
6+
constructor(props: ProgressProps) {
67
super(props);
78
this.state = {
89
percent: 0,

‎docs/examples/gap.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
import * as React from 'react';
2-
import { Circle, type ProgressProps } from 'rc-progress';
1+
import React from 'react';
2+
import { Circle } from 'rc-progress';
3+
import type { ProgressProps } from 'rc-progress';
34

45
const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A', '#FF5959', '#BC3FFA'];
56

6-
function getColor(index) {
7+
const circleContainerStyle: React.CSSProperties = {
8+
width: 200,
9+
height: 200,
10+
};
11+
12+
function getColor(index: number) {
713
return colorMap[(index + colorMap.length) % colorMap.length];
814
}
915

1016
class Example extends React.Component<ProgressProps, any> {
11-
constructor(props) {
17+
constructor(props: ProgressProps) {
1218
super(props);
1319
this.state = {
1420
percent: 100,
@@ -36,10 +42,6 @@ class Example extends React.Component<ProgressProps, any> {
3642
}
3743

3844
render() {
39-
const circleContainerStyle = {
40-
width: '200px',
41-
height: '200px',
42-
};
4345
const { percent, colorIndex, subPathsCount } = this.state;
4446
const color = getColor(colorIndex);
4547

@@ -48,7 +50,7 @@ class Example extends React.Component<ProgressProps, any> {
4850
0,
4951
subPathsCount,
5052
);
51-
const multiPercentageStrokeColors = multiPercentage.map((v, index) => getColor(index));
53+
const multiPercentageStrokeColors = multiPercentage.map((_, i) => getColor(i));
5254

5355
return (
5456
<div>

‎docs/examples/gradient-circle.tsx

+10-21
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import * as React from 'react';
1+
import React from 'react';
22
import { Circle } from 'rc-progress';
33

4-
const Example = () => {
5-
const circleContainerStyle = {
6-
width: '250px',
7-
height: '250px',
8-
display: 'inline-block',
9-
};
4+
const circleContainerStyle: React.CSSProperties = {
5+
width: 250,
6+
height: 250,
7+
display: 'inline-block',
8+
};
109

10+
const Example: React.FC = () => {
1111
return (
1212
<div>
1313
<h3>Circle Progress {90}%</h3>
@@ -16,10 +16,7 @@ const Example = () => {
1616
percent={90}
1717
strokeWidth={6}
1818
strokeLinecap="round"
19-
strokeColor={{
20-
'0%': '#108ee9',
21-
'100%': '#87d068',
22-
}}
19+
strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
2320
/>
2421
</div>
2522
<h3>Circle Progress {100}%</h3>
@@ -28,23 +25,15 @@ const Example = () => {
2825
percent={100}
2926
strokeWidth={6}
3027
strokeLinecap="round"
31-
strokeColor={{
32-
'100%': '#108ee9',
33-
'0%': '#87d068',
34-
}}
28+
strokeColor={{ '100%': '#108ee9', '0%': '#87d068' }}
3529
/>
3630
</div>
37-
3831
<h3>Circle colors</h3>
3932
<div style={circleContainerStyle}>
4033
<Circle
4134
percent={90}
4235
strokeWidth={6}
43-
strokeColor={{
44-
'0%': 'green',
45-
'99%': 'red',
46-
'100%': 'blue',
47-
}}
36+
strokeColor={{ '0%': 'green', '99%': 'red', '100%': 'blue' }}
4837
/>
4938
</div>
5039
</div>

‎docs/examples/simple.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import * as React from 'react';
2-
import { Line, Circle, ProgressProps } from 'rc-progress';
1+
import React from 'react';
2+
import { Line, Circle } from 'rc-progress';
3+
import type { ProgressProps } from 'rc-progress';
34

45
class Example extends React.Component<ProgressProps, any> {
5-
constructor(props) {
6+
constructor(props: ProgressProps) {
67
super(props);
78
this.state = {
89
percent: 9,
@@ -20,29 +21,33 @@ class Example extends React.Component<ProgressProps, any> {
2021
percent: value,
2122
color: colorMap[parseInt((Math.random() * 3).toString(), 10)],
2223
});
23-
};
24+
}
2425

2526
changeIncrease() {
2627
this.setState(({ percent }) => {
2728
if (percent > 100) {
28-
percent = 100;
29+
return {
30+
percent: 100,
31+
};
2932
}
3033
return {
3134
percent: percent + 1,
3235
};
3336
});
34-
};
37+
}
3538

3639
changeReduce() {
3740
this.setState(({ percent }) => {
3841
if (percent < 0) {
39-
percent = 0;
42+
return {
43+
percent: 0,
44+
};
4045
}
4146
return {
4247
percent: percent - 1,
4348
};
4449
});
45-
};
50+
}
4651

4752
render() {
4853
const { percent, color } = this.state;

‎docs/examples/steps.tsx

+47-47
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,76 @@
1-
import * as React from 'react';
2-
import { useState } from 'react';
1+
import React, { useState } from 'react';
32
import { Circle } from 'rc-progress';
43

5-
const Example = () => {
6-
4+
const Example: React.FC = () => {
75
const [percent, setPercent] = useState<number>(30);
86
const [strokeWidth, setStrokeWidth] = useState<number>(20);
97
const [steps, setSteps] = useState<number>(5);
10-
const [space, setSpace] = useState<number>(4);
11-
12-
8+
const [gap, setGap] = useState<number>(4);
139
return (
1410
<div>
1511
<div>
16-
percent: <input
17-
id='range'
18-
type='range'
19-
min='0'
20-
max='100'
21-
value={percent}
22-
style={{ width: 300 }}
23-
onChange={(e) => setPercent(parseInt(e.target.value))} />
12+
percent:
13+
<input
14+
id="range"
15+
type="range"
16+
min="0"
17+
max="100"
18+
value={percent}
19+
style={{ width: 300 }}
20+
onChange={(e) => setPercent(parseInt(e.target.value))}
21+
/>
2422
</div>
2523
<div>
26-
strokeWidth: <input
27-
id='range'
28-
type='range'
29-
min='0'
30-
max='30'
31-
value={strokeWidth}
32-
style={{ width: 300 }}
33-
onChange={(e) => setStrokeWidth(parseInt(e.target.value))} />
24+
strokeWidth:
25+
<input
26+
id="range"
27+
type="range"
28+
min="0"
29+
max="30"
30+
value={strokeWidth}
31+
style={{ width: 300 }}
32+
onChange={(e) => setStrokeWidth(parseInt(e.target.value))}
33+
/>
3434
</div>
3535
<div>
36-
steps: <input
37-
id='range'
38-
type='range'
39-
min='0'
40-
max='15'
41-
value={steps}
42-
style={{ width: 300 }}
43-
onChange={(e) => setSteps(parseInt(e.target.value))} />
36+
steps:
37+
<input
38+
id="range"
39+
type="range"
40+
min="0"
41+
max="15"
42+
value={steps}
43+
style={{ width: 300 }}
44+
onChange={(e) => setSteps(parseInt(e.target.value))}
45+
/>
4446
</div>
4547
<div>
46-
space: <input
47-
id='range'
48-
type='range'
49-
min='0'
50-
max='15'
51-
value={space}
52-
style={{ width: 300 }}
53-
onChange={(e) => setSpace(parseInt(e.target.value))} />
48+
space:
49+
<input
50+
id="range"
51+
type="range"
52+
min="0"
53+
max="15"
54+
value={gap}
55+
style={{ width: 300 }}
56+
onChange={(e) => setGap(parseInt(e.target.value))}
57+
/>
5458
</div>
5559
<h3>Circle Progress:</h3>
5660
<div>percent: {percent}% </div>
5761
<div>strokeWidth: {strokeWidth}px</div>
5862
<div>steps: {steps}</div>
59-
<div>space: {space}px</div>
60-
63+
<div>gap: {gap}px</div>
6164
<div style={{ width: 100 }}>
6265
<Circle
6366
percent={percent}
6467
strokeWidth={strokeWidth}
65-
steps={{
66-
count: steps,
67-
space: space,
68-
}}
69-
strokeColor={'red'}
68+
steps={{ count: steps, gap: gap }}
69+
strokeColor="red"
7070
/>
7171
</div>
7272
</div>
7373
);
7474
};
7575

76-
export default Example;
76+
export default Example;

‎src/Circle/PtgCircle.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,8 @@ interface BlockProps {
77
children?: React.ReactNode;
88
}
99

10-
const Block = ({ bg, children }: BlockProps) => (
11-
<div
12-
style={{
13-
width: '100%',
14-
height: '100%',
15-
background: bg,
16-
}}
17-
>
18-
{children}
19-
</div>
10+
const Block: React.FC<BlockProps> = ({ bg, children }) => (
11+
<div style={{ width: '100%', height: '100%', background: bg }}>{children}</div>
2012
);
2113

2214
function getPtgColors(color: Record<string, string>, scale: number) {
@@ -97,7 +89,6 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
9789
return (
9890
<>
9991
<mask id={maskId}>{circleNode}</mask>
100-
10192
<foreignObject x={0} y={0} width={size} height={size} mask={`url(#${maskId})`}>
10293
<Block bg={linearColorBg}>
10394
<Block bg={conicColorBg} />

‎src/Circle/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const Circle: React.FC<ProgressProps> = (props) => {
4040
const perimeter = Math.PI * 2 * radius;
4141
const rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90;
4242
const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
43-
const { count: stepCount, space: stepSpace } =
44-
typeof steps === 'object' ? steps : { count: steps, space: 2 };
43+
const { count: stepCount, gap: stepGap } =
44+
typeof steps === 'object' ? steps : { count: steps, gap: 2 };
4545

4646
const percentList = toArray(percent);
4747
const strokeColorList = toArray(strokeColor);
@@ -70,7 +70,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
7070
const getStokeList = () => {
7171
let stackPtg = 0;
7272
return percentList
73-
.map((ptg, index) => {
73+
.map<React.ReactNode>((ptg, index) => {
7474
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
7575
const circleStyleForStack = getCircleStyle(
7676
perimeter,
@@ -119,7 +119,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
119119
const stepPtg = 100 / stepCount;
120120

121121
let stackPtg = 0;
122-
return new Array(stepCount).fill(null).map((_, index) => {
122+
return new Array(stepCount).fill(null).map<React.ReactNode>((_, index) => {
123123
const color = index <= current - 1 ? strokeColorList[0] : trailColor;
124124
const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined;
125125
const circleStyleForStack = getCircleStyle(
@@ -133,10 +133,10 @@ const Circle: React.FC<ProgressProps> = (props) => {
133133
color,
134134
'butt',
135135
strokeWidth,
136-
stepSpace,
136+
stepGap,
137137
);
138138
stackPtg +=
139-
((perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepSpace) * 100) /
139+
((perimeterWithoutGap - (circleStyleForStack.strokeDashoffset as number) + stepGap) * 100) /
140140
perimeterWithoutGap;
141141

142142
return (

‎src/Circle/util.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { StrokeColorType } from '../interface';
22
import type { ProgressProps } from '..';
3+
import type React from 'react';
34

45
export const VIEW_BOX_SIZE = 100;
56

@@ -9,13 +10,13 @@ export const getCircleStyle = (
910
offset: number,
1011
percent: number,
1112
rotateDeg: number,
12-
gapDegree,
13+
gapDegree: number,
1314
gapPosition: ProgressProps['gapPosition'] | undefined,
1415
strokeColor: StrokeColorType,
1516
strokeLinecap: ProgressProps['strokeLinecap'],
16-
strokeWidth,
17+
strokeWidth: number,
1718
stepSpace = 0,
18-
) => {
19+
): React.CSSProperties => {
1920
const offsetDeg = (offset / 100) * 360 * ((360 - gapDegree) / 360);
2021
const positionDeg =
2122
gapDegree === 0

‎src/Line.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Line: React.FC<ProgressProps> = (props) => {
6363
dashPercent = 1;
6464
break;
6565
}
66-
const pathStyle = {
66+
const pathStyle: React.CSSProperties = {
6767
strokeDasharray: `${ptg * dashPercent}px, 100px`,
6868
strokeDashoffset: `-${stackPtg}px`,
6969
transition:

0 commit comments

Comments
 (0)