@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
53 lines (52 loc) • 1.72 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import MuiLinearProgress from "@mui/material/LinearProgress";
import { createClasses } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
const { useClasses } = createClasses("HvProgressColumnCell", {
root: { display: "flex", width: "100%" },
linearProgressContainer: { width: "100%", margin: "auto" },
linearProgress: {
height: 8
},
linearProgressRoot: { backgroundColor: theme.colors.border },
linearProgressColorPrimary: {
backgroundColor: theme.colors.border
},
linearProgressBarColorPrimary: {
backgroundColor: theme.colors.positive
},
linearProgressBarColorSecondary: {
backgroundColor: theme.colors.text
}
});
const normalizeProgressBar = (value, max) => {
return max > 0 ? Math.floor(value * 100 / max) : 0;
};
const HvProgressColumnCell = ({
partial,
total,
color = "primary",
"aria-labelledby": ariaLabelledBy
}) => {
const { classes } = useClasses();
const percentage = normalizeProgressBar(partial, total);
return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx("div", { className: classes.linearProgressContainer, children: /* @__PURE__ */ jsx(
MuiLinearProgress,
{
className: classes.linearProgress,
classes: {
root: classes.linearProgressRoot,
colorPrimary: classes.linearProgressColorPrimary,
barColorPrimary: classes.linearProgressBarColorPrimary,
barColorSecondary: classes.linearProgressBarColorSecondary
},
color,
variant: "determinate",
value: percentage,
"aria-labelledby": ariaLabelledBy
}
) }) });
};
export {
HvProgressColumnCell
};