@tamagui/use-element-layout 2.7.7 → 3.0.0-beta.1091.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +253 -306
- package/dist/cjs/index.native.cjs +385 -0
- package/dist/cjs/index.native.js +332 -378
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.js +226 -280
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +226 -280
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +309 -351
- package/dist/esm/index.native.js.map +1 -1
- package/package.json +6 -5
- package/src/index.tsx +78 -249
- package/types/index.d.ts +6 -8
- package/types/index.d.ts.map +2 -2
package/dist/cjs/index.cjs
CHANGED
|
@@ -3,358 +3,305 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __export = (target, all) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
for (var name in all) __defProp(target, name, {
|
|
7
|
+
get: all[name],
|
|
8
|
+
enumerable: true
|
|
9
|
+
});
|
|
10
10
|
};
|
|
11
11
|
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
14
|
+
get: () => from[key],
|
|
15
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
21
|
-
value: true
|
|
22
|
-
}), mod);
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
21
|
var index_exports = {};
|
|
24
22
|
__export(index_exports, {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
useElementLayout: () => useElementLayout
|
|
23
|
+
LayoutMeasurementController: () => LayoutMeasurementController,
|
|
24
|
+
createMeasure: () => createMeasure,
|
|
25
|
+
createMeasureInWindow: () => createMeasureInWindow,
|
|
26
|
+
createMeasureLayout: () => createMeasureLayout,
|
|
27
|
+
enable: () => enable,
|
|
28
|
+
getBoundingClientRectAsync: () => getBoundingClientRectAsync,
|
|
29
|
+
getElementLayoutEvent: () => getElementLayoutEvent,
|
|
30
|
+
measure: () => measure,
|
|
31
|
+
measureInWindow: () => measureInWindow,
|
|
32
|
+
measureLayout: () => measureLayout,
|
|
33
|
+
measureNode: () => measureNode,
|
|
34
|
+
registerLayoutNode: () => registerLayoutNode,
|
|
35
|
+
useElementLayout: () => useElementLayout
|
|
39
36
|
});
|
|
40
37
|
module.exports = __toCommonJS(index_exports);
|
|
41
38
|
var import_constants = require("@tamagui/constants");
|
|
42
39
|
var import_react = require("react");
|
|
43
40
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
-
const LayoutHandlers = /* @__PURE__ */new WeakMap();
|
|
45
|
-
const LayoutDisableKey = /* @__PURE__ */new WeakMap();
|
|
46
|
-
const Nodes = /* @__PURE__ */new Set();
|
|
41
|
+
const LayoutHandlers = /* @__PURE__ */ new WeakMap();
|
|
42
|
+
const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
|
|
43
|
+
const Nodes = /* @__PURE__ */ new Set();
|
|
44
|
+
const NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
45
|
+
const PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
47
46
|
const usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
48
|
-
|
|
49
|
-
function isDebugLayout() {
|
|
50
|
-
if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
51
|
-
return _debugLayout;
|
|
52
|
-
}
|
|
47
|
+
const isDebugLayout = () => typeof window !== "undefined" && window.location?.search?.includes("__tamaDebugLayout");
|
|
53
48
|
const DisableLayoutContextValues = {};
|
|
54
49
|
const DisableLayoutContextKey = (0, import_react.createContext)("");
|
|
55
50
|
const ENABLE = typeof IntersectionObserver !== "undefined";
|
|
56
|
-
const LayoutMeasurementController = ({
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
value: id,
|
|
68
|
-
children
|
|
69
|
-
});
|
|
51
|
+
const LayoutMeasurementController = ({ disable, children }) => {
|
|
52
|
+
const id = (0, import_react.useId)();
|
|
53
|
+
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
54
|
+
const wasDisabled = DisableLayoutContextValues[id] === true;
|
|
55
|
+
DisableLayoutContextValues[id] = disable;
|
|
56
|
+
if (wasDisabled && !disable) measureOnNextFrame?.();
|
|
57
|
+
}, [disable, id]);
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
|
|
59
|
+
value: id,
|
|
60
|
+
children
|
|
61
|
+
});
|
|
70
62
|
};
|
|
71
63
|
let strategy = "async";
|
|
72
64
|
let resumeLayoutLoop;
|
|
73
65
|
let measureOnNextFrame;
|
|
74
|
-
function setOnLayoutStrategy(state) {
|
|
75
|
-
strategy = state;
|
|
76
|
-
resumeLayoutLoop?.();
|
|
77
|
-
}
|
|
78
|
-
const NodeRectCache = /* @__PURE__ */new WeakMap();
|
|
79
66
|
let avoidUpdates = true;
|
|
80
|
-
const queuedUpdates = /* @__PURE__ */new Map();
|
|
67
|
+
const queuedUpdates = /* @__PURE__ */ new Map();
|
|
81
68
|
function enable() {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
69
|
+
if (avoidUpdates) {
|
|
70
|
+
avoidUpdates = false;
|
|
71
|
+
if (queuedUpdates) {
|
|
72
|
+
queuedUpdates.forEach((cb) => cb());
|
|
73
|
+
queuedUpdates.clear();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
89
76
|
}
|
|
90
77
|
function rectsEqual(a, b) {
|
|
91
|
-
|
|
78
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
92
79
|
}
|
|
93
80
|
if (ENABLE) {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
};
|
|
185
|
-
document.addEventListener("visibilitychange", scheduleLayoutFrame);
|
|
186
|
-
scheduleLayoutFrame();
|
|
81
|
+
let ensureRectFetchObserver = function() {
|
|
82
|
+
if (rectFetchObserver) return rectFetchObserver;
|
|
83
|
+
rectFetchObserver = new IntersectionObserver((entries) => {
|
|
84
|
+
lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
|
|
85
|
+
for (let i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
|
|
86
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
87
|
+
if (rectFetchResolve) {
|
|
88
|
+
rectFetchResolve(true);
|
|
89
|
+
rectFetchResolve = null;
|
|
90
|
+
}
|
|
91
|
+
}, { threshold: 0 });
|
|
92
|
+
return rectFetchObserver;
|
|
93
|
+
}, updateLayoutIfChanged = function(node) {
|
|
94
|
+
if (typeof LayoutHandlers.get(node) !== "function") return;
|
|
95
|
+
const parentNode = node.parentElement;
|
|
96
|
+
if (!parentNode) return;
|
|
97
|
+
let nodeRect;
|
|
98
|
+
let parentRect;
|
|
99
|
+
if (strategy === "async") {
|
|
100
|
+
nodeRect = BoundingRects.get(node);
|
|
101
|
+
parentRect = BoundingRects.get(parentNode);
|
|
102
|
+
if (!nodeRect || !parentRect) return;
|
|
103
|
+
} else {
|
|
104
|
+
nodeRect = node.getBoundingClientRect();
|
|
105
|
+
parentRect = parentNode.getBoundingClientRect();
|
|
106
|
+
}
|
|
107
|
+
emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
|
|
108
|
+
}, scheduleLayoutFrame = function() {
|
|
109
|
+
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
110
|
+
frameScheduled = true;
|
|
111
|
+
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
112
|
+
};
|
|
113
|
+
const BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
114
|
+
let rectFetchObserver = null;
|
|
115
|
+
let rectFetchResolve = null;
|
|
116
|
+
let rectFetchStartTime = 0;
|
|
117
|
+
let lastCallbackDelay = 0;
|
|
118
|
+
const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
119
|
+
const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
|
|
120
|
+
const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
121
|
+
const MAX_SKIP_FRAMES = 20;
|
|
122
|
+
let skipFrames = BASE_SKIP_FRAMES;
|
|
123
|
+
let frameCount = 0;
|
|
124
|
+
let frameScheduled = false;
|
|
125
|
+
async function layoutOnAnimationFrame() {
|
|
126
|
+
if (frameCount++ % skipFrames !== 0) {
|
|
127
|
+
frameScheduled = false;
|
|
128
|
+
scheduleLayoutFrame();
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
|
|
132
|
+
if (strategy !== "off") {
|
|
133
|
+
const activeNodes = [];
|
|
134
|
+
const parentsToObserve = /* @__PURE__ */ new Set();
|
|
135
|
+
for (const node of Nodes) {
|
|
136
|
+
const parentElement = node.parentElement;
|
|
137
|
+
if (!(parentElement instanceof HTMLElement)) {
|
|
138
|
+
cleanupNode(node);
|
|
139
|
+
continue;
|
|
140
|
+
}
|
|
141
|
+
const disableKey = LayoutDisableKey.get(node);
|
|
142
|
+
if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
|
|
143
|
+
activeNodes.push(node);
|
|
144
|
+
parentsToObserve.add(parentElement);
|
|
145
|
+
}
|
|
146
|
+
if (activeNodes.length > 0) {
|
|
147
|
+
const io = ensureRectFetchObserver();
|
|
148
|
+
rectFetchStartTime = performance.now();
|
|
149
|
+
for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
|
|
150
|
+
for (const parent of parentsToObserve) io.observe(parent);
|
|
151
|
+
await new Promise((res) => {
|
|
152
|
+
rectFetchResolve = res;
|
|
153
|
+
});
|
|
154
|
+
for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
|
|
155
|
+
for (const parent of parentsToObserve) io.unobserve(parent);
|
|
156
|
+
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
|
|
157
|
+
else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
158
|
+
for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
frameScheduled = false;
|
|
162
|
+
scheduleLayoutFrame();
|
|
163
|
+
}
|
|
164
|
+
resumeLayoutLoop = scheduleLayoutFrame;
|
|
165
|
+
measureOnNextFrame = () => {
|
|
166
|
+
frameCount = 0;
|
|
167
|
+
scheduleLayoutFrame();
|
|
168
|
+
};
|
|
169
|
+
document.addEventListener("visibilitychange", scheduleLayoutFrame);
|
|
170
|
+
scheduleLayoutFrame();
|
|
187
171
|
}
|
|
188
|
-
const getElementLayoutEvent = (nodeRect, parentRect, node) => {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
width: node.offsetWidth,
|
|
200
|
-
height: node.offsetHeight
|
|
201
|
-
};
|
|
202
|
-
};
|
|
172
|
+
const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
|
|
173
|
+
nativeEvent: {
|
|
174
|
+
layout: getRelativeDimensions(nodeRect, parentRect, node),
|
|
175
|
+
target: nodeRect
|
|
176
|
+
},
|
|
177
|
+
timeStamp: Date.now()
|
|
178
|
+
});
|
|
179
|
+
const getPreTransformDimensions = (node) => ({
|
|
180
|
+
width: node.offsetWidth,
|
|
181
|
+
height: node.offsetHeight
|
|
182
|
+
});
|
|
203
183
|
const getRelativeDimensions = (a, b, aNode) => {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
x,
|
|
219
|
-
y,
|
|
220
|
-
width,
|
|
221
|
-
height,
|
|
222
|
-
pageX: a.left,
|
|
223
|
-
pageY: a.top
|
|
224
|
-
};
|
|
184
|
+
const left = a.left - b.left;
|
|
185
|
+
const top = a.top - b.top;
|
|
186
|
+
const { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
187
|
+
width: a.width,
|
|
188
|
+
height: a.height
|
|
189
|
+
};
|
|
190
|
+
return {
|
|
191
|
+
x: left,
|
|
192
|
+
y: top,
|
|
193
|
+
width,
|
|
194
|
+
height,
|
|
195
|
+
pageX: a.left,
|
|
196
|
+
pageY: a.top
|
|
197
|
+
};
|
|
225
198
|
};
|
|
226
199
|
function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
id: node.id || void 0,
|
|
240
|
-
className: (node.className || "").slice(0, 60) || void 0,
|
|
241
|
-
layout: event.nativeEvent.layout,
|
|
242
|
-
first: !cachedRect
|
|
243
|
-
});
|
|
244
|
-
if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));else onLayout(event);
|
|
200
|
+
const onLayout = LayoutHandlers.get(node);
|
|
201
|
+
if (typeof onLayout !== "function") return;
|
|
202
|
+
const cachedRect = NodeRectCache.get(node);
|
|
203
|
+
const cachedParentRect = NodeRectCache.get(parentNode);
|
|
204
|
+
const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
|
|
205
|
+
const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
|
|
206
|
+
if (!nodeChanged && !parentChanged) return;
|
|
207
|
+
NodeRectCache.set(node, nodeRect);
|
|
208
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
209
|
+
const event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
210
|
+
if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));
|
|
211
|
+
else onLayout(event);
|
|
245
212
|
}
|
|
246
213
|
function observeLayoutNode(node, disableKey) {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
214
|
+
Nodes.add(node);
|
|
215
|
+
if (disableKey) LayoutDisableKey.set(node, disableKey);
|
|
216
|
+
else LayoutDisableKey.delete(node);
|
|
217
|
+
resumeLayoutLoop?.();
|
|
250
218
|
}
|
|
251
219
|
function registerLayoutNode(node, onChange, disableKey) {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
220
|
+
LayoutHandlers.set(node, onChange);
|
|
221
|
+
observeLayoutNode(node, disableKey);
|
|
222
|
+
return () => cleanupNode(node);
|
|
255
223
|
}
|
|
256
224
|
function cleanupNode(node) {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
225
|
+
Nodes.delete(node);
|
|
226
|
+
LayoutHandlers.delete(node);
|
|
227
|
+
LayoutDisableKey.delete(node);
|
|
228
|
+
NodeRectCache.delete(node);
|
|
261
229
|
}
|
|
262
|
-
const PrevHostNode = /* @__PURE__ */new WeakMap();
|
|
263
230
|
function emitLayoutSync(node) {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
231
|
+
const onLayout = LayoutHandlers.get(node);
|
|
232
|
+
if (typeof onLayout !== "function") return;
|
|
233
|
+
const parentNode = node.parentElement;
|
|
234
|
+
if (!parentNode) return;
|
|
235
|
+
const nodeRect = node.getBoundingClientRect();
|
|
236
|
+
const parentRect = parentNode.getBoundingClientRect();
|
|
237
|
+
NodeRectCache.set(node, nodeRect);
|
|
238
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
239
|
+
onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
|
|
273
240
|
}
|
|
274
241
|
function useElementLayout(ref, onLayout) {
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
className: (node2.className || "").slice(0, 60) || void 0,
|
|
303
|
-
totalNodes: Nodes.size
|
|
304
|
-
});
|
|
305
|
-
return () => {
|
|
306
|
-
cleanupNode(node2);
|
|
307
|
-
const swappedNode = PrevHostNode.get(ref);
|
|
308
|
-
if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
|
|
309
|
-
PrevHostNode.delete(ref);
|
|
310
|
-
};
|
|
311
|
-
}, [ref, !!onLayout]);
|
|
242
|
+
const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
|
|
243
|
+
const node = ensureWebElement(ref.current?.host);
|
|
244
|
+
if (node && onLayout) {
|
|
245
|
+
LayoutHandlers.set(node, onLayout);
|
|
246
|
+
LayoutDisableKey.set(node, disableKey);
|
|
247
|
+
}
|
|
248
|
+
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
249
|
+
if (!onLayout) return;
|
|
250
|
+
const nextNode = ensureWebElement(ref.current?.host);
|
|
251
|
+
const prevNode = PrevHostNode.get(ref);
|
|
252
|
+
if (nextNode !== prevNode) {
|
|
253
|
+
if (prevNode) cleanupNode(prevNode);
|
|
254
|
+
PrevHostNode.set(ref, nextNode);
|
|
255
|
+
if (nextNode) {
|
|
256
|
+
LayoutHandlers.set(nextNode, onLayout);
|
|
257
|
+
observeLayoutNode(nextNode, disableKey);
|
|
258
|
+
emitLayoutSync(nextNode);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
return () => {
|
|
262
|
+
const activeNode = ensureWebElement(ref.current?.host);
|
|
263
|
+
if (activeNode) cleanupNode(activeNode);
|
|
264
|
+
const swapped = PrevHostNode.get(ref);
|
|
265
|
+
if (swapped && swapped !== activeNode) cleanupNode(swapped);
|
|
266
|
+
PrevHostNode.delete(ref);
|
|
267
|
+
};
|
|
268
|
+
}, [ref, !!onLayout]);
|
|
312
269
|
}
|
|
313
270
|
function ensureWebElement(x) {
|
|
314
|
-
|
|
315
|
-
|
|
271
|
+
if (typeof HTMLElement === "undefined") return void 0;
|
|
272
|
+
return x instanceof HTMLElement ? x : void 0;
|
|
316
273
|
}
|
|
317
|
-
const getBoundingClientRectAsync = node => {
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
});
|
|
326
|
-
io.observe(node);
|
|
327
|
-
});
|
|
328
|
-
};
|
|
274
|
+
const getBoundingClientRectAsync = (node) => new Promise((res) => {
|
|
275
|
+
if (!node || node.nodeType !== 1) return res(false);
|
|
276
|
+
const io = new IntersectionObserver((entries) => {
|
|
277
|
+
io.disconnect();
|
|
278
|
+
res(entries[0].boundingClientRect);
|
|
279
|
+
});
|
|
280
|
+
io.observe(node);
|
|
281
|
+
});
|
|
329
282
|
const measureNode = async (node, relativeTo) => {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
283
|
+
const relativeNode = relativeTo || node?.parentElement;
|
|
284
|
+
if (relativeNode instanceof HTMLElement) {
|
|
285
|
+
const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
|
|
286
|
+
if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
287
|
+
}
|
|
288
|
+
return null;
|
|
336
289
|
};
|
|
337
290
|
const measure = async (node, callback) => {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
291
|
+
const out = await measureNode(node, node.parentElement);
|
|
292
|
+
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
293
|
+
return out;
|
|
341
294
|
};
|
|
342
|
-
|
|
343
|
-
return callback => measure(node, callback);
|
|
344
|
-
}
|
|
295
|
+
const createMeasure = (node) => (callback) => measure(node, callback);
|
|
345
296
|
const measureInWindow = async (node, callback) => {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
};
|
|
350
|
-
const createMeasureInWindow = node => {
|
|
351
|
-
return callback => measureInWindow(node, callback);
|
|
297
|
+
const out = await measureNode(node, null);
|
|
298
|
+
if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
|
|
299
|
+
return out;
|
|
352
300
|
};
|
|
301
|
+
const createMeasureInWindow = (node) => (callback) => measureInWindow(node, callback);
|
|
353
302
|
const measureLayout = async (node, relativeNode, callback) => {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
303
|
+
const out = await measureNode(node, relativeNode);
|
|
304
|
+
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
305
|
+
return out;
|
|
357
306
|
};
|
|
358
|
-
|
|
359
|
-
return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
|
|
360
|
-
}
|
|
307
|
+
const createMeasureLayout = (node) => (relativeTo, callback) => measureLayout(node, relativeTo, callback);
|