refactor: progress

Author: tangjinzhou

components/progress/Circle.tsx

@@ -1,26 +1,21 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue';
+import type { CSSProperties } from 'vue';
 import { computed, defineComponent } from 'vue';
 import { presetPrimaryColors } from '@ant-design/colors';
 import { Circle as VCCircle } from '../vc-progress';
 import { getSuccessPercent, validProgress } from './utils';
+import type { ProgressProps } from './props';
 import { progressProps } from './props';
-import PropTypes from '../_util/vue-types';
 
-const circleProps = {
-  ...progressProps,
-  prefixCls: PropTypes.string,
-  // progressStatus: PropTypes.string,
-};
-export type CircleProps = Partial<ExtractPropTypes<typeof circleProps>>;
+export type CircleProps = ProgressProps;
 
 function getPercentage({ percent, success, successPercent }: CircleProps) {
   const realSuccessPercent = validProgress(getSuccessPercent({ success, successPercent }));
   return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
 }
 
 export default defineComponent({
-  props: progressProps,
   inheritAttrs: false,
+  props: progressProps(),
   setup(props, { slots }) {
     const gapDeg = computed(() => {
       // Support gapDeg = 0 when type = 'dashboard'

components/progress/Line.tsx

@@ -7,7 +7,7 @@ import { progressProps } from './props';
 import { getSuccessPercent, validProgress } from './utils';
 
 const lineProps = {
-  ...progressProps,
+  ...progressProps(),
   prefixCls: PropTypes.string,
   direction: {
     type: String as PropType<Direction>,
@@ -68,8 +68,8 @@ export const handleGradient = (strokeColor: ProgressGradient, directionConfig: D
 };
 
 export default defineComponent({
-  props: lineProps,
   name: 'Line',
+  props: lineProps,
   setup(props, { slots }) {
     const backgroundProps = computed(() => {
       const { strokeColor, direction } = props;

components/progress/Steps.tsx

@@ -1,11 +1,12 @@
-import { computed, ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import { computed } from 'vue';
 import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
 
 const stepsProps = {
-  ...progressProps,
+  ...progressProps(),
   steps: PropTypes.number,
   size: {
     type: String as PropType<ProgressSize>,

components/progress/progress.tsx

@@ -15,7 +15,7 @@ import { progressProps, progressStatuses } from './props';
 
 export default defineComponent({
   name: 'AProgress',
-  props: initDefaultProps(progressProps, {
+  props: initDefaultProps(progressProps(), {
     type: 'line',
     percent: 0,
     showInfo: true,

components/progress/props.ts

@@ -17,7 +17,7 @@ export interface SuccessProps {
   strokeColor?: string;
 }
 
-export const progressProps = {
+export const progressProps = () => ({
   prefixCls: PropTypes.string,
   type: PropTypes.oneOf(ProgressType),
   percent: PropTypes.number,
@@ -41,6 +41,6 @@ export const progressProps = {
   steps: PropTypes.number,
   /** @deprecated Use `success` instead */
   successPercent: PropTypes.number,
-};
+});
 
-export type ProgressProps = Partial<ExtractPropTypes<typeof progressProps>>;
+export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>;

components/vc-progress/src/Circle.tsx

@@ -1,5 +1,6 @@
 import { useTransitionDuration, defaultProps } from './common';
-import { propTypes, GapPositionType } from './types';
+import type { GapPositionType } from './types';
+import { propTypes } from './types';
 import { computed, defineComponent, ref } from 'vue';
 import initDefaultProps from '../../_util/props-util/initDefaultProps';
 import { useRef } from '../../_util/hooks/useRef';