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