@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/test.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";
|
|
@@ -11771,40 +11774,64 @@ var getRect = function(node) {
|
|
|
11771
11774
|
};
|
|
11772
11775
|
|
|
11773
11776
|
// src/hooks/useElementLayout.tsx
|
|
11774
|
-
var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(),
|
|
11777
|
+
var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
|
|
11775
11778
|
function setOnLayoutStrategy(state) {
|
|
11776
|
-
|
|
11779
|
+
strategy = state;
|
|
11777
11780
|
}
|
|
11778
|
-
var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0;
|
|
11781
|
+
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;
|
|
11779
11782
|
if (import_constants.isClient && rAF) {
|
|
11780
|
-
let
|
|
11781
|
-
var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
|
|
11782
|
-
if (typeof onLayout == "function") {
|
|
11783
|
-
var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
|
|
11784
|
-
if (!cachedRect || // has changed one rect
|
|
11785
|
-
!(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect))) {
|
|
11786
|
-
NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect);
|
|
11787
|
-
var event = getElementLayoutEvent(node);
|
|
11788
|
-
avoidUpdates ? queuedUpdates.set(node, function() {
|
|
11789
|
-
return onLayout(event);
|
|
11790
|
-
}) : onLayout(event);
|
|
11791
|
-
}
|
|
11792
|
-
}
|
|
11793
|
-
}, layoutOnAnimationFrame = function() {
|
|
11783
|
+
let layoutOnAnimationFrame = function() {
|
|
11794
11784
|
var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
|
|
11795
|
-
if (lastFrameAt = now,
|
|
11785
|
+
if (lastFrameAt = now, strategy !== "off") {
|
|
11796
11786
|
var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
|
|
11797
11787
|
hasRecentSyncWork || Nodes.forEach(updateLayoutIfChanged);
|
|
11798
11788
|
}
|
|
11799
11789
|
rAF(layoutOnAnimationFrame);
|
|
11800
11790
|
};
|
|
11801
|
-
|
|
11791
|
+
layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
|
|
11802
11792
|
avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
|
|
11803
11793
|
return cb();
|
|
11804
11794
|
}), queuedUpdates.clear());
|
|
11805
|
-
})
|
|
11795
|
+
});
|
|
11796
|
+
async function updateLayoutIfChanged(node) {
|
|
11797
|
+
var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
|
|
11798
|
+
if (typeof onLayout == "function") {
|
|
11799
|
+
var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
|
|
11800
|
+
if (!cachedRect || // has changed one rect
|
|
11801
|
+
!(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect)))
|
|
11802
|
+
if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
|
|
11803
|
+
var event = getElementLayoutEvent(node);
|
|
11804
|
+
queuedUpdates.set(node, function() {
|
|
11805
|
+
return onLayout(event);
|
|
11806
|
+
});
|
|
11807
|
+
} else if (strategy === "async") {
|
|
11808
|
+
var now = Date.now();
|
|
11809
|
+
LastChangeTime.set(node, now);
|
|
11810
|
+
var existingTimer = DebounceTimers.get(node);
|
|
11811
|
+
existingTimer && clearTimeout(existingTimer);
|
|
11812
|
+
var timer = setTimeout(async function() {
|
|
11813
|
+
var lastChange = LastChangeTime.get(node) || 0, timeSinceChange = Date.now() - lastChange;
|
|
11814
|
+
if (timeSinceChange >= DEBOUNCE_DELAY) {
|
|
11815
|
+
var event2 = await getElementLayoutEventAsync(node);
|
|
11816
|
+
onLayout(event2), DebounceTimers.delete(node);
|
|
11817
|
+
} else {
|
|
11818
|
+
var remainingDelay = DEBOUNCE_DELAY - timeSinceChange, newTimer = setTimeout(async function() {
|
|
11819
|
+
var event3 = await getElementLayoutEventAsync(node);
|
|
11820
|
+
onLayout(event3), DebounceTimers.delete(node);
|
|
11821
|
+
}, remainingDelay);
|
|
11822
|
+
DebounceTimers.set(node, newTimer);
|
|
11823
|
+
}
|
|
11824
|
+
}, DEBOUNCE_DELAY);
|
|
11825
|
+
DebounceTimers.set(node, timer);
|
|
11826
|
+
} else {
|
|
11827
|
+
var event1 = getElementLayoutEvent(node);
|
|
11828
|
+
onLayout(event1);
|
|
11829
|
+
}
|
|
11830
|
+
}
|
|
11831
|
+
}
|
|
11832
|
+
rAF(layoutOnAnimationFrame);
|
|
11806
11833
|
}
|
|
11807
|
-
var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause,
|
|
11834
|
+
var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
|
|
11808
11835
|
var res = null;
|
|
11809
11836
|
if (measureLayout(target, null, function(x, y, width, height, left, top) {
|
|
11810
11837
|
res = {
|
|
@@ -11833,6 +11860,38 @@ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, update
|
|
|
11833
11860
|
callback(x, y, width, height, left, top);
|
|
11834
11861
|
}
|
|
11835
11862
|
}
|
|
11863
|
+
}, getElementLayoutEventAsync = async function(target) {
|
|
11864
|
+
var res = null;
|
|
11865
|
+
if (await measureLayoutAsync(target, null, function(x, y, width, height, left, top) {
|
|
11866
|
+
res = {
|
|
11867
|
+
nativeEvent: {
|
|
11868
|
+
layout: {
|
|
11869
|
+
x,
|
|
11870
|
+
y,
|
|
11871
|
+
width,
|
|
11872
|
+
height,
|
|
11873
|
+
left,
|
|
11874
|
+
top
|
|
11875
|
+
},
|
|
11876
|
+
target
|
|
11877
|
+
},
|
|
11878
|
+
timeStamp: Date.now()
|
|
11879
|
+
};
|
|
11880
|
+
}), !res)
|
|
11881
|
+
throw new Error("\u203C\uFE0F");
|
|
11882
|
+
return res;
|
|
11883
|
+
}, measureLayoutAsync = async function(node, relativeTo, callback) {
|
|
11884
|
+
var relativeNode = relativeTo || (node == null ? void 0 : node.parentElement);
|
|
11885
|
+
if (relativeNode instanceof HTMLElement) {
|
|
11886
|
+
var [nodeDim, relativeNodeDim] = await Promise.all([
|
|
11887
|
+
node.getBoundingClientRect(),
|
|
11888
|
+
relativeNode.getBoundingClientRect()
|
|
11889
|
+
]);
|
|
11890
|
+
if (relativeNodeDim && nodeDim) {
|
|
11891
|
+
var { x, y, width, height, left, top } = getRelativeDimensions(nodeDim, relativeNodeDim);
|
|
11892
|
+
callback(x, y, width, height, left, top);
|
|
11893
|
+
}
|
|
11894
|
+
}
|
|
11836
11895
|
}, getRelativeDimensions = function(a, b) {
|
|
11837
11896
|
var { height, left, top, width } = a, x = left - b.left, y = top - b.top;
|
|
11838
11897
|
return {
|