@etsoo/materialui
Version:
TypeScript Material-UI Implementation
77 lines (76 loc) • 3.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
import React from "react";
/**
* Progress count
* @param props Props
* @returns Component
*/
export function ProgressCount(props) {
// Destruct
const { countdown = true, linear = true, minWidth = 36, onComplete, onProgress, seconds, valueUnit = "" } = props;
// Progress value
const [value, setValue] = React.useState(countdown ? seconds : 0);
// Variant
const [variant, setVariant] = React.useState("determinate");
// Progress value
const progressValue = (100.0 * value) / seconds;
React.useEffect(() => {
const timer = setInterval(() => {
setValue((prev) => {
const newValue = countdown
? prev === 0
? seconds
: prev - 1
: prev === seconds
? 0
: prev + 1;
if (countdown) {
if (newValue === 0) {
if (onComplete) {
const result = onComplete();
// Finish
if (result === false) {
clearInterval(timer);
setVariant("indeterminate");
}
}
}
}
else {
if (newValue === seconds) {
if (onComplete) {
const result = onComplete();
// Finish
if (result === false) {
clearInterval(timer);
setVariant("indeterminate");
}
}
}
}
if (onProgress)
onProgress(newValue);
return newValue;
});
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
if (linear)
return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [_jsx(Box, { sx: { width: "100%", mr: 1 }, children: _jsx(LinearProgress, { variant: variant, value: progressValue }) }), _jsx(Box, { sx: { minWidth }, children: _jsx(Typography, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
return (_jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [_jsx(CircularProgress, { variant: variant, value: progressValue }), _jsx(Box, { sx: {
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center"
}, children: _jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
}