1 | "use client";
|
2 |
|
3 | import classNames from 'classnames';
|
4 | import { Circle as RCCircle } from 'rc-progress';
|
5 | import * as React from 'react';
|
6 | import Tooltip from '../tooltip';
|
7 | import { getPercentage, getSize, getStrokeColor } from './utils';
|
8 | const CIRCLE_MIN_STROKE_WIDTH = 3;
|
9 | const getMinPercent = width => CIRCLE_MIN_STROKE_WIDTH / width * 100;
|
10 | const Circle = props => {
|
11 | const {
|
12 | prefixCls,
|
13 | trailColor = null,
|
14 | strokeLinecap = 'round',
|
15 | gapPosition,
|
16 | gapDegree,
|
17 | width: originWidth = 120,
|
18 | type,
|
19 | children,
|
20 | success,
|
21 | size = originWidth
|
22 | } = props;
|
23 | const [width, height] = getSize(size, 'circle');
|
24 | let {
|
25 | strokeWidth
|
26 | } = props;
|
27 | if (strokeWidth === undefined) {
|
28 | strokeWidth = Math.max(getMinPercent(width), 6);
|
29 | }
|
30 | const circleStyle = {
|
31 | width,
|
32 | height,
|
33 | fontSize: width * 0.15 + 6
|
34 | };
|
35 | const realGapDegree = React.useMemo(() => {
|
36 |
|
37 | if (gapDegree || gapDegree === 0) {
|
38 | return gapDegree;
|
39 | }
|
40 | if (type === 'dashboard') {
|
41 | return 75;
|
42 | }
|
43 | return undefined;
|
44 | }, [gapDegree, type]);
|
45 | const gapPos = gapPosition || type === 'dashboard' && 'bottom' || undefined;
|
46 |
|
47 | const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
|
48 | const strokeColor = getStrokeColor({
|
49 | success,
|
50 | strokeColor: props.strokeColor
|
51 | });
|
52 | const wrapperClassName = classNames(`${prefixCls}-inner`, {
|
53 | [`${prefixCls}-circle-gradient`]: isGradient
|
54 | });
|
55 | const circleContent = React.createElement(RCCircle, {
|
56 | percent: getPercentage(props),
|
57 | strokeWidth: strokeWidth,
|
58 | trailWidth: strokeWidth,
|
59 | strokeColor: strokeColor,
|
60 | strokeLinecap: strokeLinecap,
|
61 | trailColor: trailColor,
|
62 | prefixCls: prefixCls,
|
63 | gapDegree: realGapDegree,
|
64 | gapPosition: gapPos
|
65 | });
|
66 | return React.createElement("div", {
|
67 | className: wrapperClassName,
|
68 | style: circleStyle
|
69 | }, width <= 20 ? ( React.createElement(Tooltip, {
|
70 | title: children
|
71 | }, React.createElement("span", null, circleContent))) : ( React.createElement(React.Fragment, null, circleContent, children)));
|
72 | };
|
73 | export default Circle; |
\ | No newline at end of file |