From 1300c5bac803faefdfabb67079ebfd4a98912c3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 17 Apr 2025 14:34:41 +0800 Subject: [PATCH 1/3] refactor: all use rail --- src/Circle/index.tsx | 14 +++++----- src/Line.tsx | 10 ++++---- src/common.ts | 4 +-- src/interface.ts | 4 +-- tests/__snapshots__/conic.spec.tsx.snap | 4 +-- tests/__snapshots__/index.spec.js.snap | 34 ++++++++++++------------- tests/index.spec.js | 6 ++--- tests/semantic.spec.tsx | 2 +- 8 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx index ff179e0..c421aef 100644 --- a/src/Circle/index.tsx +++ b/src/Circle/index.tsx @@ -20,10 +20,10 @@ const Circle: React.FC = (props) => { styles = {}, steps, strokeWidth, - trailWidth, + railWidth, gapDegree = 0, gapPosition, - trailColor, + railColor, strokeLinecap, style, className, @@ -68,7 +68,7 @@ const Circle: React.FC = (props) => { rotateDeg, gapDegree, gapPosition, - trailColor, + railColor, mergedStrokeLinecap, strokeWidth, ); @@ -129,7 +129,7 @@ const Circle: React.FC = (props) => { let stackPtg = 0; return new Array(stepCount).fill(null).map((_, index) => { - const color = index <= current - 1 ? strokeColorList[0] : trailColor; + const color = index <= current - 1 ? strokeColorList[0] : railColor; const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined; const circleStyleForStack = getCircleStyle( perimeter, @@ -181,13 +181,13 @@ const Circle: React.FC = (props) => { > {!stepCount && ( = (props) => { strokeLinecap, strokeWidth, style, - trailColor, - trailWidth, + railColor, + railWidth, transition, loading, ...restProps @@ -57,11 +57,11 @@ const Line: React.FC = (props) => { {...restProps} > {percentList.map((ptg, index) => { diff --git a/src/common.ts b/src/common.ts index 5d320fa..5da51ff 100644 --- a/src/common.ts +++ b/src/common.ts @@ -7,8 +7,8 @@ export const defaultProps: Partial = { strokeColor: '#2db7f5', strokeLinecap: 'round', strokeWidth: 1, - trailColor: '#D9D9D9', - trailWidth: 1, + railColor: '#D9D9D9', + railWidth: 1, gapPosition: 'bottom', loading: false, }; diff --git a/src/interface.ts b/src/interface.ts index 5dbe32d..a4eef68 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track'; export interface ProgressProps { id?: string; strokeWidth?: number; - trailWidth?: number; + railWidth?: number; className?: string; classNames?: Partial>; styles?: Partial>; percent?: number | number[]; strokeColor?: StrokeColorType; - trailColor?: string; + railColor?: string; strokeLinecap?: StrokeLinecapType; prefixCls?: string; style?: React.CSSProperties; diff --git a/tests/__snapshots__/conic.spec.tsx.snap b/tests/__snapshots__/conic.spec.tsx.snap index 0e474ea..cb685a3 100644 --- a/tests/__snapshots__/conic.spec.tsx.snap +++ b/tests/__snapshots__/conic.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`Circle.conic gapDegree 1`] = ` viewBox="0 0 100 100" > { steps={steps} percent={percent} strokeColor="red" - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); @@ -199,7 +199,7 @@ describe('Progress', () => { '0%': '#108ee9', '100%': '#87d068', }} - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); @@ -215,7 +215,7 @@ describe('Progress', () => { gapDegree={60} percent={50} strokeColor="red" - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx index 4429876..fac219b 100644 --- a/tests/semantic.spec.tsx +++ b/tests/semantic.spec.tsx @@ -26,7 +26,7 @@ describe('Semantic', () => { ); expect(container.querySelector('.rc-progress-circle')).toHaveClass(classNames.root); - expect(container.querySelector('.rc-progress-circle-trail')).toHaveClass(classNames.rail); + expect(container.querySelector('.rc-progress-circle-rail')).toHaveClass(classNames.rail); expect(container.querySelector('.rc-progress-circle-path')).toHaveClass(classNames.track); expect(container.querySelector('.my-root')).toHaveStyle(styles.root); From 85f59c52831f4e84aaa4a81695c309537f9c9039 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 17 Apr 2025 14:36:46 +0800 Subject: [PATCH 2/3] docs: update --- README.md | 8 ++++---- docs/examples/gap.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2fa9834..d9948ef 100644 --- a/README.md +++ b/README.md @@ -83,16 +83,16 @@ export default () => ( Stroke color. - trailWidth + rrailWidth Number 1 - 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. + Width of the rrail 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. - trailColor + railColor String #D9D9D9 - Color for lighter trail stroke underneath the actual progress path. + Color for lighter rail stroke underneath the actual progress path. strokeLinecap diff --git a/docs/examples/gap.tsx b/docs/examples/gap.tsx index 45e8ac0..9ffa4ce 100644 --- a/docs/examples/gap.tsx +++ b/docs/examples/gap.tsx @@ -79,7 +79,7 @@ class Example extends React.Component { gapDegree={70} gapPosition="bottom" strokeWidth={6} - trailWidth={6} + railWidth={6} strokeLinecap="round" strokeColor={multiPercentageStrokeColors} /> From 6130b25b8e8e015c19d62daa57c55a5dcc9a4123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 17 Apr 2025 14:40:13 +0800 Subject: [PATCH 3/3] docs: fix typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d9948ef..4b3a400 100644 --- a/README.md +++ b/README.md @@ -83,10 +83,10 @@ export default () => ( Stroke color. - rrailWidth + railWidth Number 1 - Width of the rrail 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. + 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. railColor