@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
99 lines (98 loc) • 4.3 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_get_theme_color = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_SemiCircleProgress_module = require("./SemiCircleProgress.module.cjs");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("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 = require_create_vars_resolver.createVarsResolver((theme, { filledSegmentColor, emptySegmentColor, orientation, fillDirection, transitionDuration, thickness }) => ({ root: {
"--scp-filled-segment-color": filledSegmentColor ? require_get_theme_color.getThemeColor(filledSegmentColor, theme) : void 0,
"--scp-empty-segment-color": emptySegmentColor ? require_get_theme_color.getThemeColor(emptySegmentColor, theme) : void 0,
"--scp-rotation": getRotation({
orientation,
fillDirection
}),
"--scp-transition-duration": transitionDuration ? `${transitionDuration}ms` : void 0,
"--scp-thickness": require_rem.rem(thickness)
} }));
const SemiCircleProgress = require_factory.factory((_props) => {
const props = require_use_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 = require_use_styles.useStyles({
name: "SemiCircleProgress",
classes: require_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 = (0, _mantine_hooks.clamp)(value, 0, 100) * (circumference / 100);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
size,
...getStyles("root"),
...others,
children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("label"),
"data-position": labelPosition,
"data-orientation": orientation,
children: label
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
width: size,
height: size / 2,
...getStyles("svg"),
children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = require_SemiCircleProgress_module.default;
SemiCircleProgress.varsResolver = varsResolver;
//#endregion
exports.SemiCircleProgress = SemiCircleProgress;
//# sourceMappingURL=SemiCircleProgress.cjs.map