chore: rename space => gap (#275)

react-component · Mar 22, 2024 · 6df24f2 · 6df24f2
1 parent ff694e1
commit 6df24f2
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 110 deletions.
diff --git 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<ProgressProps, any> {
-  constructor(props) {
+  constructor(props: ProgressProps) {
     super(props);
     this.state = {
       percent: 0,

diff --git 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<ProgressProps, any> {
-  constructor(props) {
+  constructor(props: ProgressProps) {
     super(props);
     this.state = {
       percent: 100,
@@ -36,10 +42,6 @@ class Example extends React.Component<ProgressProps, any> {
   }
 
   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<ProgressProps, any> {
       0,
       subPathsCount,
     );
-    const multiPercentageStrokeColors = multiPercentage.map((v, index) => getColor(index));
+    const multiPercentageStrokeColors = multiPercentage.map((_, i) => getColor(i));
 
     return (
       <div>

diff --git 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 (
     <div>
       <h3>Circle Progress {90}%</h3>
@@ -16,10 +16,7 @@ const Example = () => {
           percent={90}
           strokeWidth={6}
           strokeLinecap="round"
-          strokeColor={{
-            '0%': '#108ee9',
-            '100%': '#87d068',
-          }}
+          strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
         />
       </div>
       <h3>Circle Progress {100}%</h3>
@@ -28,23 +25,15 @@ const Example = () => {
           percent={100}
           strokeWidth={6}
           strokeLinecap="round"
-          strokeColor={{
-            '100%': '#108ee9',
-            '0%': '#87d068',
-          }}
+          strokeColor={{ '100%': '#108ee9', '0%': '#87d068' }}
         />
       </div>
-
       <h3>Circle colors</h3>
       <div style={circleContainerStyle}>
         <Circle
           percent={90}
           strokeWidth={6}
-          strokeColor={{
-            '0%': 'green',
-            '99%': 'red',
-            '100%': 'blue',
-          }}
+          strokeColor={{ '0%': 'green', '99%': 'red', '100%': 'blue' }}
         />
       </div>
     </div>

diff --git 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<ProgressProps, any> {
-  constructor(props) {
+  constructor(props: ProgressProps) {
     super(props);
     this.state = {
       percent: 9,
@@ -20,29 +21,33 @@ class Example extends React.Component<ProgressProps, any> {
       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
@@ -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<number>(30);
   const [strokeWidth, setStrokeWidth] = useState<number>(20);
   const [steps, setSteps] = useState<number>(5);
-  const [space, setSpace] = useState<number>(4);
-
-
+  const [gap, setGap] = useState<number>(4);
   return (
     <div>
       <div>
-        percent: <input
-        id='range'
-        type='range'
-        min='0'
-        max='100'
-        value={percent}
-        style={{ width: 300 }}
-        onChange={(e) => setPercent(parseInt(e.target.value))} />
+        percent:
+        <input
+          id="range"
+          type="range"
+          min="0"
+          max="100"
+          value={percent}
+          style={{ width: 300 }}
+          onChange={(e) => setPercent(parseInt(e.target.value))}
+        />
       </div>
       <div>
-        strokeWidth: <input
-        id='range'
-        type='range'
-        min='0'
-        max='30'
-        value={strokeWidth}
-        style={{ width: 300 }}
-        onChange={(e) => setStrokeWidth(parseInt(e.target.value))} />
+        strokeWidth:
+        <input
+          id="range"
+          type="range"
+          min="0"
+          max="30"
+          value={strokeWidth}
+          style={{ width: 300 }}
+          onChange={(e) => setStrokeWidth(parseInt(e.target.value))}
+        />
       </div>
       <div>
-        steps: <input
-        id='range'
-        type='range'
-        min='0'
-        max='15'
-        value={steps}
-        style={{ width: 300 }}
-        onChange={(e) => setSteps(parseInt(e.target.value))} />
+        steps:
+        <input
+          id="range"
+          type="range"
+          min="0"
+          max="15"
+          value={steps}
+          style={{ width: 300 }}
+          onChange={(e) => setSteps(parseInt(e.target.value))}
+        />
       </div>
       <div>
-        space: <input
-        id='range'
-        type='range'
-        min='0'
-        max='15'
-        value={space}
-        style={{ width: 300 }}
-        onChange={(e) => setSpace(parseInt(e.target.value))} />
+        space:
+        <input
+          id="range"
+          type="range"
+          min="0"
+          max="15"
+          value={gap}
+          style={{ width: 300 }}
+          onChange={(e) => setGap(parseInt(e.target.value))}
+        />
       </div>
       <h3>Circle Progress:</h3>
       <div>percent: {percent}% </div>
       <div>strokeWidth: {strokeWidth}px</div>
       <div>steps: {steps}</div>
-      <div>space: {space}px</div>
-
+      <div>gap: {gap}px</div>
       <div style={{ width: 100 }}>
         <Circle
           percent={percent}
           strokeWidth={strokeWidth}
-          steps={{
-            count: steps,
-            space: space,
-          }}
-          strokeColor={'red'}
+          steps={{ count: steps, gap: gap }}
+          strokeColor="red"
         />
       </div>
     </div>
   );
 };
 
-export default Example;
+export default Example;
diff --git a/src/Circle/PtgCircle.tsx b/src/Circle/PtgCircle.tsx
@@ -7,16 +7,8 @@ interface BlockProps {
   children?: React.ReactNode;
 }
 
-const Block = ({ bg, children }: BlockProps) => (
-  <div
-    style={{
-      width: '100%',
-      height: '100%',
-      background: bg,
-    }}
-  >
-    {children}
-  </div>
+const Block: React.FC<BlockProps> = ({ bg, children }) => (
+  <div style={{ width: '100%', height: '100%', background: bg }}>{children}</div>
 );
 
 function getPtgColors(color: Record<string, string>, scale: number) {
@@ -97,7 +89,6 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
   return (
     <>
       <mask id={maskId}>{circleNode}</mask>
-
       <foreignObject x={0} y={0} width={size} height={size} mask={`url(#${maskId})`}>
         <Block bg={linearColorBg}>
           <Block bg={conicColorBg} />

diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx
@@ -40,8 +40,8 @@ const Circle: React.FC<ProgressProps> = (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<ProgressProps> = (props) => {
   const getStokeList = () => {
     let stackPtg = 0;
     return percentList
-      .map((ptg, index) => {
+      .map<React.ReactNode>((ptg, index) => {
         const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
         const circleStyleForStack = getCircleStyle(
           perimeter,
@@ -119,7 +119,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
     const stepPtg = 100 / stepCount;
 
     let stackPtg = 0;
-    return new Array(stepCount).fill(null).map((_, index) => {
+    return new Array(stepCount).fill(null).map<React.ReactNode>((_, 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<ProgressProps> = (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
@@ -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
@@ -63,7 +63,7 @@ const Line: React.FC<ProgressProps> = (props) => {
             dashPercent = 1;
             break;
         }
-        const pathStyle = {
+        const pathStyle: React.CSSProperties = {
           strokeDasharray: `${ptg * dashPercent}px, 100px`,
           strokeDashoffset: `-${stackPtg}px`,
           transition: