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

ActiveCollab Components

import React, { useMemo } from "react";
import classNames from "classnames";
import { StyledProgressBar, StyledProgressBarProgress } from "./Styles";
export const ProgressBar = _ref => {
  let {
    progress = 0,
    backgroundColor,
    progressColor,
    stroke = 3,
    width = 100,
    className
  } = _ref;
  const progressNumber = useMemo(() => {
    let width = progress;
    if (progress > 100) {
      width = 100;
    }
    if (progress < 0) {
      width = 0;
    }
    return width;
  }, [progress]);
  const widthPercent = useMemo(() => {
    let width_percent = width;
    if (width > 100) {
      width_percent = 100;
    }
    if (width <= 0) {
      width_percent = 100;
    }
    return width_percent;
  }, [width]);
  const height = useMemo(() => {
    let stroke_min = stroke;
    if (stroke <= 0) {
      stroke_min = 3;
    }
    return stroke_min;
  }, [stroke]);
  return /*#__PURE__*/React.createElement(StyledProgressBar, {
    className: classNames("c-progress-bar", className),
    $color: backgroundColor,
    $width: widthPercent
  }, /*#__PURE__*/React.createElement(StyledProgressBarProgress, {
    className: "c-progress-bar__progress",
    style: {
      width: progressNumber + "%"
    },
    $height: height,
    $color: progressColor
  }));
};
ProgressBar.displayName = "ProgressBar";
//# sourceMappingURL=ProgressBar.js.map