ant-design-vue/components/progress/circle.tsx
2020-10-17 20:52:58 +08:00

86 lines
2.5 KiB
Vue

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;