sccoreui
Version:
ui-sccore
8 lines (7 loc) • 2.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const HalfProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = 'var(--primary-600)', strokeBgColor = 'var(--gray-300)', value = -1, textDisabled = false }) => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex align-items-center justify-content-center", style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: { width: `${height}px`, height: `${height}px`, transform: "rotate(-90deg)", position: "absolute", top: "0", zIndex: "10" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "180.46", strokeDashoffset: `${(180.46 - ((180.46 / 100) * value))}`, strokeLinecap: "round", stroke: `${strokeColor}` } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: { width: `${height}px`, height: `${height}px`, position: "absolute", transform: "rotate(-90deg)" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "128.46", strokeDashoffset: "0", strokeLinecap: "round", stroke: `${strokeBgColor}` } }) })) })), !textDisabled && (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base" }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-4xl my-2" }, { children: [value, "%"] }))] }))] })) }));
};
exports.default = HalfProgressComponent;