one/dist/cjs/platform/web/DomView.cjs

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
			get: () => from[key],
			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
		});
	}
	return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var DomView_exports = {};
__export(DomView_exports, {
	DomView: () => DomView,
	VIEW_BASE: () => VIEW_BASE,
	domStyle: () => domStyle
});
module.exports = __toCommonJS(DomView_exports);
var import_react = require("react");
var import_normalize = require("../effects/normalize.cjs");
var import_jsx_runtime = require("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 } = (0, import_normalize.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 = (0, import_react.useRef)(null);
	const onLayoutRef = (0, import_react.useRef)(onLayout);
	onLayoutRef.current = onLayout;
	const observesLayout = onLayout != null;
	(0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", {
		ref,
		"data-testid": testID,
		id: nativeID,
		"aria-label": accessibilityLabel,
		style: {
			...VIEW_BASE,
			...baseStyle,
			...domStyle(style)
		},
		children
	});
}