refactor: Line Progress use pseudo (#46789)

* refactor: Line Progress use pseudo * chore: code clean * chore: update snapshot
ant-design · Jan 5, 2024 · 5ee391f · 5ee391f
1 parent 4304e77
commit 5ee391f
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 94 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -21839,7 +21839,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21867,7 +21867,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21895,7 +21895,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21951,7 +21951,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21979,7 +21979,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -22007,7 +22007,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
     >
       <div
         class="prefix-Progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>

diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
@@ -5,8 +5,7 @@ import { devUseWarning } from '../_util/warning';
 import type { DirectionType } from '../config-provider';
 import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
 import { getSize, getSuccessPercent, validProgress } from './utils';
-import { useContext } from 'react';
-import { ConfigContext } from '../config-provider';
+import { LineStrokeColorVar, Percent } from './style';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -65,9 +64,11 @@ export const handleGradient = (
   } = strokeColor;
   if (Object.keys(rest).length !== 0) {
     const sortedGradients = sortGradient(rest as StringGradients);
-    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
+    const background = `linear-gradient(${direction}, ${sortedGradients})`;
+    return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
   }
-  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
+  const background = `linear-gradient(${direction}, ${from}, ${to})`;
+  return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
 };
 
 const Line: React.FC<LineProps> = (props) => {
@@ -84,20 +85,13 @@ const Line: React.FC<LineProps> = (props) => {
     success,
   } = props;
 
-  const { direction } = useContext(ConfigContext);
-
-  const backgroundProps: React.CSSProperties =
+  const backgroundProps =
     strokeColor && typeof strokeColor !== 'string'
       ? handleGradient(strokeColor, directionConfig)
-      : { backgroundColor: strokeColor };
+      : { [LineStrokeColorVar]: strokeColor, background: strokeColor };
 
   const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
 
-  const trailStyle: React.CSSProperties = {
-    backgroundColor: trailColor || undefined,
-    borderRadius,
-  };
-
   const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
 
   const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
@@ -108,31 +102,27 @@ const Line: React.FC<LineProps> = (props) => {
     warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
   }
 
-  const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px';
+  const trailStyle: React.CSSProperties = {
+    backgroundColor: trailColor || undefined,
+    borderRadius,
+  };
 
-  const percentStyle: React.CSSProperties = {
-    width: `100%`,
+  const percentStyle = {
+    width: `${validProgress(percent)}%`,
     height,
     borderRadius,
-    clipPath:
-      direction === 'rtl'
-        ? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})`
-        : `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`,
     ...backgroundProps,
+    [Percent]: validProgress(percent) / 100,
   };
 
   const successPercent = getSuccessPercent(props);
 
-  const successPercentStyle: React.CSSProperties = {
-    width: `100%`,
+  const successPercentStyle = {
+    width: `${validProgress(successPercent)}%`,
     height,
     borderRadius,
-    clipPath:
-      direction === 'rtl'
-        ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})`
-        : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`,
     backgroundColor: success?.strokeColor,
-  };
+  } as React.CSSProperties;
 
   const outerStyle: React.CSSProperties = {
     width: width < 0 ? '100%' : width,

diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -533,7 +533,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 8px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -562,7 +562,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 6px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -591,7 +591,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 20px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -1275,7 +1275,7 @@ Array [
         >
           <div
             class="ant-progress-bg"
-            style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+            style="width: 0%; height: 8px; --progress-percent: 0;"
           />
         </div>
       </div>
@@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 0.09999999999999432% 0 0 round 100px);"
+          style="width: 99.9%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.9990000000000001;"
         />
       </div>
     </div>
@@ -1572,7 +1572,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2104,7 +2104,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 8px; --progress-percent: 0.3;"
         />
       </div>
     </div>
@@ -2129,7 +2129,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2154,7 +2154,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 30% 0 0 round 100px);"
+          style="width: 70%; height: 8px; --progress-percent: 0.7;"
         />
       </div>
     </div>
@@ -2197,7 +2197,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
+          style="width: 100%; height: 8px; --progress-percent: 1;"
         />
       </div>
     </div>
@@ -2239,7 +2239,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 6px; --progress-percent: 0.3;"
         />
       </div>
     </div>
@@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 6px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 30% 0 0 round 100px);"
+          style="width: 70%; height: 6px; --progress-percent: 0.7;"
         />
       </div>
     </div>
@@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 0% 0 0 round 100px);"
+          style="width: 100%; height: 6px; --progress-percent: 1;"
         />
       </div>
     </div>
@@ -2410,7 +2410,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 0);"
+          style="width: 75%; height: 8px; border-radius: 0; --progress-percent: 0.75;"
         />
       </div>
     </div>
@@ -2559,11 +2559,11 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
+          style="width: 60%; height: 8px; --progress-percent: 0.6;"
         />
         <div
           class="ant-progress-success-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 8px;"
         />
       </div>
     </div>
@@ -2775,7 +2775,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 8px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -2804,7 +2804,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 6px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -2833,7 +2833,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 20px; --progress-percent: 0.5;"
             />
           </div>
         </div>