Circle.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _classnames = _interopRequireDefault(require("classnames"));
  11. var _rcProgress = require("rc-progress");
  12. var _tooltip = _interopRequireDefault(require("../tooltip"));
  13. var _utils = require("./utils");
  14. const CIRCLE_MIN_STROKE_WIDTH = 3;
  15. const getMinPercent = width => CIRCLE_MIN_STROKE_WIDTH / width * 100;
  16. const Circle = props => {
  17. const {
  18. prefixCls,
  19. trailColor = null,
  20. strokeLinecap = 'round',
  21. gapPosition,
  22. gapDegree,
  23. width: originWidth = 120,
  24. type,
  25. children,
  26. success,
  27. size = originWidth,
  28. steps
  29. } = props;
  30. const [width, height] = (0, _utils.getSize)(size, 'circle');
  31. let {
  32. strokeWidth
  33. } = props;
  34. if (strokeWidth === undefined) {
  35. strokeWidth = Math.max(getMinPercent(width), 6);
  36. }
  37. const circleStyle = {
  38. width,
  39. height,
  40. fontSize: width * 0.15 + 6
  41. };
  42. const realGapDegree = React.useMemo(() => {
  43. // Support gapDeg = 0 when type = 'dashboard'
  44. if (gapDegree || gapDegree === 0) {
  45. return gapDegree;
  46. }
  47. if (type === 'dashboard') {
  48. return 75;
  49. }
  50. return undefined;
  51. }, [gapDegree, type]);
  52. const percentArray = (0, _utils.getPercentage)(props);
  53. const gapPos = gapPosition || type === 'dashboard' && 'bottom' || undefined;
  54. // using className to style stroke color
  55. const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
  56. const strokeColor = (0, _utils.getStrokeColor)({
  57. success,
  58. strokeColor: props.strokeColor
  59. });
  60. const wrapperClassName = (0, _classnames.default)(`${prefixCls}-inner`, {
  61. [`${prefixCls}-circle-gradient`]: isGradient
  62. });
  63. const circleContent = /*#__PURE__*/React.createElement(_rcProgress.Circle, {
  64. steps: steps,
  65. percent: steps ? percentArray[1] : percentArray,
  66. strokeWidth: strokeWidth,
  67. trailWidth: strokeWidth,
  68. strokeColor: steps ? strokeColor[1] : strokeColor,
  69. strokeLinecap: strokeLinecap,
  70. trailColor: trailColor,
  71. prefixCls: prefixCls,
  72. gapDegree: realGapDegree,
  73. gapPosition: gapPos
  74. });
  75. const smallCircle = width <= 20;
  76. const node = /*#__PURE__*/React.createElement("div", {
  77. className: wrapperClassName,
  78. style: circleStyle
  79. }, circleContent, !smallCircle && children);
  80. if (smallCircle) {
  81. return /*#__PURE__*/React.createElement(_tooltip.default, {
  82. title: children
  83. }, node);
  84. }
  85. return node;
  86. };
  87. var _default = exports.default = Circle;