@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
254 lines (250 loc) • 7.17 kB
JavaScript
import * as O from "react";
import { P as r } from "./index-B9vkf41S.js";
import { G as T, F as N, H as R } from "./generateUtilityClasses-B_xKAflz.js";
import { m as P } from "./memoTheme-C-PaH-Cy.js";
import { c as j } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { jsx as h } from "react/jsx-runtime";
import { u as U, s as g, c as E } from "./DefaultPropsProvider-BrmlvPWg.js";
import { c } from "./capitalize-BHEX83JQ.js";
import { c as F } from "./chainPropTypes-D9lkm76m.js";
import { css as x, keyframes as w } from "@emotion/react";
function I(e) {
return T("MuiCircularProgress", e);
}
const rr = N("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]), a = 44, y = w`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`, v = w`
0% {
stroke-dasharray: 1px, 200px;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -15px;
}
100% {
stroke-dasharray: 1px, 200px;
stroke-dashoffset: -126px;
}
`, z = typeof y != "string" ? x`
animation: ${y} 1.4s linear infinite;
` : null, V = typeof v != "string" ? x`
animation: ${v} 1.4s ease-in-out infinite;
` : null, A = (e) => {
const {
classes: t,
variant: s,
color: o,
disableShrink: l
} = e, m = {
root: ["root", s, `color${c(o)}`],
svg: ["svg"],
circle: ["circle", `circle${c(s)}`, l && "circleDisableShrink"]
};
return E(m, I, t);
}, G = g("span", {
name: "MuiCircularProgress",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: s
} = e;
return [t.root, t[s.variant], t[`color${c(s.color)}`]];
}
})(P(({
theme: e
}) => ({
display: "inline-block",
variants: [{
props: {
variant: "determinate"
},
style: {
transition: e.transitions.create("transform")
}
}, {
props: {
variant: "indeterminate"
},
style: z || {
animation: `${y} 1.4s linear infinite`
}
}, ...Object.entries(e.palette).filter(j()).map(([t]) => ({
props: {
color: t
},
style: {
color: (e.vars || e).palette[t].main
}
}))]
}))), K = g("svg", {
name: "MuiCircularProgress",
slot: "Svg"
})({
display: "block"
// Keeps the progress centered
}), B = g("circle", {
name: "MuiCircularProgress",
slot: "Circle",
overridesResolver: (e, t) => {
const {
ownerState: s
} = e;
return [t.circle, t[`circle${c(s.variant)}`], s.disableShrink && t.circleDisableShrink];
}
})(P(({
theme: e
}) => ({
stroke: "currentColor",
variants: [{
props: {
variant: "determinate"
},
style: {
transition: e.transitions.create("stroke-dashoffset")
}
}, {
props: {
variant: "indeterminate"
},
style: {
// Some default value that looks fine waiting for the animation to kicks in.
strokeDasharray: "80px, 200px",
strokeDashoffset: 0
// Add the unit to fix a Edge 16 and below bug.
}
}, {
props: ({
ownerState: t
}) => t.variant === "indeterminate" && !t.disableShrink,
style: V || {
// At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
animation: `${v} 1.4s ease-in-out infinite`
}
}]
}))), H = /* @__PURE__ */ O.forwardRef(function(t, s) {
const o = U({
props: t,
name: "MuiCircularProgress"
}), {
className: l,
color: m = "primary",
disableShrink: $ = !1,
size: p = 40,
style: D,
thickness: i = 3.6,
value: f = 0,
variant: k = "indeterminate",
...M
} = o, n = {
...o,
color: m,
disableShrink: $,
size: p,
thickness: i,
value: f,
variant: k
}, u = A(n), d = {}, b = {}, C = {};
if (k === "determinate") {
const S = 2 * Math.PI * ((a - i) / 2);
d.strokeDasharray = S.toFixed(3), C["aria-valuenow"] = Math.round(f), d.strokeDashoffset = `${((100 - f) / 100 * S).toFixed(3)}px`, b.transform = "rotate(-90deg)";
}
return /* @__PURE__ */ h(G, {
className: R(u.root, l),
style: {
width: p,
height: p,
...b,
...D
},
ownerState: n,
ref: s,
role: "progressbar",
...C,
...M,
children: /* @__PURE__ */ h(K, {
className: u.svg,
ownerState: n,
viewBox: `${a / 2} ${a / 2} ${a} ${a}`,
children: /* @__PURE__ */ h(B, {
className: u.circle,
style: d,
ownerState: n,
cx: a,
cy: a,
r: (a - i) / 2,
fill: "none",
strokeWidth: i
})
})
});
});
process.env.NODE_ENV !== "production" && (H.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: r.oneOfType([r.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
/**
* If `true`, the shrink animation is disabled.
* This only works if variant is `indeterminate`.
* @default false
*/
disableShrink: F(r.bool, (e) => e.disableShrink && e.variant && e.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
/**
* The size of the component.
* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40
*/
size: r.oneOfType([r.number, r.string]),
/**
* @ignore
*/
style: r.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* The thickness of the circle.
* @default 3.6
*/
thickness: r.number,
/**
* The value of the progress indicator for the determinate variant.
* Value between 0 and 100.
* @default 0
*/
value: r.number,
/**
* The variant to use.
* Use indeterminate when there is no progress value.
* @default 'indeterminate'
*/
variant: r.oneOf(["determinate", "indeterminate"])
});
export {
H as C,
rr as c,
I as g
};