@lobehub/ui/es/base-ui/Spin/Spin.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import { styles } from "./style.mjs";
import NetworkGlyph from "./NetworkGlyph.mjs";
import { memo, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { LoaderCircle } from "lucide-react";
//#region src/base-ui/Spin/Spin.tsx
const sizeMap = {
	large: 32,
	middle: 20,
	small: 14
};
const resolveSize = (size) => typeof size === "number" ? size : sizeMap[size];
const Spin = memo(({ children, className, indicator, percent, ref, size = "middle", spinning = true, style, tip, variant = "default", ...rest }) => {
	const px = useMemo(() => resolveSize(size), [size]);
	const glyph = useMemo(() => {
		if (indicator) return indicator;
		if (variant === "network") return /* @__PURE__ */ jsx(NetworkGlyph, { px });
		if (typeof percent === "number") {
			const clamped = Math.min(100, Math.max(0, percent));
			const circumference = 2 * Math.PI * 9;
			const offset = circumference * (1 - clamped / 100);
			return /* @__PURE__ */ jsxs("svg", {
				className: cx(styles.glyph, styles.ring),
				height: px,
				viewBox: "0 0 24 24",
				width: px,
				children: [/* @__PURE__ */ jsx("circle", {
					className: styles.ringTrack,
					cx: 12,
					cy: 12,
					fill: "none",
					r: 9,
					strokeWidth: 2.5
				}), /* @__PURE__ */ jsx("circle", {
					className: styles.ringProgress,
					cx: 12,
					cy: 12,
					fill: "none",
					r: 9,
					strokeDasharray: circumference,
					strokeDashoffset: offset,
					strokeLinecap: "round",
					strokeWidth: 2.5
				})]
			});
		}
		return /* @__PURE__ */ jsx(Icon, {
			spin: true,
			className: styles.glyph,
			icon: LoaderCircle,
			size: px
		});
	}, [
		indicator,
		variant,
		percent,
		px
	]);
	if (!spinning) return children ?? null;
	if (!children) return /* @__PURE__ */ jsx("div", {
		"aria-busy": true,
		"aria-live": "polite",
		className: cx(styles.root, className),
		ref,
		role: "status",
		style,
		...rest,
		children: /* @__PURE__ */ jsx("span", {
			"aria-hidden": true,
			className: styles.glyphBox,
			children: glyph
		})
	});
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.wrapper, className),
		ref,
		style,
		...rest,
		children: [children, /* @__PURE__ */ jsxs("div", {
			"aria-busy": true,
			"aria-live": "polite",
			className: styles.overlay,
			role: "status",
			children: [/* @__PURE__ */ jsx("span", {
				"aria-hidden": true,
				className: styles.glyphBox,
				children: glyph
			}), tip && /* @__PURE__ */ jsx("span", {
				className: styles.tip,
				children: tip
			})]
		})]
	});
});
Spin.displayName = "Spin";
//#endregion
export { Spin as default };

//# sourceMappingURL=Spin.mjs.map