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

ActiveCollab Components

import React, { useMemo } from "react";
import classNames from "classnames";
import { StyledWrapper, StyledChildrenWrapper, StyledBackgroundCircle, StyledForegroundCircle, StyledSvg, StyledProgressRingPercentage } from "./Styles";
export const ProgressCircle = _ref => {
  let {
    backgroundColor,
    progressColor,
    progress = 0,
    radius = 20,
    stroke = 3,
    roundStroke = false,
    className,
    showPercentage = false,
    fontSize
  } = _ref;
  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,
    children,
    ...rest
  } = _ref2;
  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