PtgCircle.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import _typeof from "@babel/runtime/helpers/esm/typeof";
  2. import * as React from 'react';
  3. var Block = function Block(_ref) {
  4. var bg = _ref.bg,
  5. children = _ref.children;
  6. return /*#__PURE__*/React.createElement("div", {
  7. style: {
  8. width: '100%',
  9. height: '100%',
  10. background: bg
  11. }
  12. }, children);
  13. };
  14. function getPtgColors(color, scale) {
  15. return Object.keys(color).map(function (key) {
  16. var parsedKey = parseFloat(key);
  17. var ptgKey = "".concat(Math.floor(parsedKey * scale), "%");
  18. return "".concat(color[key], " ").concat(ptgKey);
  19. });
  20. }
  21. var PtgCircle = /*#__PURE__*/React.forwardRef(function (props, ref) {
  22. var prefixCls = props.prefixCls,
  23. color = props.color,
  24. gradientId = props.gradientId,
  25. radius = props.radius,
  26. circleStyleForStack = props.style,
  27. ptg = props.ptg,
  28. strokeLinecap = props.strokeLinecap,
  29. strokeWidth = props.strokeWidth,
  30. size = props.size,
  31. gapDegree = props.gapDegree;
  32. var isGradient = color && _typeof(color) === 'object';
  33. var stroke = isGradient ? "#FFF" : undefined;
  34. // ========================== Circle ==========================
  35. var halfSize = size / 2;
  36. var circleNode = /*#__PURE__*/React.createElement("circle", {
  37. className: "".concat(prefixCls, "-circle-path"),
  38. r: radius,
  39. cx: halfSize,
  40. cy: halfSize,
  41. stroke: stroke,
  42. strokeLinecap: strokeLinecap,
  43. strokeWidth: strokeWidth,
  44. opacity: ptg === 0 ? 0 : 1,
  45. style: circleStyleForStack,
  46. ref: ref
  47. });
  48. // ========================== Render ==========================
  49. if (!isGradient) {
  50. return circleNode;
  51. }
  52. var maskId = "".concat(gradientId, "-conic");
  53. var fromDeg = gapDegree ? "".concat(180 + gapDegree / 2, "deg") : '0deg';
  54. var conicColors = getPtgColors(color, (360 - gapDegree) / 360);
  55. var linearColors = getPtgColors(color, 1);
  56. var conicColorBg = "conic-gradient(from ".concat(fromDeg, ", ").concat(conicColors.join(', '), ")");
  57. var linearColorBg = "linear-gradient(to ".concat(gapDegree ? 'bottom' : 'top', ", ").concat(linearColors.join(', '), ")");
  58. return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mask", {
  59. id: maskId
  60. }, circleNode), /*#__PURE__*/React.createElement("foreignObject", {
  61. x: 0,
  62. y: 0,
  63. width: size,
  64. height: size,
  65. mask: "url(#".concat(maskId, ")")
  66. }, /*#__PURE__*/React.createElement(Block, {
  67. bg: linearColorBg
  68. }, /*#__PURE__*/React.createElement(Block, {
  69. bg: conicColorBg
  70. }))));
  71. });
  72. if (process.env.NODE_ENV !== 'production') {
  73. PtgCircle.displayName = 'PtgCircle';
  74. }
  75. export default PtgCircle;