@lobehub/ui/es/base-ui/FloatingPanel/ToastDodge.mjs

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

import { PANEL_ALIGN_INLINE_VAR, PANEL_RESERVE_VAR, TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR, resolveToastDodge } from "../Toast/dodge.mjs";
import { useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/base-ui/FloatingPanel/ToastDodge.tsx
const TOAST_VARS = [
	TOAST_SHIFT_X_VAR,
	TOAST_SHIFT_Y_VAR,
	TOAST_WIDTH_VAR
];
let owner;
const ToastDodge = () => {
	const probeRef = useRef(null);
	const reserveRef = useRef(0);
	const tokenRef = useRef({});
	const insetRef = useRef(void 0);
	useEffect(() => {
		const root = document.documentElement;
		const panel = probeRef.current?.parentElement;
		const token = tokenRef.current;
		const wrapper = panel?.parentElement;
		const clear = () => {
			reserveRef.current = 0;
			if (wrapper instanceof HTMLElement) {
				wrapper.style.removeProperty(PANEL_RESERVE_VAR);
				wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);
			}
			if (owner !== token) return;
			owner = void 0;
			for (const name of TOAST_VARS) root.style.removeProperty(name);
		};
		if (!panel) return;
		const apply = () => {
			if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;
			if (!insetRef.current) {
				const padding = getComputedStyle(wrapper);
				insetRef.current = {
					x: Number.parseFloat(padding.paddingInlineEnd) || 0,
					y: Number.parseFloat(padding.paddingBlockEnd) || 0
				};
			}
			const inset = insetRef.current;
			const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);
			const reserved = reserveRef.current;
			const clamped = panel.offsetHeight >= maxHeight - .5 ? reserved : 0;
			const dodge = resolveToastDodge({
				panelHeight: panel.offsetHeight + clamped,
				panelOffsetX: inset.x,
				panelOffsetY: inset.y,
				panelWidth: panel.offsetWidth,
				viewportHeight: wrapper.clientHeight,
				viewportWidth: wrapper.clientWidth
			});
			owner = token;
			reserveRef.current = dodge.reserve;
			root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);
			root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);
			wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);
			wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);
			if (dodge.width === 360) root.style.removeProperty(TOAST_WIDTH_VAR);
			else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);
		};
		const observer = new ResizeObserver(apply);
		observer.observe(panel);
		window.addEventListener("resize", apply);
		apply();
		return () => {
			observer.disconnect();
			window.removeEventListener("resize", apply);
			clear();
		};
	}, []);
	return /* @__PURE__ */ jsx("span", {
		"aria-hidden": true,
		hidden: true,
		ref: probeRef
	});
};
//#endregion
export { ToastDodge };

//# sourceMappingURL=ToastDodge.mjs.map