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

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

"use client";
import Icon from "../../Icon/Icon.mjs";
import Spin from "../Spin/Spin.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import { panelStyles } from "../panelStyles.mjs";
import qrCode_default from "../../i18n/resources/en/qrCode.mjs";
import { buildQrPath } from "./qrPath.mjs";
import { styles } from "./style.mjs";
import { memo, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { RotateCw } from "lucide-react";
import { encode } from "uqr";
//#region src/base-ui/QRCode/QRCode.tsx
const ICON_RATIO = .22;
const QRCode = memo(({ bgColor = "#fff", bordered = true, className, color = "#000", errorLevel = "M", icon, onRefresh, ref, size = 160, status = "active", style, value, ...rest }) => {
	const { t } = useTranslation(qrCode_default);
	const { count, path } = useMemo(() => {
		try {
			const { data } = encode(value, {
				border: 0,
				ecc: icon ? "H" : errorLevel
			});
			const hole = icon ? Math.ceil(data.length * ICON_RATIO) | 1 : 0;
			return {
				count: data.length,
				path: buildQrPath(data, hole)
			};
		} catch {
			return {
				count: 0,
				path: ""
			};
		}
	}, [
		value,
		icon,
		errorLevel
	]);
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, bordered && styles.bordered, className),
		ref,
		style: {
			background: bgColor,
			...style
		},
		...rest,
		children: [
			/* @__PURE__ */ jsxs("svg", {
				"aria-label": value,
				height: size,
				role: "img",
				shapeRendering: "crispEdges",
				viewBox: `0 0 ${count} ${count}`,
				width: size,
				children: [/* @__PURE__ */ jsx("rect", {
					fill: bgColor,
					height: count,
					width: count
				}), /* @__PURE__ */ jsx("path", {
					d: path,
					fill: color
				})]
			}),
			icon && /* @__PURE__ */ jsx("span", {
				className: styles.icon,
				style: {
					height: size * ICON_RATIO,
					width: size * ICON_RATIO
				},
				children: icon
			}),
			status === "loading" && /* @__PURE__ */ jsx("span", {
				"aria-label": t("qrCode.loading"),
				className: styles.overlay,
				role: "status",
				children: /* @__PURE__ */ jsx(Spin, { style: { color: "#666" } })
			}),
			status === "expired" && /* @__PURE__ */ jsxs("span", {
				className: styles.overlay,
				children: [/* @__PURE__ */ jsx("span", {
					className: styles.overlayTitle,
					children: t("qrCode.expired")
				}), onRefresh && /* @__PURE__ */ jsxs("button", {
					className: panelStyles.pill,
					style: {
						background: "#080808",
						color: "#fff"
					},
					type: "button",
					onClick: onRefresh,
					children: [/* @__PURE__ */ jsx(Icon, {
						icon: RotateCw,
						size: 14
					}), t("qrCode.refresh")]
				})]
			})
		]
	});
});
QRCode.displayName = "QRCode";
//#endregion
export { QRCode as default };

//# sourceMappingURL=QRCode.mjs.map