@tamagui/use-element-layout 2.7.7 → 3.0.0-beta.643.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 +281 -293
- package/dist/cjs/index.native.cjs +415 -0
- package/dist/cjs/index.native.js +351 -367
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.js +255 -264
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +255 -264
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +325 -339
- package/dist/esm/index.native.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.native.js
CHANGED
|
@@ -1,392 +1,378 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
3
3
|
import { createContext, useContext, useId } from "react";
|
|
4
|
+
|
|
4
5
|
function _instanceof(left, right) {
|
|
5
|
-
|
|
6
|
+
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);
|
|
7
|
+
else return left instanceof right;
|
|
6
8
|
}
|
|
7
|
-
var LayoutHandlers = /* @__PURE__ */new WeakMap();
|
|
8
|
-
var LayoutDisableKey = /* @__PURE__ */new WeakMap();
|
|
9
|
-
var Nodes = /* @__PURE__ */new Set();
|
|
10
|
-
var usePretransformDimensions = function
|
|
11
|
-
|
|
9
|
+
var LayoutHandlers = /* @__PURE__ */ new WeakMap();
|
|
10
|
+
var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
|
|
11
|
+
var Nodes = /* @__PURE__ */ new Set();
|
|
12
|
+
var usePretransformDimensions = function() {
|
|
13
|
+
return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
12
14
|
};
|
|
13
15
|
var _debugLayout;
|
|
14
16
|
function isDebugLayout() {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
18
|
+
return _debugLayout;
|
|
17
19
|
}
|
|
18
20
|
var DisableLayoutContextValues = {};
|
|
19
|
-
var DisableLayoutContextKey = /* @__PURE__ */createContext("");
|
|
21
|
+
var DisableLayoutContextKey = /* @__PURE__ */ createContext("");
|
|
20
22
|
var ENABLE = false;
|
|
21
|
-
var LayoutMeasurementController = function
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
value: id,
|
|
34
|
-
children
|
|
35
|
-
});
|
|
23
|
+
var LayoutMeasurementController = function(param) {
|
|
24
|
+
var { disable, children } = param;
|
|
25
|
+
var id = useId();
|
|
26
|
+
useIsomorphicLayoutEffect(function() {
|
|
27
|
+
var wasDisabled = DisableLayoutContextValues[id] === true;
|
|
28
|
+
DisableLayoutContextValues[id] = disable;
|
|
29
|
+
if (wasDisabled && !disable) measureOnNextFrame === null || measureOnNextFrame === void 0 || measureOnNextFrame();
|
|
30
|
+
}, [disable, id]);
|
|
31
|
+
return /* @__PURE__ */ jsx(DisableLayoutContextKey.Provider, {
|
|
32
|
+
value: id,
|
|
33
|
+
children
|
|
34
|
+
});
|
|
36
35
|
};
|
|
37
36
|
var strategy = "async";
|
|
38
37
|
var resumeLayoutLoop;
|
|
39
38
|
var measureOnNextFrame;
|
|
40
39
|
function setOnLayoutStrategy(state) {
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
strategy = state;
|
|
41
|
+
resumeLayoutLoop === null || resumeLayoutLoop === void 0 || resumeLayoutLoop();
|
|
43
42
|
}
|
|
44
|
-
var NodeRectCache = /* @__PURE__ */new WeakMap();
|
|
43
|
+
var NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
45
44
|
var avoidUpdates = true;
|
|
46
|
-
var queuedUpdates = /* @__PURE__ */new Map();
|
|
45
|
+
var queuedUpdates = /* @__PURE__ */ new Map();
|
|
47
46
|
function enable() {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
47
|
+
if (avoidUpdates) {
|
|
48
|
+
avoidUpdates = false;
|
|
49
|
+
if (queuedUpdates) {
|
|
50
|
+
queuedUpdates.forEach(function(cb) {
|
|
51
|
+
return cb();
|
|
52
|
+
});
|
|
53
|
+
queuedUpdates.clear();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
57
56
|
}
|
|
58
57
|
function rectsEqual(a, b) {
|
|
59
|
-
|
|
58
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
60
59
|
}
|
|
61
60
|
if (ENABLE) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
resumeLayoutLoop = scheduleLayoutFrame2;
|
|
198
|
-
measureOnNextFrame = function () {
|
|
199
|
-
frameCount = 0;
|
|
200
|
-
scheduleLayoutFrame2();
|
|
201
|
-
};
|
|
202
|
-
document.addEventListener("visibilitychange", scheduleLayoutFrame2);
|
|
203
|
-
scheduleLayoutFrame2();
|
|
61
|
+
let ensureRectFetchObserver2 = function() {
|
|
62
|
+
if (rectFetchObserver) return rectFetchObserver;
|
|
63
|
+
rectFetchObserver = new IntersectionObserver(function(entries) {
|
|
64
|
+
lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
|
|
65
|
+
for (var i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
|
|
66
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
67
|
+
if (rectFetchResolve) {
|
|
68
|
+
rectFetchResolve(true);
|
|
69
|
+
rectFetchResolve = null;
|
|
70
|
+
}
|
|
71
|
+
}, { threshold: 0 });
|
|
72
|
+
return rectFetchObserver;
|
|
73
|
+
}, scheduleLayoutFrame2 = function() {
|
|
74
|
+
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
75
|
+
frameScheduled = true;
|
|
76
|
+
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
77
|
+
};
|
|
78
|
+
var BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
79
|
+
var rectFetchObserver = null;
|
|
80
|
+
var rectFetchResolve = null;
|
|
81
|
+
var rectFetchStartTime = 0;
|
|
82
|
+
var lastCallbackDelay = 0;
|
|
83
|
+
async function updateLayoutIfChanged(node) {
|
|
84
|
+
if (typeof LayoutHandlers.get(node) !== "function") return;
|
|
85
|
+
var parentNode = node.parentElement;
|
|
86
|
+
if (!parentNode) return;
|
|
87
|
+
var nodeRect;
|
|
88
|
+
var parentRect;
|
|
89
|
+
if (strategy === "async") {
|
|
90
|
+
nodeRect = BoundingRects.get(node);
|
|
91
|
+
parentRect = BoundingRects.get(parentNode);
|
|
92
|
+
if (!nodeRect || !parentRect) return;
|
|
93
|
+
} else {
|
|
94
|
+
nodeRect = node.getBoundingClientRect();
|
|
95
|
+
parentRect = parentNode.getBoundingClientRect();
|
|
96
|
+
}
|
|
97
|
+
emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
|
|
98
|
+
}
|
|
99
|
+
var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
100
|
+
var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
|
|
101
|
+
var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
102
|
+
var MAX_SKIP_FRAMES = 20;
|
|
103
|
+
var skipFrames = BASE_SKIP_FRAMES;
|
|
104
|
+
var frameCount = 0;
|
|
105
|
+
var frameScheduled = false;
|
|
106
|
+
async function layoutOnAnimationFrame() {
|
|
107
|
+
if (frameCount++ % skipFrames !== 0) {
|
|
108
|
+
frameScheduled = false;
|
|
109
|
+
scheduleLayoutFrame2();
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
|
|
113
|
+
if (strategy !== "off") {
|
|
114
|
+
var activeNodes = [];
|
|
115
|
+
var parentsToObserve = /* @__PURE__ */ new Set();
|
|
116
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
|
|
117
|
+
try {
|
|
118
|
+
for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
119
|
+
var node = _step.value;
|
|
120
|
+
var parentElement = node.parentElement;
|
|
121
|
+
if (!_instanceof(parentElement, HTMLElement)) {
|
|
122
|
+
cleanupNode(node);
|
|
123
|
+
continue;
|
|
124
|
+
}
|
|
125
|
+
var disableKey = LayoutDisableKey.get(node);
|
|
126
|
+
if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
|
|
127
|
+
activeNodes.push(node);
|
|
128
|
+
parentsToObserve.add(parentElement);
|
|
129
|
+
}
|
|
130
|
+
} catch (err) {
|
|
131
|
+
_didIteratorError = true;
|
|
132
|
+
_iteratorError = err;
|
|
133
|
+
} finally {
|
|
134
|
+
try {
|
|
135
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
|
|
136
|
+
} finally {
|
|
137
|
+
if (_didIteratorError) throw _iteratorError;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
if (activeNodes.length > 0) {
|
|
141
|
+
var io = ensureRectFetchObserver2();
|
|
142
|
+
rectFetchStartTime = performance.now();
|
|
143
|
+
for (var i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
|
|
144
|
+
var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
|
|
145
|
+
try {
|
|
146
|
+
for (var _iterator1 = parentsToObserve[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
|
|
147
|
+
var parent = _step1.value;
|
|
148
|
+
io.observe(parent);
|
|
149
|
+
}
|
|
150
|
+
} catch (err) {
|
|
151
|
+
_didIteratorError1 = true;
|
|
152
|
+
_iteratorError1 = err;
|
|
153
|
+
} finally {
|
|
154
|
+
try {
|
|
155
|
+
if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
|
|
156
|
+
} finally {
|
|
157
|
+
if (_didIteratorError1) throw _iteratorError1;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
await new Promise(function(res) {
|
|
161
|
+
rectFetchResolve = res;
|
|
162
|
+
});
|
|
163
|
+
for (var i1 = 0; i1 < activeNodes.length; i1++) io.unobserve(activeNodes[i1]);
|
|
164
|
+
var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
|
|
165
|
+
try {
|
|
166
|
+
for (var _iterator2 = parentsToObserve[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
|
167
|
+
var parent1 = _step2.value;
|
|
168
|
+
io.unobserve(parent1);
|
|
169
|
+
}
|
|
170
|
+
} catch (err) {
|
|
171
|
+
_didIteratorError2 = true;
|
|
172
|
+
_iteratorError2 = err;
|
|
173
|
+
} finally {
|
|
174
|
+
try {
|
|
175
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
|
|
176
|
+
} finally {
|
|
177
|
+
if (_didIteratorError2) throw _iteratorError2;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
|
|
181
|
+
else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
182
|
+
for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged(activeNodes[i2]);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
frameScheduled = false;
|
|
186
|
+
scheduleLayoutFrame2();
|
|
187
|
+
}
|
|
188
|
+
resumeLayoutLoop = scheduleLayoutFrame2;
|
|
189
|
+
measureOnNextFrame = function() {
|
|
190
|
+
frameCount = 0;
|
|
191
|
+
scheduleLayoutFrame2();
|
|
192
|
+
};
|
|
193
|
+
document.addEventListener("visibilitychange", scheduleLayoutFrame2);
|
|
194
|
+
scheduleLayoutFrame2();
|
|
204
195
|
}
|
|
205
|
-
var getElementLayoutEvent = function
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
196
|
+
var getElementLayoutEvent = function(nodeRect, parentRect, node) {
|
|
197
|
+
return {
|
|
198
|
+
nativeEvent: {
|
|
199
|
+
layout: getRelativeDimensions(nodeRect, parentRect, node),
|
|
200
|
+
target: nodeRect
|
|
201
|
+
},
|
|
202
|
+
timeStamp: Date.now()
|
|
203
|
+
};
|
|
213
204
|
};
|
|
214
|
-
var getPreTransformDimensions = function
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
205
|
+
var getPreTransformDimensions = function(node) {
|
|
206
|
+
return {
|
|
207
|
+
width: node.offsetWidth,
|
|
208
|
+
height: node.offsetHeight
|
|
209
|
+
};
|
|
219
210
|
};
|
|
220
|
-
var getRelativeDimensions = function
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
y,
|
|
237
|
-
width,
|
|
238
|
-
height,
|
|
239
|
-
pageX: a.left,
|
|
240
|
-
pageY: a.top
|
|
241
|
-
};
|
|
211
|
+
var getRelativeDimensions = function(a, b, aNode) {
|
|
212
|
+
var { left, top } = a;
|
|
213
|
+
var x = left - b.left;
|
|
214
|
+
var y = top - b.top;
|
|
215
|
+
var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
216
|
+
width: a.width,
|
|
217
|
+
height: a.height
|
|
218
|
+
};
|
|
219
|
+
return {
|
|
220
|
+
x,
|
|
221
|
+
y,
|
|
222
|
+
width,
|
|
223
|
+
height,
|
|
224
|
+
pageX: a.left,
|
|
225
|
+
pageY: a.top
|
|
226
|
+
};
|
|
242
227
|
};
|
|
243
228
|
function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
229
|
+
var onLayout = LayoutHandlers.get(node);
|
|
230
|
+
if (typeof onLayout !== "function") return;
|
|
231
|
+
var cachedRect = NodeRectCache.get(node);
|
|
232
|
+
var cachedParentRect = NodeRectCache.get(parentNode);
|
|
233
|
+
var nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
|
|
234
|
+
var parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
|
|
235
|
+
if (!nodeChanged && !parentChanged) return;
|
|
236
|
+
NodeRectCache.set(node, nodeRect);
|
|
237
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
238
|
+
var event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
239
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
240
|
+
tag: node.tagName,
|
|
241
|
+
id: node.id || void 0,
|
|
242
|
+
className: (node.className || "").slice(0, 60) || void 0,
|
|
243
|
+
layout: event.nativeEvent.layout,
|
|
244
|
+
first: !cachedRect
|
|
245
|
+
});
|
|
246
|
+
if (avoidUpdates) queuedUpdates.set(node, function() {
|
|
247
|
+
return onLayout(event);
|
|
248
|
+
});
|
|
249
|
+
else onLayout(event);
|
|
264
250
|
}
|
|
265
251
|
function observeLayoutNode(node, disableKey) {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
252
|
+
Nodes.add(node);
|
|
253
|
+
if (disableKey) LayoutDisableKey.set(node, disableKey);
|
|
254
|
+
else LayoutDisableKey.delete(node);
|
|
255
|
+
resumeLayoutLoop === null || resumeLayoutLoop === void 0 || resumeLayoutLoop();
|
|
269
256
|
}
|
|
270
257
|
function registerLayoutNode(node, onChange, disableKey) {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
258
|
+
LayoutHandlers.set(node, onChange);
|
|
259
|
+
observeLayoutNode(node, disableKey);
|
|
260
|
+
return function() {
|
|
261
|
+
return cleanupNode(node);
|
|
262
|
+
};
|
|
276
263
|
}
|
|
277
264
|
function cleanupNode(node) {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
265
|
+
Nodes.delete(node);
|
|
266
|
+
LayoutHandlers.delete(node);
|
|
267
|
+
LayoutDisableKey.delete(node);
|
|
268
|
+
NodeRectCache.delete(node);
|
|
282
269
|
}
|
|
283
|
-
var PrevHostNode = /* @__PURE__ */new WeakMap();
|
|
270
|
+
var PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
284
271
|
function emitLayoutSync(node) {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
272
|
+
var onLayout = LayoutHandlers.get(node);
|
|
273
|
+
if (typeof onLayout !== "function") return;
|
|
274
|
+
var parentNode = node.parentElement;
|
|
275
|
+
if (!parentNode) return;
|
|
276
|
+
var nodeRect = node.getBoundingClientRect();
|
|
277
|
+
var parentRect = parentNode.getBoundingClientRect();
|
|
278
|
+
NodeRectCache.set(node, nodeRect);
|
|
279
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
280
|
+
onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
|
|
294
281
|
}
|
|
295
282
|
function useElementLayout(ref, onLayout) {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
283
|
+
var _ref_current;
|
|
284
|
+
var disableKey = useContext(DisableLayoutContextKey);
|
|
285
|
+
var node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
|
|
286
|
+
if (node && onLayout) {
|
|
287
|
+
LayoutHandlers.set(node, onLayout);
|
|
288
|
+
LayoutDisableKey.set(node, disableKey);
|
|
289
|
+
}
|
|
290
|
+
useIsomorphicLayoutEffect(function() {
|
|
291
|
+
var _ref_current2;
|
|
292
|
+
if (!onLayout) return;
|
|
293
|
+
var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
|
|
294
|
+
var prevNode = PrevHostNode.get(ref);
|
|
295
|
+
if (nextNode === prevNode) return;
|
|
296
|
+
if (prevNode) cleanupNode(prevNode);
|
|
297
|
+
PrevHostNode.set(ref, nextNode);
|
|
298
|
+
if (!nextNode) return;
|
|
299
|
+
LayoutHandlers.set(nextNode, onLayout);
|
|
300
|
+
observeLayoutNode(nextNode, disableKey);
|
|
301
|
+
emitLayoutSync(nextNode);
|
|
302
|
+
});
|
|
303
|
+
useIsomorphicLayoutEffect(function() {
|
|
304
|
+
var _ref_current2;
|
|
305
|
+
if (!onLayout) return;
|
|
306
|
+
var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
|
|
307
|
+
if (!node2) return;
|
|
308
|
+
LayoutHandlers.set(node2, onLayout);
|
|
309
|
+
observeLayoutNode(node2, disableKey);
|
|
310
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
311
|
+
tag: node2.tagName,
|
|
312
|
+
id: node2.id || void 0,
|
|
313
|
+
className: (node2.className || "").slice(0, 60) || void 0,
|
|
314
|
+
totalNodes: Nodes.size
|
|
315
|
+
});
|
|
316
|
+
return function() {
|
|
317
|
+
cleanupNode(node2);
|
|
318
|
+
var swappedNode = PrevHostNode.get(ref);
|
|
319
|
+
if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
|
|
320
|
+
PrevHostNode.delete(ref);
|
|
321
|
+
};
|
|
322
|
+
}, [ref, !!onLayout]);
|
|
336
323
|
}
|
|
337
324
|
function ensureWebElement(x) {
|
|
338
|
-
|
|
339
|
-
|
|
325
|
+
if (typeof HTMLElement === "undefined") return;
|
|
326
|
+
return _instanceof(x, HTMLElement) ? x : void 0;
|
|
340
327
|
}
|
|
341
|
-
var getBoundingClientRectAsync = function
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
io.observe(node);
|
|
351
|
-
});
|
|
328
|
+
var getBoundingClientRectAsync = function(node) {
|
|
329
|
+
return new Promise(function(res) {
|
|
330
|
+
if (!node || node.nodeType !== 1) return res(false);
|
|
331
|
+
var io = new IntersectionObserver(function(entries) {
|
|
332
|
+
io.disconnect();
|
|
333
|
+
return res(entries[0].boundingClientRect);
|
|
334
|
+
}, { threshold: 0 });
|
|
335
|
+
io.observe(node);
|
|
336
|
+
});
|
|
352
337
|
};
|
|
353
|
-
var measureNode = async function
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
338
|
+
var measureNode = async function(node, relativeTo) {
|
|
339
|
+
var relativeNode = relativeTo || (node === null || node === void 0 ? void 0 : node.parentElement);
|
|
340
|
+
if (_instanceof(relativeNode, HTMLElement)) {
|
|
341
|
+
var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
|
|
342
|
+
if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
343
|
+
}
|
|
344
|
+
return null;
|
|
360
345
|
};
|
|
361
|
-
var measure = async function
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
346
|
+
var measure = async function(node, callback) {
|
|
347
|
+
var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
|
|
348
|
+
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
349
|
+
return out;
|
|
365
350
|
};
|
|
366
351
|
function createMeasure(node) {
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
352
|
+
return function(callback) {
|
|
353
|
+
return measure(node, callback);
|
|
354
|
+
};
|
|
370
355
|
}
|
|
371
|
-
var measureInWindow = async function
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
356
|
+
var measureInWindow = async function(node, callback) {
|
|
357
|
+
var out = await measureNode(node, null);
|
|
358
|
+
if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
|
|
359
|
+
return out;
|
|
375
360
|
};
|
|
376
|
-
var createMeasureInWindow = function
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
361
|
+
var createMeasureInWindow = function(node) {
|
|
362
|
+
return function(callback) {
|
|
363
|
+
return measureInWindow(node, callback);
|
|
364
|
+
};
|
|
380
365
|
};
|
|
381
|
-
var measureLayout = async function
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
366
|
+
var measureLayout = async function(node, relativeNode, callback) {
|
|
367
|
+
var out = await measureNode(node, relativeNode);
|
|
368
|
+
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
369
|
+
return out;
|
|
385
370
|
};
|
|
386
371
|
function createMeasureLayout(node) {
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
372
|
+
return function(relativeTo, callback) {
|
|
373
|
+
return measureLayout(node, relativeTo, callback);
|
|
374
|
+
};
|
|
390
375
|
}
|
|
376
|
+
|
|
391
377
|
export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, setOnLayoutStrategy, useElementLayout };
|
|
392
378
|
//# sourceMappingURL=index.native.js.map
|