one
Version:
One is a React framework for web, iOS, and Android apps.
105 lines (103 loc) • 3.08 kB
JavaScript
;
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_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_normalize = require("../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 } = (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(param) {
var { testID, nativeID, onLayout, accessibilityLabel, style, baseStyle, children } = param;
var ref = (0, import_react.useRef)(null);
var onLayoutRef = (0, import_react.useRef)(onLayout);
onLayoutRef.current = onLayout;
var observesLayout = onLayout != null;
(0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", {
ref,
"data-testid": testID,
id: nativeID,
"aria-label": accessibilityLabel,
style: {
...VIEW_BASE,
...baseStyle,
...domStyle(style)
},
children
});
}