one/dist/esm/platform/web/DomView.native.js

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

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

var VIEW_BASE = {
	display: "flex",
	flexDirection: "column",
	flexShrink: 0,
	position: "relative",
	boxSizing: "border-box",
	minWidth: 0,
	minHeight: 0
};
function domStyle(style) {
	var { 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(param) {
	var { testID, nativeID, onLayout, accessibilityLabel, style, baseStyle, children } = param;
	var ref = useRef(null);
	var onLayoutRef = useRef(onLayout);
	onLayoutRef.current = onLayout;
	var observesLayout = onLayout != null;
	useEffect(function() {
		var node = ref.current;
		if (!observesLayout || !node) return;
		var observer = new ResizeObserver(function() {
			var _onLayoutRef_current;
			var layout = {
				x: node.offsetLeft,
				y: node.offsetTop,
				width: node.offsetWidth,
				height: node.offsetHeight
			};
			var event = {
				nativeEvent: { layout },
				timeStamp: Date.now()
			};
			(_onLayoutRef_current = onLayoutRef.current) === null || _onLayoutRef_current === void 0 ? void 0 : _onLayoutRef_current.call(onLayoutRef, event);
		});
		observer.observe(node);
		return function() {
			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.native.js.map