@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
98 lines (97 loc) • 3.84 kB
JavaScript
"use client";
import { rem } from "../../core/utils/units-converters/rem.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import SemiCircleProgress_module_default from "./SemiCircleProgress.module.mjs";
import { clamp } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.tsx
const defaultProps = {
size: 200,
thickness: 12,
orientation: "up",
fillDirection: "left-to-right",
labelPosition: "bottom"
};
function getRotation({ orientation, fillDirection }) {
if (orientation === "down") {
if (fillDirection === "right-to-left") return "rotate(180deg) rotateY(180deg)";
return "rotate(180deg)";
}
if (fillDirection === "left-to-right") return "rotateY(180deg)";
}
const varsResolver = createVarsResolver((theme, { filledSegmentColor, emptySegmentColor, orientation, fillDirection, transitionDuration, thickness }) => ({ root: {
"--scp-filled-segment-color": filledSegmentColor ? getThemeColor(filledSegmentColor, theme) : void 0,
"--scp-empty-segment-color": emptySegmentColor ? getThemeColor(emptySegmentColor, theme) : void 0,
"--scp-rotation": getRotation({
orientation,
fillDirection
}),
"--scp-transition-duration": transitionDuration ? `${transitionDuration}ms` : void 0,
"--scp-thickness": rem(thickness)
} }));
const SemiCircleProgress = factory((_props) => {
const props = useProps("SemiCircleProgress", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, size, thickness, value, orientation, fillDirection, filledSegmentColor, emptySegmentColor, transitionDuration, label, labelPosition, attributes, ...others } = props;
const getStyles = useStyles({
name: "SemiCircleProgress",
classes: SemiCircleProgress_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const coordinateForCircle = size / 2;
const radius = (size - 2 * thickness) / 2;
const circumference = Math.PI * radius;
const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);
return /* @__PURE__ */ jsxs(Box, {
size,
...getStyles("root"),
...others,
children: [label && /* @__PURE__ */ jsx("div", {
...getStyles("label"),
"data-position": labelPosition,
"data-orientation": orientation,
children: label
}), /* @__PURE__ */ jsxs("svg", {
width: size,
height: size / 2,
...getStyles("svg"),
children: [/* @__PURE__ */ jsx("circle", {
cx: coordinateForCircle,
cy: coordinateForCircle,
r: radius,
fill: "none",
stroke: "var(--scp-empty-segment-color)",
strokeWidth: thickness,
strokeDasharray: circumference,
...getStyles("emptySegment", { style: { strokeDashoffset: circumference } })
}), /* @__PURE__ */ jsx("circle", {
cx: coordinateForCircle,
cy: coordinateForCircle,
r: radius,
fill: "none",
stroke: "var(--scp-filled-segment-color)",
strokeWidth: thickness,
strokeDasharray: circumference,
...getStyles("filledSegment", { style: { strokeDashoffset: semiCirclePercentage } })
})]
})]
});
});
SemiCircleProgress.displayName = "@mantine/core/SemiCircleProgress";
SemiCircleProgress.classes = SemiCircleProgress_module_default;
SemiCircleProgress.varsResolver = varsResolver;
//#endregion
export { SemiCircleProgress };
//# sourceMappingURL=SemiCircleProgress.mjs.map