refactoring: rewrite renderCircle with React Component (#50358)

components/spin/Indicator/Progress.tsx

@@ -7,7 +7,35 @@ export interface ProgressProps {
   percent: number;
 }
 
-export default function Progress({ percent, prefixCls }: ProgressProps) {
+const viewSize = 100;
+const borderWidth = viewSize / 5;
+const radius = viewSize / 2 - borderWidth / 2;
+const circumference = radius * 2 * Math.PI;
+const position = 50;
+
+interface CircleProps {
+  dotClassName?: string;
+  style?: React.CSSProperties;
+  hasCircleCls?: boolean;
+}
+
+const CustomCircle: React.FC<Readonly<CircleProps>> = (props) => {
+  const { dotClassName, style, hasCircleCls } = props;
+  return (
+    <circle
+      className={classNames(`${dotClassName}-circle`, {
+        [`${dotClassName}-circle-bg`]: hasCircleCls,
+      })}
+      r={radius}
+      cx={position}
+      cy={position}
+      strokeWidth={borderWidth}
+      style={style}
+    />
+  );
+};
+
+const Progress: React.FC<Readonly<ProgressProps>> = ({ percent, prefixCls }) => {
   const dotClassName = `${prefixCls}-dot`;
   const holderClassName = `${dotClassName}-holder`;
   const hideClassName = `${holderClassName}-hidden`;
@@ -24,27 +52,18 @@ export default function Progress({ percent, prefixCls }: ProgressProps) {
   // ==================== Progress ====================
   const safePtg = Math.max(Math.min(percent, 100), 0);
 
-  const viewSize = 100;
-  const borderWidth = viewSize / 5;
-  const radius = viewSize / 2 - borderWidth / 2;
-  const circumference = radius * 2 * Math.PI;
-
-  const renderCircle = (circleClassName?: string, style?: React.CSSProperties) => (
-    <circle
-      className={classNames(circleClassName, `${dotClassName}-circle`)}
-      r={radius}
-      cx="50"
-      cy="50"
-      strokeWidth={borderWidth}
-      style={style}
-    />
-  );
-
   // ===================== Render =====================
   if (!render) {
     return null;
   }
 
+  const circleStyle: React.CSSProperties = {
+    strokeDashoffset: `${circumference / 4}`,
+    strokeDasharray: `${(circumference * safePtg) / 100} ${
+      (circumference * (100 - safePtg)) / 100
+    }`,
+  };
+
   return (
     <span
       className={classNames(
@@ -61,14 +80,11 @@ export default function Progress({ percent, prefixCls }: ProgressProps) {
         aria-valuemax={100}
         aria-valuenow={safePtg}
       >
-        {renderCircle(`${dotClassName}-circle-bg`)}
-        {renderCircle('', {
-          strokeDasharray: `${(circumference * safePtg) / 100} ${
-            (circumference * (100 - safePtg)) / 100
-          }`,
-          strokeDashoffset: `${circumference / 4}`,
-        })}
+        <CustomCircle dotClassName={dotClassName} hasCircleCls />
+        <CustomCircle dotClassName={dotClassName} style={circleStyle} />
       </svg>
     </span>
   );
-}
+};
+
+export default Progress;

components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -370,7 +370,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
         viewBox="0 0 100 100"
       >
         <circle
-          class="ant-spin-dot-circle-bg ant-spin-dot-circle"
+          class="ant-spin-dot-circle ant-spin-dot-circle-bg"
           cx="50"
           cy="50"
           r="40"
@@ -382,7 +382,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
           cy="50"
           r="40"
           stroke-width="20"
-          style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
+          style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
         />
       </svg>
     </span>
@@ -423,7 +423,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
         viewBox="0 0 100 100"
       >
         <circle
-          class="ant-spin-dot-circle-bg ant-spin-dot-circle"
+          class="ant-spin-dot-circle ant-spin-dot-circle-bg"
           cx="50"
           cy="50"
           r="40"
@@ -435,7 +435,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
           cy="50"
           r="40"
           stroke-width="20"
-          style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
+          style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
         />
       </svg>
     </span>
@@ -476,7 +476,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
         viewBox="0 0 100 100"
       >
         <circle
-          class="ant-spin-dot-circle-bg ant-spin-dot-circle"
+          class="ant-spin-dot-circle ant-spin-dot-circle-bg"
           cx="50"
           cy="50"
           r="40"
@@ -488,7 +488,7 @@ exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] =
           cy="50"
           r="40"
           stroke-width="20"
-          style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
+          style="stroke-dashoffset: 62.83185307179586; stroke-dasharray: 0 251.32741228718342;"
         />
       </svg>
     </span>