Circle.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import { Circle as RCCircle } from 'rc-progress';
  5. import Tooltip from '../tooltip';
  6. import { getPercentage, getSize, getStrokeColor } from './utils';
  7. const CIRCLE_MIN_STROKE_WIDTH = 3;
  8. const getMinPercent = width => CIRCLE_MIN_STROKE_WIDTH / width * 100;
  9. const Circle = props => {
  10. const {
  11. prefixCls,
  12. trailColor = null,
  13. strokeLinecap = 'round',
  14. gapPosition,
  15. gapDegree,
  16. width: originWidth = 120,
  17. type,
  18. children,
  19. success,
  20. size = originWidth,
  21. steps
  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. // Support gapDeg = 0 when type = 'dashboard'
  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 percentArray = getPercentage(props);
  46. const gapPos = gapPosition || type === 'dashboard' && 'bottom' || undefined;
  47. // using className to style stroke color
  48. const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
  49. const strokeColor = getStrokeColor({
  50. success,
  51. strokeColor: props.strokeColor
  52. });
  53. const wrapperClassName = classNames(`${prefixCls}-inner`, {
  54. [`${prefixCls}-circle-gradient`]: isGradient
  55. });
  56. const circleContent = /*#__PURE__*/React.createElement(RCCircle, {
  57. steps: steps,
  58. percent: steps ? percentArray[1] : percentArray,
  59. strokeWidth: strokeWidth,
  60. trailWidth: strokeWidth,
  61. strokeColor: steps ? strokeColor[1] : strokeColor,
  62. strokeLinecap: strokeLinecap,
  63. trailColor: trailColor,
  64. prefixCls: prefixCls,
  65. gapDegree: realGapDegree,
  66. gapPosition: gapPos
  67. });
  68. const smallCircle = width <= 20;
  69. const node = /*#__PURE__*/React.createElement("div", {
  70. className: wrapperClassName,
  71. style: circleStyle
  72. }, circleContent, !smallCircle && children);
  73. if (smallCircle) {
  74. return /*#__PURE__*/React.createElement(Tooltip, {
  75. title: children
  76. }, node);
  77. }
  78. return node;
  79. };
  80. export default Circle;