@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
55 lines (54 loc) • 1.93 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const ProgressBar_styles = require("./ProgressBar.styles.cjs");
const Typography = require("../Typography/Typography.cjs");
const HvProgressBar = (props) => {
const {
className,
classes: classesProp,
value = 0,
status = "inProgress",
labelProps,
hideLabel,
...others
} = uikitReactUtils.useDefaultProps("HvProgressBar", props);
const { classes, cx } = ProgressBar_styles.useClasses(classesProp);
const clampedValue = uikitReactUtils.clamp(value, 100);
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cx(classes.root, classes.progress, className),
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuenow": clampedValue,
...others,
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.progressContainer, children: [
!hideLabel && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
className: classes.progressBarLabel,
variant: "caption2",
style: { width: `${clampedValue}%` },
...labelProps,
children: `${clampedValue}%`
}
),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.progressBarContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
style: { width: `${clampedValue}%` },
className: cx(classes.progressBar, {
[classes.progressDone]: status === "completed",
[classes.progressError]: status === "error"
})
}
) })
] })
}
);
};
exports.progressBarClasses = ProgressBar_styles.staticClasses;
exports.HvProgressBar = HvProgressBar;