@tamagui/core 1.126.18 → 1.127.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/helpers/getBoundingClientRect.cjs +16 -3
- package/dist/cjs/helpers/getBoundingClientRect.js +17 -2
- package/dist/cjs/helpers/getBoundingClientRect.js.map +1 -1
- package/dist/cjs/helpers/getBoundingClientRect.native.js +20 -2
- package/dist/cjs/helpers/getBoundingClientRect.native.js.map +2 -2
- package/dist/cjs/hooks/useElementLayout.cjs +90 -22
- package/dist/cjs/hooks/useElementLayout.js +72 -16
- package/dist/cjs/hooks/useElementLayout.js.map +1 -1
- package/dist/cjs/hooks/useElementLayout.native.js +82 -20
- package/dist/cjs/hooks/useElementLayout.native.js.map +2 -2
- package/dist/esm/helpers/getBoundingClientRect.js +17 -2
- package/dist/esm/helpers/getBoundingClientRect.js.map +1 -1
- package/dist/esm/helpers/getBoundingClientRect.mjs +15 -3
- package/dist/esm/helpers/getBoundingClientRect.mjs.map +1 -1
- package/dist/esm/helpers/getBoundingClientRect.native.js +22 -4
- package/dist/esm/helpers/getBoundingClientRect.native.js.map +1 -1
- package/dist/esm/hooks/useElementLayout.js +72 -16
- package/dist/esm/hooks/useElementLayout.js.map +1 -1
- package/dist/esm/hooks/useElementLayout.mjs +89 -23
- package/dist/esm/hooks/useElementLayout.mjs.map +1 -1
- package/dist/esm/hooks/useElementLayout.native.js +101 -36
- package/dist/esm/hooks/useElementLayout.native.js.map +1 -1
- package/dist/native.js +81 -22
- package/dist/native.js.map +2 -2
- package/dist/test.native.js +81 -22
- package/dist/test.native.js.map +2 -2
- package/package.json +7 -7
- package/src/helpers/getBoundingClientRect.tsx +26 -0
- package/src/hooks/useElementLayout.tsx +107 -8
- package/types/helpers/getBoundingClientRect.d.ts +1 -0
- package/types/helpers/getBoundingClientRect.d.ts.map +1 -1
- package/types/hooks/useElementLayout.d.ts +4 -2
- package/types/hooks/useElementLayout.d.ts.map +1 -1
package/dist/native.js
CHANGED
|
@@ -393,6 +393,9 @@ var require_constants_native = __commonJS({
|
|
|
393
393
|
}), mod);
|
|
394
394
|
}, constants_native_exports = {};
|
|
395
395
|
__export2(constants_native_exports, {
|
|
396
|
+
IS_REACT_19: function() {
|
|
397
|
+
return IS_REACT_19;
|
|
398
|
+
},
|
|
396
399
|
currentPlatform: function() {
|
|
397
400
|
return currentPlatform;
|
|
398
401
|
},
|
|
@@ -428,7 +431,7 @@ var require_constants_native = __commonJS({
|
|
|
428
431
|
}
|
|
429
432
|
});
|
|
430
433
|
module2.exports = __toCommonJS2(constants_native_exports);
|
|
431
|
-
var import_react3 = require("react"), import_react_native = require("react-native"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = import_react_native.Platform.OS === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = import_react_native.Platform.OS === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
|
|
434
|
+
var import_react3 = require("react"), import_react22 = require("react"), import_react_native = require("react-native"), IS_REACT_19 = !!import_react22.use, isWeb = !1, isWindowDefined = !1, isServer = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = import_react_native.Platform.OS === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = import_react_native.Platform.OS === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
|
|
432
435
|
ios: "ios",
|
|
433
436
|
android: "android"
|
|
434
437
|
}, currentPlatform = platforms[import_react_native.Platform.OS] || "native";
|
|
@@ -12351,42 +12354,66 @@ var getRect = function(node) {
|
|
|
12351
12354
|
};
|
|
12352
12355
|
|
|
12353
12356
|
// src/hooks/useElementLayout.tsx
|
|
12354
|
-
var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(),
|
|
12357
|
+
var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
|
|
12355
12358
|
function setOnLayoutStrategy(state) {
|
|
12356
|
-
|
|
12359
|
+
strategy = state;
|
|
12357
12360
|
}
|
|
12358
|
-
var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0;
|
|
12361
|
+
var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), DebounceTimers = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0, DEBOUNCE_DELAY = 32;
|
|
12359
12362
|
if (import_constants.isClient)
|
|
12360
12363
|
if (rAF) {
|
|
12361
|
-
let
|
|
12362
|
-
var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
|
|
12363
|
-
if (typeof onLayout == "function") {
|
|
12364
|
-
var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
|
|
12365
|
-
if (!cachedRect || // has changed one rect
|
|
12366
|
-
!(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect))) {
|
|
12367
|
-
NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect);
|
|
12368
|
-
var event = getElementLayoutEvent(node);
|
|
12369
|
-
avoidUpdates ? queuedUpdates.set(node, function() {
|
|
12370
|
-
return onLayout(event);
|
|
12371
|
-
}) : onLayout(event);
|
|
12372
|
-
}
|
|
12373
|
-
}
|
|
12374
|
-
}, layoutOnAnimationFrame = function() {
|
|
12364
|
+
let layoutOnAnimationFrame = function() {
|
|
12375
12365
|
var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
|
|
12376
|
-
if (lastFrameAt = now,
|
|
12366
|
+
if (lastFrameAt = now, strategy !== "off") {
|
|
12377
12367
|
var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
|
|
12378
12368
|
hasRecentSyncWork || Nodes.forEach(updateLayoutIfChanged);
|
|
12379
12369
|
}
|
|
12380
12370
|
rAF(layoutOnAnimationFrame);
|
|
12381
12371
|
};
|
|
12382
|
-
|
|
12372
|
+
layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
|
|
12383
12373
|
avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
|
|
12384
12374
|
return cb();
|
|
12385
12375
|
}), queuedUpdates.clear());
|
|
12386
|
-
})
|
|
12376
|
+
});
|
|
12377
|
+
async function updateLayoutIfChanged(node) {
|
|
12378
|
+
var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
|
|
12379
|
+
if (typeof onLayout == "function") {
|
|
12380
|
+
var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
|
|
12381
|
+
if (!cachedRect || // has changed one rect
|
|
12382
|
+
!(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect)))
|
|
12383
|
+
if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
|
|
12384
|
+
var event = getElementLayoutEvent(node);
|
|
12385
|
+
queuedUpdates.set(node, function() {
|
|
12386
|
+
return onLayout(event);
|
|
12387
|
+
});
|
|
12388
|
+
} else if (strategy === "async") {
|
|
12389
|
+
var now = Date.now();
|
|
12390
|
+
LastChangeTime.set(node, now);
|
|
12391
|
+
var existingTimer = DebounceTimers.get(node);
|
|
12392
|
+
existingTimer && clearTimeout(existingTimer);
|
|
12393
|
+
var timer = setTimeout(async function() {
|
|
12394
|
+
var lastChange = LastChangeTime.get(node) || 0, timeSinceChange = Date.now() - lastChange;
|
|
12395
|
+
if (timeSinceChange >= DEBOUNCE_DELAY) {
|
|
12396
|
+
var event2 = await getElementLayoutEventAsync(node);
|
|
12397
|
+
onLayout(event2), DebounceTimers.delete(node);
|
|
12398
|
+
} else {
|
|
12399
|
+
var remainingDelay = DEBOUNCE_DELAY - timeSinceChange, newTimer = setTimeout(async function() {
|
|
12400
|
+
var event3 = await getElementLayoutEventAsync(node);
|
|
12401
|
+
onLayout(event3), DebounceTimers.delete(node);
|
|
12402
|
+
}, remainingDelay);
|
|
12403
|
+
DebounceTimers.set(node, newTimer);
|
|
12404
|
+
}
|
|
12405
|
+
}, DEBOUNCE_DELAY);
|
|
12406
|
+
DebounceTimers.set(node, timer);
|
|
12407
|
+
} else {
|
|
12408
|
+
var event1 = getElementLayoutEvent(node);
|
|
12409
|
+
onLayout(event1);
|
|
12410
|
+
}
|
|
12411
|
+
}
|
|
12412
|
+
}
|
|
12413
|
+
rAF(layoutOnAnimationFrame);
|
|
12387
12414
|
} else
|
|
12388
12415
|
process.env.NODE_ENV === "development" && console.warn("No requestAnimationFrame - please polyfill for onLayout to work correctly");
|
|
12389
|
-
var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause,
|
|
12416
|
+
var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
|
|
12390
12417
|
var res = null;
|
|
12391
12418
|
if (measureLayout(target, null, function(x, y, width, height, left, top) {
|
|
12392
12419
|
res = {
|
|
@@ -12415,6 +12442,38 @@ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, update
|
|
|
12415
12442
|
callback(x, y, width, height, left, top);
|
|
12416
12443
|
}
|
|
12417
12444
|
}
|
|
12445
|
+
}, getElementLayoutEventAsync = async function(target) {
|
|
12446
|
+
var res = null;
|
|
12447
|
+
if (await measureLayoutAsync(target, null, function(x, y, width, height, left, top) {
|
|
12448
|
+
res = {
|
|
12449
|
+
nativeEvent: {
|
|
12450
|
+
layout: {
|
|
12451
|
+
x,
|
|
12452
|
+
y,
|
|
12453
|
+
width,
|
|
12454
|
+
height,
|
|
12455
|
+
left,
|
|
12456
|
+
top
|
|
12457
|
+
},
|
|
12458
|
+
target
|
|
12459
|
+
},
|
|
12460
|
+
timeStamp: Date.now()
|
|
12461
|
+
};
|
|
12462
|
+
}), !res)
|
|
12463
|
+
throw new Error("\u203C\uFE0F");
|
|
12464
|
+
return res;
|
|
12465
|
+
}, measureLayoutAsync = async function(node, relativeTo, callback) {
|
|
12466
|
+
var relativeNode = relativeTo || (node == null ? void 0 : node.parentElement);
|
|
12467
|
+
if (relativeNode instanceof HTMLElement) {
|
|
12468
|
+
var [nodeDim, relativeNodeDim] = await Promise.all([
|
|
12469
|
+
node.getBoundingClientRect(),
|
|
12470
|
+
relativeNode.getBoundingClientRect()
|
|
12471
|
+
]);
|
|
12472
|
+
if (relativeNodeDim && nodeDim) {
|
|
12473
|
+
var { x, y, width, height, left, top } = getRelativeDimensions(nodeDim, relativeNodeDim);
|
|
12474
|
+
callback(x, y, width, height, left, top);
|
|
12475
|
+
}
|
|
12476
|
+
}
|
|
12418
12477
|
}, getRelativeDimensions = function(a, b) {
|
|
12419
12478
|
var { height, left, top, width } = a, x = left - b.left, y = top - b.top;
|
|
12420
12479
|
return {
|