@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
43 lines (42 loc) • 1.56 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { useClasses } from "./ProgressBar.styles.js";
import { clamp, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/ProgressBar/ProgressBar.tsx
/**
* Progress Bar provides feedback about a process that is taking place in the application.
*/
var HvProgressBar = (props) => {
const { className, classes: classesProp, value = 0, status = "inProgress", labelProps, hideLabel, ...others } = useDefaultProps("HvProgressBar", props);
const { classes, cx } = useClasses(classesProp);
const clampedValue = clamp(value, 100);
return /* @__PURE__ */ jsx("div", {
className: cx(classes.root, classes.progress, className),
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuenow": clampedValue,
...others,
children: /* @__PURE__ */ jsxs("div", {
className: classes.progressContainer,
children: [!hideLabel && /* @__PURE__ */ jsx(HvTypography, {
className: classes.progressBarLabel,
variant: "caption2",
style: { width: `${clampedValue}%` },
...labelProps,
children: `${clampedValue}%`
}), /* @__PURE__ */ jsx("div", {
className: classes.progressBarContainer,
children: /* @__PURE__ */ jsx("div", {
style: { width: `${clampedValue}%` },
className: cx(classes.progressBar, {
[classes.progressDone]: status === "completed",
[classes.progressError]: status === "error"
})
})
})]
})
});
};
//#endregion
export { HvProgressBar };