Progress.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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 _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
  12. const viewSize = 100;
  13. const borderWidth = viewSize / 5;
  14. const radius = viewSize / 2 - borderWidth / 2;
  15. const circumference = radius * 2 * Math.PI;
  16. const position = 50;
  17. const CustomCircle = props => {
  18. const {
  19. dotClassName,
  20. style,
  21. hasCircleCls
  22. } = props;
  23. return /*#__PURE__*/React.createElement("circle", {
  24. className: (0, _classnames.default)(`${dotClassName}-circle`, {
  25. [`${dotClassName}-circle-bg`]: hasCircleCls
  26. }),
  27. r: radius,
  28. cx: position,
  29. cy: position,
  30. strokeWidth: borderWidth,
  31. style: style
  32. });
  33. };
  34. const Progress = ({
  35. percent,
  36. prefixCls
  37. }) => {
  38. const dotClassName = `${prefixCls}-dot`;
  39. const holderClassName = `${dotClassName}-holder`;
  40. const hideClassName = `${holderClassName}-hidden`;
  41. const [render, setRender] = React.useState(false);
  42. // ==================== Visible =====================
  43. (0, _useLayoutEffect.default)(() => {
  44. if (percent !== 0) {
  45. setRender(true);
  46. }
  47. }, [percent !== 0]);
  48. // ==================== Progress ====================
  49. const safePtg = Math.max(Math.min(percent, 100), 0);
  50. // ===================== Render =====================
  51. if (!render) {
  52. return null;
  53. }
  54. const circleStyle = {
  55. strokeDashoffset: `${circumference / 4}`,
  56. strokeDasharray: `${circumference * safePtg / 100} ${circumference * (100 - safePtg) / 100}`
  57. };
  58. return /*#__PURE__*/React.createElement("span", {
  59. className: (0, _classnames.default)(holderClassName, `${dotClassName}-progress`, safePtg <= 0 && hideClassName)
  60. }, /*#__PURE__*/React.createElement("svg", {
  61. viewBox: `0 0 ${viewSize} ${viewSize}`,
  62. role: "progressbar",
  63. "aria-valuemin": 0,
  64. "aria-valuemax": 100,
  65. "aria-valuenow": safePtg
  66. }, /*#__PURE__*/React.createElement(CustomCircle, {
  67. dotClassName: dotClassName,
  68. hasCircleCls: true
  69. }), /*#__PURE__*/React.createElement(CustomCircle, {
  70. dotClassName: dotClassName,
  71. style: circleStyle
  72. })));
  73. };
  74. var _default = exports.default = Progress;