adwaita-web
Version:
A GTK inspired toolkit designed to build awesome web apps
51 lines (50 loc) • 1.48 kB
JavaScript
import cx from "clsx";
import React from "react";
const axisProps = {
horizontal: (percent) => ({ width: `${percent}%` }),
"horizontal-reverse": (percent) => ({ width: `${percent}%` }),
vertical: (percent) => ({ height: `${percent}%` })
};
function Progress(props) {
const {
className,
orientation = "horizontal",
label = false,
value = 0,
...rest
} = props;
const isRtl = false;
let axis = orientation;
if (isRtl && orientation !== "vertical") {
axis = "horizontal-reverse";
}
const trackSize = valueToPercent(value, 0, 100);
const trackStyle = {
display: trackSize === 0 ? "none" : void 0,
...axisProps[axis](trackSize)
};
return /* @__PURE__ */ React.createElement("span", {
className: cx("Progress", {
vertical: orientation === "vertical",
indeterminate: typeof value !== "number",
labeled: label
}, className),
...rest
}, label && /* @__PURE__ */ React.createElement("span", {
className: "Progress__label text-muted"
}, typeof label === "boolean" ? `${value} %` : label), /* @__PURE__ */ React.createElement("span", {
className: "Progress__content"
}, /* @__PURE__ */ React.createElement("span", {
className: "Progress__rail"
}), /* @__PURE__ */ React.createElement("span", {
className: "Progress__track",
style: trackStyle
})));
}
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
export {
Progress,
axisProps
};