@activecollab/components
Version:
ActiveCollab Components
55 lines • 1.62 kB
JavaScript
import React, { useMemo } from "react";
import classNames from "classnames";
import { StyledProgressBar, StyledProgressBarProgress } from "./Styles";
export const ProgressBar = _ref => {
let _ref$progress = _ref.progress,
progress = _ref$progress === void 0 ? 0 : _ref$progress,
backgroundColor = _ref.backgroundColor,
progressColor = _ref.progressColor,
_ref$stroke = _ref.stroke,
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 100 : _ref$width,
className = _ref.className;
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