one/dist/esm/platform/web/DomView.mjs

One is a React framework for web, iOS, and Android apps.

import { useEffect, useRef } from "react";
import { flattenStyle } from "../effects/normalize.mjs";
import { jsx } from "react/jsx-runtime";

const VIEW_BASE = {
	display: "flex",
	flexDirection: "column",
	flexShrink: 0,
	position: "relative",
	boxSizing: "border-box",
	minWidth: 0,
	minHeight: 0
};
function domStyle(style) {
	const { paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, ...rest } = flattenStyle(style);
	return {
		...paddingHorizontal != null && {
			paddingLeft: paddingHorizontal,
			paddingRight: paddingHorizontal
		},
		...paddingVertical != null && {
			paddingTop: paddingVertical,
			paddingBottom: paddingVertical
		},
		...marginHorizontal != null && {
			marginLeft: marginHorizontal,
			marginRight: marginHorizontal
		},
		...marginVertical != null && {
			marginTop: marginVertical,
			marginBottom: marginVertical
		},
		...rest
	};
}
function DomView({ testID, nativeID, onLayout, accessibilityLabel, style, baseStyle, children }) {
	const ref = useRef(null);
	const onLayoutRef = useRef(onLayout);
	onLayoutRef.current = onLayout;
	const observesLayout = onLayout != null;
	useEffect(() => {
		const node = ref.current;
		if (!observesLayout || !node) return;
		const observer = new ResizeObserver(() => {
			const layout = {
				x: node.offsetLeft,
				y: node.offsetTop,
				width: node.offsetWidth,
				height: node.offsetHeight
			};
			const event = {
				nativeEvent: { layout },
				timeStamp: Date.now()
			};
			onLayoutRef.current?.(event);
		});
		observer.observe(node);
		return () => observer.disconnect();
	}, [observesLayout]);
	return /* @__PURE__ */ jsx("div", {
		ref,
		"data-testid": testID,
		id: nativeID,
		"aria-label": accessibilityLabel,
		style: {
			...VIEW_BASE,
			...baseStyle,
			...domStyle(style)
		},
		children
	});
}

export { DomView, VIEW_BASE, domStyle };
//# sourceMappingURL=DomView.mjs.map