@etsoo/materialui/lib/cjs/PercentCircularProgress.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PercentCircularProgress = PercentCircularProgress;
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 Typography_1 = __importDefault(require("@mui/material/Typography"));
function PercentCircularProgress(props) {
    // Destruct
    const { textProps, valueUnit = "%", ...rest } = props;
    // Component
    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: "determinate", ...rest }), (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", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
}