refactor: progress to ts

components/progress/circle.jsx

@@ -1,70 +0,0 @@
-import { Circle as VCCircle } from '../vc-progress';
-import { validProgress } from './utils';
-
-const statusColorMap = {
-  normal: '#108ee9',
-  exception: '#ff5500',
-  success: '#87d068',
-};
-
-function getPercentage({ percent, successPercent }) {
-  const ptg = validProgress(percent);
-  if (!successPercent) return ptg;
-
-  const successPtg = validProgress(successPercent);
-  return [successPercent, validProgress(ptg - successPtg)];
-}
-
-function getStrokeColor({ progressStatus, successPercent, strokeColor }) {
-  const color = strokeColor || statusColorMap[progressStatus];
-  if (!successPercent) return color;
-  return [statusColorMap.success, color];
-}
-
-const Circle = (_, { attrs, slots }) => {
-  const {
-    prefixCls,
-    width,
-    strokeWidth,
-    trailColor,
-    strokeLinecap,
-    gapPosition,
-    gapDegree,
-    type,
-  } = attrs;
-  const circleSize = width || 120;
-  const circleStyle = {
-    width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-    height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-    fontSize: `${circleSize * 0.15 + 6}px`,
-  };
-  const circleWidth = strokeWidth || 6;
-  const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
-  const gapDeg = gapDegree || (type === 'dashboard' && 75);
-  const strokeColor = getStrokeColor(attrs);
-  const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
-
-  const wrapperClassName = {
-    [`${prefixCls}-inner`]: true,
-    [`${prefixCls}-circle-gradient`]: isGradient,
-  };
-
-  return (
-    <div class={wrapperClassName} style={circleStyle}>
-      <VCCircle
-        percent={getPercentage(attrs)}
-        strokeWidth={circleWidth}
-        trailWidth={circleWidth}
-        strokeColor={strokeColor}
-        strokeLinecap={strokeLinecap}
-        trailColor={trailColor}
-        prefixCls={prefixCls}
-        gapDegree={gapDeg}
-        gapPosition={gapPos}
-      />
-      {slots?.default()}
-    </div>
-  );
-};
-
-export default Circle;

components/progress/circle.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, ExtractPropTypes } from 'vue';
+import { Circle as VCCircle } from '../vc-progress';
+import PropTypes from '../_util/vue-types';
+import { validProgress } from './utils';
+import { ProgressProps } from './props';
+
+const CircleProps = {
+  ...ProgressProps,
+  progressStatus: PropTypes.string,
+};
+
+const statusColorMap: Record<string, string> = {
+  normal: '#108ee9',
+  exception: '#ff5500',
+  success: '#87d068',
+};
+
+export type ICircleProps = ExtractPropTypes<typeof CircleProps>;
+
+function getPercentage({ percent, successPercent }: ICircleProps) {
+  const ptg = validProgress(percent);
+  if (!successPercent) return ptg;
+
+  const successPtg = validProgress(successPercent);
+  return [successPercent, validProgress(ptg - successPtg)];
+}
+
+function getStrokeColor({ progressStatus, successPercent, strokeColor }: ICircleProps) {
+  const color = strokeColor || statusColorMap[progressStatus];
+  if (!successPercent) return color;
+  return [statusColorMap.success, color];
+}
+
+const Circle = defineComponent({
+  props: CircleProps,
+  setup(props, { slots }) {
+    return () => {
+      const {
+        prefixCls,
+        width,
+        strokeWidth,
+        trailColor,
+        strokeLinecap,
+        gapPosition,
+        gapDegree,
+        type,
+      } = props;
+      const circleSize = width || 120;
+      const circleStyle = {
+        width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
+        height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
+        fontSize: `${circleSize * 0.15 + 6}px`,
+      };
+      const circleWidth = strokeWidth || 6;
+      const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+      const gapDeg = gapDegree || (type === 'dashboard' && 75);
+      const strokeColor = getStrokeColor(props);
+      const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
+
+      const wrapperClassName = {
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-circle-gradient`]: isGradient,
+      };
+
+      return (
+        <div class={wrapperClassName} style={circleStyle}>
+          <VCCircle
+            percent={getPercentage(props)}
+            strokeWidth={circleWidth}
+            trailWidth={circleWidth}
+            strokeColor={strokeColor}
+            strokeLinecap={strokeLinecap}
+            trailColor={trailColor}
+            prefixCls={prefixCls}
+            gapDegree={gapDeg}
+            gapPosition={gapPos}
+          />
+          {slots?.default()}
+        </div>
+      );
+    };
+  },
+});
+
+export default Circle;

components/progress/index.ts

@@ -1,9 +1,10 @@
+import { App } from 'vue';
 import Progress from './progress';
 
-export { ProgressProps } from './progress';
+export { ProgressProps } from './props';
 
 /* istanbul ignore next */
-Progress.install = function(app) {
+Progress.install = function(app: App) {
   app.component(Progress.name, Progress);
   return app;
 };

components/progress/progress.tsx

@@ -1,7 +1,7 @@
-import { inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
-import PropTypes from '../_util/vue-types';
-import { getOptionProps, initDefaultProps } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { defaultConfigProvider } from '../config-provider';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@@ -10,30 +10,9 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import Line from './line';
 import Circle from './circle';
 import { validProgress } from './utils';
+import { ProgressProps, ProgressStatuses } from './props';
 
-const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
-export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
-export const ProgressSize = PropTypes.oneOf(['default', 'small']);
-
-export const ProgressProps = {
-  prefixCls: PropTypes.string,
-  type: ProgressType,
-  percent: PropTypes.number,
-  successPercent: PropTypes.number,
-  format: PropTypes.func,
-  status: PropTypes.oneOf(ProgressStatuses),
-  showInfo: PropTypes.looseBool,
-  strokeWidth: PropTypes.number,
-  strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
-  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  trailColor: PropTypes.string,
-  width: PropTypes.number,
-  gapDegree: PropTypes.number,
-  gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  size: ProgressSize,
-};
-
-export default {
+export default defineComponent({
   name: 'AProgress',
   props: initDefaultProps(ProgressProps, {
     type: 'line',
@@ -65,7 +44,7 @@ export default {
       }
       return status || 'normal';
     },
-    renderProcessInfo(prefixCls, progressStatus) {
+    renderProcessInfo(prefixCls: string, progressStatus: typeof ProgressStatuses[number]) {
       const { showInfo, format, type, percent, successPercent } = this.$props;
       if (!showInfo) return null;
 
@@ -93,7 +72,7 @@ export default {
   render() {
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, size, type, showInfo } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('progress', customizePrefixCls);
     const progressStatus = this.getProgressStatus();
     const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
@@ -128,4 +107,4 @@ export default {
     };
     return <div {...progressProps}>{progress}</div>;
   },
-};
+});

components/progress/props.ts

@@ -0,0 +1,24 @@
+import PropTypes from '../_util/vue-types';
+import { tuple } from '../_util/type';
+
+export const ProgressStatuses = tuple('normal', 'exception', 'active', 'success');
+export const ProgressType = PropTypes.oneOf(tuple('line', 'circle', 'dashboard'));
+export const ProgressSize = PropTypes.oneOf(tuple('default', 'small'));
+
+export const ProgressProps = {
+  prefixCls: PropTypes.string,
+  type: ProgressType,
+  percent: PropTypes.number,
+  successPercent: PropTypes.number,
+  format: PropTypes.func,
+  status: PropTypes.oneOf(ProgressStatuses),
+  showInfo: PropTypes.looseBool,
+  strokeWidth: PropTypes.number,
+  strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  trailColor: PropTypes.string,
+  width: PropTypes.number,
+  gapDegree: PropTypes.number,
+  gapPosition: PropTypes.oneOf(tuple('top', 'bottom', 'left', 'right')),
+  size: ProgressSize,
+};

components/progress/utils.ts

@@ -1,4 +1,4 @@
-export function validProgress(progress) {
+export function validProgress(progress?: number) {
   if (!progress || progress < 0) {
     return 0;
   }