@activecollab/components/dist/esm/components/ProgressRing/ProgressRing.js

ActiveCollab Components

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "children"];
import React, { useMemo } from "react";
import classNames from "classnames";
import { StyledWrapper, StyledChildrenWrapper, StyledBackgroundCircle, StyledForegroundCircle, StyledSvg, StyledProgressRingPercentage } from "./Styles";
export const ProgressCircle = _ref => {
  let backgroundColor = _ref.backgroundColor,
    progressColor = _ref.progressColor,
    _ref$progress = _ref.progress,
    progress = _ref$progress === void 0 ? 0 : _ref$progress,
    _ref$radius = _ref.radius,
    radius = _ref$radius === void 0 ? 20 : _ref$radius,
    _ref$stroke = _ref.stroke,
    stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
    _ref$roundStroke = _ref.roundStroke,
    roundStroke = _ref$roundStroke === void 0 ? false : _ref$roundStroke,
    className = _ref.className,
    _ref$showPercentage = _ref.showPercentage,
    showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
    fontSize = _ref.fontSize;
  if (stroke > radius) {
    console.warn("Stroke can not have value greater than the radius.");
    stroke = radius;
  }
  const progressNumber = useMemo(() => {
    let width = progress;
    if (progress > 100) {
      width = 100;
    }
    if (progress < 0) {
      width = 0;
    }
    return width;
  }, [progress]);
  const normalizedRadius = useMemo(() => radius - stroke / 2, [radius, stroke]);
  const circumference = useMemo(() => normalizedRadius * 2 * Math.PI, [normalizedRadius]);
  const strokeDashoffsetOuter = useMemo(() => circumference - (100 - progressNumber) / 100 * circumference, [circumference, progressNumber]);
  const strokeDashoffsetInner = useMemo(() => circumference - progressNumber / 100 * circumference, [circumference, progressNumber]);
  return /*#__PURE__*/React.createElement(StyledSvg, {
    height: radius * 2,
    width: radius * 2,
    className: className,
    "data-progress": progressNumber,
    "data-testid": "progress-circle"
  }, /*#__PURE__*/React.createElement(StyledBackgroundCircle, {
    $color: backgroundColor,
    $strokeDashOffset: -strokeDashoffsetOuter,
    strokeWidth: stroke,
    strokeDasharray: circumference + " " + circumference,
    r: normalizedRadius,
    cx: radius,
    cy: radius
  }), /*#__PURE__*/React.createElement(StyledForegroundCircle, {
    $color: progressColor,
    $strokeDashOffset: strokeDashoffsetInner,
    strokeWidth: stroke,
    strokeDasharray: circumference + " " + circumference,
    $roundStroke: roundStroke,
    r: normalizedRadius,
    cx: radius,
    cy: radius
  }), showPercentage ? /*#__PURE__*/React.createElement(StyledProgressRingPercentage, {
    $color: progressColor,
    $fontSize: fontSize,
    x: "50%",
    y: "-50%",
    dominantBaseline: "central",
    textAnchor: "middle"
  }, progressNumber, "%") : null);
};
export const ProgressRing = _ref2 => {
  let className = _ref2.className,
    children = _ref2.children,
    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    className: classNames(className),
    "data-testid": "progress-ring"
  }, /*#__PURE__*/React.createElement(ProgressCircle, rest), children ? /*#__PURE__*/React.createElement(StyledChildrenWrapper, null, children) : null);
};
ProgressRing.displayName = "ProgressRing";
//# sourceMappingURL=ProgressRing.js.map