From c97af1ac1852e01359048c0e463852ef451e3075 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sat, 17 Oct 2020 20:52:58 +0800 Subject: [PATCH] refactor: progress to ts --- components/progress/circle.jsx | 70 --------------- components/progress/circle.tsx | 85 +++++++++++++++++++ components/progress/{index.jsx => index.ts} | 5 +- components/progress/{line.jsx => line.tsx} | 0 .../progress/{progress.jsx => progress.tsx} | 37 ++------ components/progress/props.ts | 24 ++++++ components/progress/{utils.js => utils.ts} | 2 +- 7 files changed, 121 insertions(+), 102 deletions(-) delete mode 100644 components/progress/circle.jsx create mode 100644 components/progress/circle.tsx rename components/progress/{index.jsx => index.ts} (57%) rename components/progress/{line.jsx => line.tsx} (100%) rename components/progress/{progress.jsx => progress.tsx} (75%) create mode 100644 components/progress/props.ts rename components/progress/{utils.js => utils.ts} (69%) diff --git a/components/progress/circle.jsx b/components/progress/circle.jsx deleted file mode 100644 index 3ba042c18..000000000 --- a/components/progress/circle.jsx +++ /dev/null @@ -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 ( -
- - {slots?.default()} -
- ); -}; - -export default Circle; diff --git a/components/progress/circle.tsx b/components/progress/circle.tsx new file mode 100644 index 000000000..025508c01 --- /dev/null +++ b/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 = { + normal: '#108ee9', + exception: '#ff5500', + success: '#87d068', +}; + +export type ICircleProps = ExtractPropTypes; + +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 ( +
+ + {slots?.default()} +
+ ); + }; + }, +}); + +export default Circle; diff --git a/components/progress/index.jsx b/components/progress/index.ts similarity index 57% rename from components/progress/index.jsx rename to components/progress/index.ts index ac8b2be7e..c74c457fe 100644 --- a/components/progress/index.jsx +++ b/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; }; diff --git a/components/progress/line.jsx b/components/progress/line.tsx similarity index 100% rename from components/progress/line.jsx rename to components/progress/line.tsx diff --git a/components/progress/progress.jsx b/components/progress/progress.tsx similarity index 75% rename from components/progress/progress.jsx rename to components/progress/progress.tsx index a9a8a6d6c..0ba670a51 100644 --- a/components/progress/progress.jsx +++ b/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
{progress}
; }, -}; +}); diff --git a/components/progress/props.ts b/components/progress/props.ts new file mode 100644 index 000000000..a18b1c7c2 --- /dev/null +++ b/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, +}; diff --git a/components/progress/utils.js b/components/progress/utils.ts similarity index 69% rename from components/progress/utils.js rename to components/progress/utils.ts index a2dd16ddf..14a930d88 100644 --- a/components/progress/utils.js +++ b/components/progress/utils.ts @@ -1,4 +1,4 @@ -export function validProgress(progress) { +export function validProgress(progress?: number) { if (!progress || progress < 0) { return 0; }