refactor: progress getSuccessPercent (#26302)

components/progress/Circle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Circle as RCCircle } from 'rc-progress';
 import classNames from 'classnames';
-import { validProgress } from './utils';
+import { validProgress, getSuccessPercent } from './utils';
 import { ProgressProps } from './progress';
 
 interface CircleProps extends ProgressProps {
@@ -12,31 +12,20 @@ interface CircleProps extends ProgressProps {
 
 function getPercentage({ percent, success, successPercent }: CircleProps) {
   const ptg = validProgress(percent);
-  /** @deprecated Use `percent` instead */
-  if (success && 'progress' in success) {
-    successPercent = success.progress;
-  }
-  if (success && 'percent' in success) {
-    successPercent = success.percent;
-  }
-  if (!successPercent) {
+  const realSuccessPercent = getSuccessPercent({ success, successPercent });
+  if (!realSuccessPercent) {
     return ptg;
   }
-
-  const successPtg = validProgress(successPercent);
-  return [successPercent, validProgress(ptg - successPtg)];
+  return [
+    validProgress(realSuccessPercent),
+    validProgress(ptg - validProgress(realSuccessPercent)),
+  ];
 }
 
 function getStrokeColor({ success, strokeColor, successPercent }: CircleProps) {
   const color = strokeColor || null;
-  /** @deprecated Use `percent` instead */
-  if (success && 'progress' in success) {
-    successPercent = success.progress;
-  }
-  if (success && 'percent' in success) {
-    successPercent = success.percent;
-  }
-  if (!successPercent) {
+  const realSuccessPercent = getSuccessPercent({ success, successPercent });
+  if (!realSuccessPercent) {
     return color;
   }
   return [null, color];

components/progress/Line.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-
 import { ProgressGradient, ProgressProps, StringGradients } from './progress';
-
-import { validProgress } from './utils';
+import { validProgress, getSuccessPercent } from './utils';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -70,62 +68,40 @@ const Line: React.FC<LineProps> = props => {
     success,
   } = props;
 
-  let backgroundProps;
-  if (strokeColor && typeof strokeColor !== 'string') {
-    backgroundProps = handleGradient(strokeColor);
-  } else {
-    backgroundProps = {
-      background: strokeColor,
-    };
-  }
+  const backgroundProps =
+    strokeColor && typeof strokeColor !== 'string'
+      ? handleGradient(strokeColor)
+      : {
+          background: strokeColor,
+        };
 
-  let trailStyle;
-  if (trailColor && typeof trailColor === 'string') {
-    trailStyle = {
-      backgroundColor: trailColor,
-    };
-  }
+  const trailStyle = trailColor
+    ? {
+        backgroundColor: trailColor,
+      }
+    : undefined;
 
-  let successColor;
-  if (success && 'strokeColor' in success) {
-    successColor = success.strokeColor;
-  }
-
-  let successStyle;
-  if (successColor && typeof successColor === 'string') {
-    successStyle = {
-      backgroundColor: successColor,
-    };
-  }
   const percentStyle = {
     width: `${validProgress(percent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
     borderRadius: strokeLinecap === 'square' ? 0 : '',
     ...backgroundProps,
-  };
+  } as React.CSSProperties;
 
-  let { successPercent } = props;
-  /** @deprecated Use `percent` instead */
-  if (success && 'progress' in success) {
-    successPercent = success.progress;
-  }
+  const successPercent = getSuccessPercent(props);
 
-  if (success && 'percent' in success) {
-    successPercent = success.percent;
-  }
-
-  let successPercentStyle = {
+  const successPercentStyle = {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
     borderRadius: strokeLinecap === 'square' ? 0 : '',
-  };
-  if (successStyle) {
-    successPercentStyle = { ...successPercentStyle, ...successStyle };
-  }
+    backgroundColor: success?.strokeColor,
+  } as React.CSSProperties;
+
   const successSegment =
     successPercent !== undefined ? (
       <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
     ) : null;
+
   return (
     <>
       <div className={`${prefixCls}-outer`}>

components/progress/progress.tsx

@@ -5,14 +5,13 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { tuple } from '../_util/type';
 import devWarning from '../_util/devWarning';
 import Line from './Line';
 import Circle from './Circle';
 import Steps from './Steps';
-import { validProgress } from './utils';
+import { validProgress, getSuccessPercent } from './utils';
 
 const ProgressTypes = tuple('line', 'circle', 'dashboard');
 export type ProgressType = typeof ProgressTypes[number];
@@ -65,15 +64,8 @@ export default class Progress extends React.Component<ProgressProps> {
   };
 
   getPercentNumber() {
-    const { percent = 0, success } = this.props;
-    let { successPercent } = this.props;
-    /** @deprecated Use `percent` instead */
-    if (success && 'progress' in success) {
-      successPercent = success.progress;
-    }
-    if (success && 'percent' in success) {
-      successPercent = success.percent;
-    }
+    const { percent = 0 } = this.props;
+    const successPercent = getSuccessPercent(this.props);
     return parseInt(
       successPercent !== undefined ? successPercent.toString() : percent.toString(),
       10,
@@ -89,15 +81,8 @@ export default class Progress extends React.Component<ProgressProps> {
   }
 
   renderProcessInfo(prefixCls: string, progressStatus: typeof ProgressStatuses[number]) {
-    const { showInfo, format, type, percent, success } = this.props;
-    let { successPercent } = this.props;
-    if (success && 'progress' in success) {
-      devWarning(false, 'Progress', '`success.progress` is deprecated. Please use `success.percent` instead.');
-      successPercent = success.progress;
-    }
-    if (success && 'percent' in success) {
-      successPercent = success.percent;
-    }
+    const { showInfo, format, type, percent } = this.props;
+    const successPercent = getSuccessPercent(this.props);
     if (!showInfo) return null;
 
     let text;
@@ -136,7 +121,7 @@ export default class Progress extends React.Component<ProgressProps> {
     devWarning(
       !('successPercent' in props),
       'Progress',
-      '`successPercent` is deprecated. Please use `success` instead.',
+      '`successPercent` is deprecated. Please use `success.percent` instead.',
     );
 
     let progress;

components/progress/utils.ts

@@ -1,4 +1,5 @@
-// eslint-disable-next-line import/prefer-default-export
+import devWarning from '../_util/devWarning';
+
 export function validProgress(progress: number | undefined) {
   if (!progress || progress < 0) {
     return 0;
@@ -8,3 +9,29 @@ export function validProgress(progress: number | undefined) {
   }
   return progress;
 }
+
+export function getSuccessPercent({
+  success,
+  successPercent,
+}: {
+  success?: {
+    progress?: number;
+    percent?: number;
+  };
+  successPercent?: number;
+}) {
+  let percent = successPercent;
+  /** @deprecated Use `percent` instead */
+  if (success && 'progress' in success) {
+    devWarning(
+      false,
+      'Progress',
+      '`success.progress` is deprecated. Please use `success.percent` instead.',
+    );
+    percent = success.progress;
+  }
+  if (success && 'percent' in success) {
+    percent = success.percent;
+  }
+  return percent;
+}