From 6df24f203ca0fb91ecd0c21711ea93f696494c42 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 22 Mar 2024 10:41:33 +0800 Subject: [PATCH] chore: rename `space` => `gap` (#275) --- docs/examples/fast-progress.tsx | 7 ++- docs/examples/gap.tsx | 20 ++++--- docs/examples/gradient-circle.tsx | 31 ++++------ docs/examples/simple.tsx | 21 ++++--- docs/examples/steps.tsx | 94 +++++++++++++++---------------- src/Circle/PtgCircle.tsx | 13 +---- src/Circle/index.tsx | 12 ++-- src/Circle/util.ts | 7 ++- src/Line.tsx | 2 +- src/interface.ts | 2 +- 10 files changed, 99 insertions(+), 110 deletions(-) diff --git a/docs/examples/fast-progress.tsx b/docs/examples/fast-progress.tsx index 5014c7e..2511994 100644 --- a/docs/examples/fast-progress.tsx +++ b/docs/examples/fast-progress.tsx @@ -1,8 +1,9 @@ -import * as React from 'react'; -import { Line, Circle, ProgressProps } from 'rc-progress'; +import React from 'react'; +import { Line, Circle } from 'rc-progress'; +import type { ProgressProps } from 'rc-progress'; class App extends React.Component { - constructor(props) { + constructor(props: ProgressProps) { super(props); this.state = { percent: 0, diff --git a/docs/examples/gap.tsx b/docs/examples/gap.tsx index dc6e318..14a4283 100644 --- a/docs/examples/gap.tsx +++ b/docs/examples/gap.tsx @@ -1,14 +1,20 @@ -import * as React from 'react'; -import { Circle, type ProgressProps } from 'rc-progress'; +import React from 'react'; +import { Circle } from 'rc-progress'; +import type { ProgressProps } from 'rc-progress'; const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A', '#FF5959', '#BC3FFA']; -function getColor(index) { +const circleContainerStyle: React.CSSProperties = { + width: 200, + height: 200, +}; + +function getColor(index: number) { return colorMap[(index + colorMap.length) % colorMap.length]; } class Example extends React.Component { - constructor(props) { + constructor(props: ProgressProps) { super(props); this.state = { percent: 100, @@ -36,10 +42,6 @@ class Example extends React.Component { } render() { - const circleContainerStyle = { - width: '200px', - height: '200px', - }; const { percent, colorIndex, subPathsCount } = this.state; const color = getColor(colorIndex); @@ -48,7 +50,7 @@ class Example extends React.Component { 0, subPathsCount, ); - const multiPercentageStrokeColors = multiPercentage.map((v, index) => getColor(index)); + const multiPercentageStrokeColors = multiPercentage.map((_, i) => getColor(i)); return (
diff --git a/docs/examples/gradient-circle.tsx b/docs/examples/gradient-circle.tsx index 409fb9d..1dbc642 100644 --- a/docs/examples/gradient-circle.tsx +++ b/docs/examples/gradient-circle.tsx @@ -1,13 +1,13 @@ -import * as React from 'react'; +import React from 'react'; import { Circle } from 'rc-progress'; -const Example = () => { - const circleContainerStyle = { - width: '250px', - height: '250px', - display: 'inline-block', - }; +const circleContainerStyle: React.CSSProperties = { + width: 250, + height: 250, + display: 'inline-block', +}; +const Example: React.FC = () => { return (

Circle Progress {90}%

@@ -16,10 +16,7 @@ const Example = () => { percent={90} strokeWidth={6} strokeLinecap="round" - strokeColor={{ - '0%': '#108ee9', - '100%': '#87d068', - }} + strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />

Circle Progress {100}%

@@ -28,23 +25,15 @@ const Example = () => { percent={100} strokeWidth={6} strokeLinecap="round" - strokeColor={{ - '100%': '#108ee9', - '0%': '#87d068', - }} + strokeColor={{ '100%': '#108ee9', '0%': '#87d068' }} />
-

Circle colors

diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index 6d5603b..8e0610d 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -1,8 +1,9 @@ -import * as React from 'react'; -import { Line, Circle, ProgressProps } from 'rc-progress'; +import React from 'react'; +import { Line, Circle } from 'rc-progress'; +import type { ProgressProps } from 'rc-progress'; class Example extends React.Component { - constructor(props) { + constructor(props: ProgressProps) { super(props); this.state = { percent: 9, @@ -20,29 +21,33 @@ class Example extends React.Component { percent: value, color: colorMap[parseInt((Math.random() * 3).toString(), 10)], }); - }; + } changeIncrease() { this.setState(({ percent }) => { if (percent > 100) { - percent = 100; + return { + percent: 100, + }; } return { percent: percent + 1, }; }); - }; + } changeReduce() { this.setState(({ percent }) => { if (percent < 0) { - percent = 0; + return { + percent: 0, + }; } return { percent: percent - 1, }; }); - }; + } render() { const { percent, color } = this.state; diff --git a/docs/examples/steps.tsx b/docs/examples/steps.tsx index 0b9791a..d9e2b03 100644 --- a/docs/examples/steps.tsx +++ b/docs/examples/steps.tsx @@ -1,76 +1,76 @@ -import * as React from 'react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Circle } from 'rc-progress'; -const Example = () => { - +const Example: React.FC = () => { const [percent, setPercent] = useState(30); const [strokeWidth, setStrokeWidth] = useState(20); const [steps, setSteps] = useState(5); - const [space, setSpace] = useState(4); - - + const [gap, setGap] = useState(4); return (
- percent: setPercent(parseInt(e.target.value))} /> + percent: + setPercent(parseInt(e.target.value))} + />
- strokeWidth: setStrokeWidth(parseInt(e.target.value))} /> + strokeWidth: + setStrokeWidth(parseInt(e.target.value))} + />
- steps: setSteps(parseInt(e.target.value))} /> + steps: + setSteps(parseInt(e.target.value))} + />
- space: setSpace(parseInt(e.target.value))} /> + space: + setGap(parseInt(e.target.value))} + />

Circle Progress:

percent: {percent}%
strokeWidth: {strokeWidth}px
steps: {steps}
-
space: {space}px
- +
gap: {gap}px
); }; -export default Example; \ No newline at end of file +export default Example; diff --git a/src/Circle/PtgCircle.tsx b/src/Circle/PtgCircle.tsx index 04d2da6..88311b4 100644 --- a/src/Circle/PtgCircle.tsx +++ b/src/Circle/PtgCircle.tsx @@ -7,16 +7,8 @@ interface BlockProps { children?: React.ReactNode; } -const Block = ({ bg, children }: BlockProps) => ( -
- {children} -
+const Block: React.FC = ({ bg, children }) => ( +
{children}
); function getPtgColors(color: Record, scale: number) { @@ -97,7 +89,6 @@ const PtgCircle = React.forwardRef((props, return ( <> {circleNode} - diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx index 94aa047..db090f7 100644 --- a/src/Circle/index.tsx +++ b/src/Circle/index.tsx @@ -40,8 +40,8 @@ const Circle: React.FC = (props) => { const perimeter = Math.PI * 2 * radius; const rotateDeg = gapDegree > 0 ? 90 + gapDegree / 2 : -90; const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360); - const { count: stepCount, space: stepSpace } = - typeof steps === 'object' ? steps : { count: steps, space: 2 }; + const { count: stepCount, gap: stepGap } = + typeof steps === 'object' ? steps : { count: steps, gap: 2 }; const percentList = toArray(percent); const strokeColorList = toArray(strokeColor); @@ -70,7 +70,7 @@ const Circle: React.FC = (props) => { const getStokeList = () => { let stackPtg = 0; return percentList - .map((ptg, index) => { + .map((ptg, index) => { const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; const circleStyleForStack = getCircleStyle( perimeter, @@ -119,7 +119,7 @@ const Circle: React.FC = (props) => { const stepPtg = 100 / stepCount; let stackPtg = 0; - return new Array(stepCount).fill(null).map((_, index) => { + return new Array(stepCount).fill(null).map((_, index) => { const color = index <= current - 1 ? strokeColorList[0] : trailColor; const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined; const circleStyleForStack = getCircleStyle( @@ -133,10 +133,10 @@ const Circle: React.FC = (props) => { color, 'butt', strokeWidth, - stepSpace, + stepGap, ); stackPtg += - ((perimeterWithoutGap - circleStyleForStack.strokeDashoffset + stepSpace) * 100) / + ((perimeterWithoutGap - (circleStyleForStack.strokeDashoffset as number) + stepGap) * 100) / perimeterWithoutGap; return ( diff --git a/src/Circle/util.ts b/src/Circle/util.ts index 114d49a..b57ee71 100644 --- a/src/Circle/util.ts +++ b/src/Circle/util.ts @@ -1,5 +1,6 @@ import type { StrokeColorType } from '../interface'; import type { ProgressProps } from '..'; +import type React from 'react'; export const VIEW_BOX_SIZE = 100; @@ -9,13 +10,13 @@ export const getCircleStyle = ( offset: number, percent: number, rotateDeg: number, - gapDegree, + gapDegree: number, gapPosition: ProgressProps['gapPosition'] | undefined, strokeColor: StrokeColorType, strokeLinecap: ProgressProps['strokeLinecap'], - strokeWidth, + strokeWidth: number, stepSpace = 0, -) => { +): React.CSSProperties => { const offsetDeg = (offset / 100) * 360 * ((360 - gapDegree) / 360); const positionDeg = gapDegree === 0 diff --git a/src/Line.tsx b/src/Line.tsx index d8c9a14..259aa3a 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -63,7 +63,7 @@ const Line: React.FC = (props) => { dashPercent = 1; break; } - const pathStyle = { + const pathStyle: React.CSSProperties = { strokeDasharray: `${ptg * dashPercent}px, 100px`, strokeDashoffset: `-${stackPtg}px`, transition: diff --git a/src/interface.ts b/src/interface.ts index 4446827..41a8f88 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -13,7 +13,7 @@ export interface ProgressProps { gapPosition?: GapPositionType; transition?: string; onClick?: React.MouseEventHandler; - steps?: number | { count: number; space: number }; + steps?: number | { count: number; gap: number }; } export type StrokeColorObject = Record;