@etsoo/materialui
Version:
TypeScript Material-UI Implementation
83 lines (82 loc) • 3.95 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressCount = ProgressCount;
const jsx_runtime_1 = require("react/jsx-runtime");
const Box_1 = __importDefault(require("@mui/material/Box"));
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const react_1 = __importDefault(require("react"));
/**
* Progress count
* @param props Props
* @returns Component
*/
function ProgressCount(props) {
// Destruct
const { countdown = true, linear = true, minWidth = 36, onComplete, onProgress, seconds, valueUnit = "" } = props;
// Progress value
const [value, setValue] = react_1.default.useState(countdown ? seconds : 0);
// Variant
const [variant, setVariant] = react_1.default.useState("determinate");
// Progress value
const progressValue = (100.0 * value) / seconds;
react_1.default.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 ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: variant, value: progressValue }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { variant: variant, value: progressValue }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center"
}, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
}