ar-design
Version:
AR Design is a (react | nextjs) ui library.
27 lines (26 loc) • 1.36 kB
JavaScript
import React from "react";
import Utils from "../../../libs/infrastructure/shared/Utils";
import "../../../assets/css/components/feedback/progress/progress.css";
const Progress = ({ value, reverse, isVisibleValue = false }) => {
// variables
let _status = undefined;
const _arProgressClassName = [];
if (value >= 0 && value <= 25)
_status = !reverse ? "danger" : "success";
else if (value >= 26 && value <= 50)
_status = !reverse ? "warning" : "primary";
else if (value >= 51 && value <= 75)
_status = !reverse ? "primary" : "warning";
else if (value >= 76 && value <= 100)
_status = !reverse ? "success" : "danger";
_arProgressClassName.push(...Utils.GetClassName("filled", _status, undefined, { radius: "pill" }, undefined, undefined, undefined));
return (React.createElement("div", { className: "ar-progress" },
React.createElement("div", { className: `ar-progress-bar ${_arProgressClassName.map((c) => c).join(" ")}` }),
React.createElement("div", { className: `ar-progress-value ${_arProgressClassName.map((c) => c).join(" ")}`, style: {
width: `${value}%`,
transition: "width 250ms ease-in-out",
} }, !isVisibleValue && React.createElement("span", null,
"%",
value))));
};
export default Progress;