Circle.js
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import * as React from 'react';
import { Circle as RCCircle } from 'rc-progress';
import { presetPrimaryColors } from '@ant-design/colors';
import classNames from 'classnames';
import { validProgress, getSuccessPercent } from './utils';
function getPercentage(_ref) {
var percent = _ref.percent,
success = _ref.success,
successPercent = _ref.successPercent;
var ptg = validProgress(percent);
var realSuccessPercent = getSuccessPercent({
success: success,
successPercent: successPercent
});
if (!realSuccessPercent) {
return ptg;
}
return [validProgress(realSuccessPercent), validProgress(ptg - validProgress(realSuccessPercent))];
}
function getStrokeColor(_ref2) {
var success = _ref2.success,
strokeColor = _ref2.strokeColor,
successPercent = _ref2.successPercent;
var color = strokeColor || null;
var realSuccessPercent = getSuccessPercent({
success: success,
successPercent: successPercent
});
if (!realSuccessPercent) {
return color;
}
return [presetPrimaryColors.green, color];
}
var Circle = function Circle(props) {
var prefixCls = props.prefixCls,
width = props.width,
strokeWidth = props.strokeWidth,
trailColor = props.trailColor,
strokeLinecap = props.strokeLinecap,
gapPosition = props.gapPosition,
gapDegree = props.gapDegree,
type = props.type,
children = props.children;
var circleSize = width || 120;
var circleStyle = {
width: circleSize,
height: circleSize,
fontSize: circleSize * 0.15 + 6
};
var circleWidth = strokeWidth || 6;
var gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top';
var getGapDegree = function getGapDegree() {
// Support gapDeg = 0 when type = 'dashboard'
if (gapDegree || gapDegree === 0) {
return gapDegree;
}
if (type === 'dashboard') {
return 75;
}
return undefined;
}; // using className to style stroke color
var strokeColor = getStrokeColor(props);
var isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
var wrapperClassName = classNames("".concat(prefixCls, "-inner"), _defineProperty({}, "".concat(prefixCls, "-circle-gradient"), isGradient));
return /*#__PURE__*/React.createElement("div", {
className: wrapperClassName,
style: circleStyle
}, /*#__PURE__*/React.createElement(RCCircle, {
percent: getPercentage(props),
strokeWidth: circleWidth,
trailWidth: circleWidth,
strokeColor: strokeColor,
strokeLinecap: strokeLinecap,
trailColor: trailColor,
prefixCls: prefixCls,
gapDegree: getGapDegree(),
gapPosition: gapPos
}), children);
};
export default Circle;