@tamagui/core 1.89.0 → 1.89.2
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/esm/createOptimizedView.mjs +2 -0
- package/dist/esm/getBaseViews.mjs +4 -0
- package/dist/esm/helpers/getBoundingClientRect.mjs +4 -0
- package/dist/esm/helpers/getRect.mjs +20 -0
- package/dist/esm/hooks/useElementLayout.mjs +87 -0
- package/dist/esm/hooks/usePlatformMethods.mjs +20 -0
- package/dist/esm/index.mjs +90 -0
- package/dist/esm/inject-styles.mjs +13 -0
- package/dist/esm/reactNativeTypes.mjs +0 -0
- package/dist/esm/vendor/Pressability.mjs +3 -0
- package/package.json +6 -6
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { getBoundingClientRect } from "./getBoundingClientRect.mjs";
|
|
2
|
+
const getRect = node => {
|
|
3
|
+
const rect = getBoundingClientRect(node);
|
|
4
|
+
if (!rect) return;
|
|
5
|
+
const {
|
|
6
|
+
x,
|
|
7
|
+
y,
|
|
8
|
+
top,
|
|
9
|
+
left
|
|
10
|
+
} = rect;
|
|
11
|
+
return {
|
|
12
|
+
x,
|
|
13
|
+
y,
|
|
14
|
+
width: node.offsetWidth,
|
|
15
|
+
height: node.offsetHeight,
|
|
16
|
+
top,
|
|
17
|
+
left
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export { getRect };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
2
|
+
import { getBoundingClientRect } from "../helpers/getBoundingClientRect.mjs";
|
|
3
|
+
const LayoutHandlers = /* @__PURE__ */new WeakMap();
|
|
4
|
+
let resizeObserver = null;
|
|
5
|
+
typeof window < "u" && "ResizeObserver" in window && (resizeObserver = new ResizeObserver(entries => {
|
|
6
|
+
for (const {
|
|
7
|
+
target
|
|
8
|
+
} of entries) {
|
|
9
|
+
const onLayout = LayoutHandlers.get(target);
|
|
10
|
+
if (typeof onLayout != "function") return;
|
|
11
|
+
measureLayout(target, null, (x, y, width, height, left, top) => {
|
|
12
|
+
onLayout({
|
|
13
|
+
nativeEvent: {
|
|
14
|
+
layout: {
|
|
15
|
+
x,
|
|
16
|
+
y,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
left,
|
|
20
|
+
top
|
|
21
|
+
},
|
|
22
|
+
target
|
|
23
|
+
},
|
|
24
|
+
timeStamp: Date.now()
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}));
|
|
29
|
+
const cache = /* @__PURE__ */new WeakMap(),
|
|
30
|
+
measureLayout = (node, relativeTo, callback) => {
|
|
31
|
+
const relativeNode = relativeTo || node?.parentNode;
|
|
32
|
+
if (relativeNode instanceof HTMLElement) {
|
|
33
|
+
const now = Date.now();
|
|
34
|
+
cache.set(node, now), Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]).then(([nodeDim, relativeNodeDim]) => {
|
|
35
|
+
if (relativeNodeDim && nodeDim && cache.get(node) === now) {
|
|
36
|
+
const {
|
|
37
|
+
x,
|
|
38
|
+
y,
|
|
39
|
+
width,
|
|
40
|
+
height,
|
|
41
|
+
left,
|
|
42
|
+
top
|
|
43
|
+
} = getRelativeDimensions(nodeDim, relativeNodeDim);
|
|
44
|
+
callback(x, y, width, height, left, top);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
getRelativeDimensions = (a, b) => {
|
|
50
|
+
const {
|
|
51
|
+
height,
|
|
52
|
+
left,
|
|
53
|
+
top,
|
|
54
|
+
width
|
|
55
|
+
} = a,
|
|
56
|
+
x = left - b.left,
|
|
57
|
+
y = top - b.top;
|
|
58
|
+
return {
|
|
59
|
+
x,
|
|
60
|
+
y,
|
|
61
|
+
width,
|
|
62
|
+
height,
|
|
63
|
+
left,
|
|
64
|
+
top
|
|
65
|
+
};
|
|
66
|
+
},
|
|
67
|
+
getBoundingClientRectAsync = element => new Promise(resolve => {
|
|
68
|
+
function fallbackToSync() {
|
|
69
|
+
resolve(getBoundingClientRect(element));
|
|
70
|
+
}
|
|
71
|
+
const tm = setTimeout(fallbackToSync, 10);
|
|
72
|
+
new IntersectionObserver((entries, ob) => {
|
|
73
|
+
clearTimeout(tm), ob.disconnect(), resolve(entries[0]?.boundingClientRect);
|
|
74
|
+
}, {
|
|
75
|
+
threshold: 1e-4
|
|
76
|
+
}).observe(element);
|
|
77
|
+
});
|
|
78
|
+
function useElementLayout(ref, onLayout) {
|
|
79
|
+
useIsomorphicLayoutEffect(() => {
|
|
80
|
+
if (!resizeObserver || !onLayout) return;
|
|
81
|
+
const node = ref.current;
|
|
82
|
+
if (node) return LayoutHandlers.set(node, onLayout), resizeObserver.observe(node), () => {
|
|
83
|
+
resizeObserver?.unobserve(node);
|
|
84
|
+
};
|
|
85
|
+
}, [ref, onLayout]);
|
|
86
|
+
}
|
|
87
|
+
export { measureLayout, useElementLayout };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useIsomorphicLayoutEffect } from "@tamagui/constants";
|
|
2
|
+
import { getRect } from "../helpers/getRect.mjs";
|
|
3
|
+
import { measureLayout } from "./useElementLayout.mjs";
|
|
4
|
+
function usePlatformMethods(hostRef) {
|
|
5
|
+
useIsomorphicLayoutEffect(() => {
|
|
6
|
+
const node = hostRef.current;
|
|
7
|
+
node && (node.measure ||= callback => measureLayout(node, null, callback), node.measureLayout ||= (relativeToNode, success) => measureLayout(node, relativeToNode, success), node.measureInWindow ||= callback => {
|
|
8
|
+
node && setTimeout(() => {
|
|
9
|
+
const {
|
|
10
|
+
height,
|
|
11
|
+
left,
|
|
12
|
+
top,
|
|
13
|
+
width
|
|
14
|
+
} = getRect(node);
|
|
15
|
+
callback(left, top, width, height);
|
|
16
|
+
}, 0);
|
|
17
|
+
});
|
|
18
|
+
}, [hostRef]);
|
|
19
|
+
}
|
|
20
|
+
export { usePlatformMethods };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
|
|
2
|
+
import { Stack as WebStack, Text as WebText, View as WebView, setupHooks } from "@tamagui/web";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import "./createOptimizedView.mjs";
|
|
5
|
+
import { getBaseViews } from "./getBaseViews.mjs";
|
|
6
|
+
import { useElementLayout } from "./hooks/useElementLayout.mjs";
|
|
7
|
+
import { usePlatformMethods } from "./hooks/usePlatformMethods.mjs";
|
|
8
|
+
import "./vendor/Pressability.mjs";
|
|
9
|
+
export * from "@tamagui/web";
|
|
10
|
+
export * from "./reactNativeTypes.mjs";
|
|
11
|
+
const baseViews = getBaseViews();
|
|
12
|
+
setupHooks({
|
|
13
|
+
getBaseViews,
|
|
14
|
+
usePropsTransform(elementType, propsIn, stateRef, willHydrate) {
|
|
15
|
+
{
|
|
16
|
+
const isDOM = typeof elementType == "string",
|
|
17
|
+
{
|
|
18
|
+
// event props
|
|
19
|
+
onMoveShouldSetResponder,
|
|
20
|
+
onMoveShouldSetResponderCapture,
|
|
21
|
+
onResponderEnd,
|
|
22
|
+
onResponderGrant,
|
|
23
|
+
onResponderMove,
|
|
24
|
+
onResponderReject,
|
|
25
|
+
onResponderRelease,
|
|
26
|
+
onResponderStart,
|
|
27
|
+
onResponderTerminate,
|
|
28
|
+
onResponderTerminationRequest,
|
|
29
|
+
onScrollShouldSetResponder,
|
|
30
|
+
onScrollShouldSetResponderCapture,
|
|
31
|
+
onSelectionChangeShouldSetResponder,
|
|
32
|
+
onSelectionChangeShouldSetResponderCapture,
|
|
33
|
+
onStartShouldSetResponder,
|
|
34
|
+
onStartShouldSetResponderCapture,
|
|
35
|
+
// android
|
|
36
|
+
collapsable,
|
|
37
|
+
focusable,
|
|
38
|
+
// deprecated,
|
|
39
|
+
accessible,
|
|
40
|
+
accessibilityDisabled,
|
|
41
|
+
onLayout,
|
|
42
|
+
hrefAttrs,
|
|
43
|
+
...plainDOMProps
|
|
44
|
+
} = propsIn;
|
|
45
|
+
if (willHydrate || isDOM) {
|
|
46
|
+
const hostRef = useMemo(() => ({
|
|
47
|
+
get current() {
|
|
48
|
+
return stateRef.current.host;
|
|
49
|
+
}
|
|
50
|
+
}), [stateRef]);
|
|
51
|
+
usePlatformMethods(hostRef), useElementLayout(hostRef, isDOM ? onLayout : void 0), useResponderEvents(hostRef, isDOM ? {
|
|
52
|
+
onMoveShouldSetResponder,
|
|
53
|
+
onMoveShouldSetResponderCapture,
|
|
54
|
+
onResponderEnd,
|
|
55
|
+
onResponderGrant,
|
|
56
|
+
onResponderMove,
|
|
57
|
+
onResponderReject,
|
|
58
|
+
onResponderRelease,
|
|
59
|
+
onResponderStart,
|
|
60
|
+
onResponderTerminate,
|
|
61
|
+
onResponderTerminationRequest,
|
|
62
|
+
onScrollShouldSetResponder,
|
|
63
|
+
onScrollShouldSetResponderCapture,
|
|
64
|
+
onSelectionChangeShouldSetResponder,
|
|
65
|
+
onSelectionChangeShouldSetResponderCapture,
|
|
66
|
+
onStartShouldSetResponder,
|
|
67
|
+
onStartShouldSetResponderCapture
|
|
68
|
+
} : void 0);
|
|
69
|
+
}
|
|
70
|
+
if (isDOM) {
|
|
71
|
+
if (plainDOMProps.href && hrefAttrs) {
|
|
72
|
+
const {
|
|
73
|
+
download,
|
|
74
|
+
rel,
|
|
75
|
+
target
|
|
76
|
+
} = hrefAttrs;
|
|
77
|
+
download != null && (plainDOMProps.download = download), rel && (plainDOMProps.rel = rel), typeof target == "string" && (plainDOMProps.target = target.charAt(0) !== "_" ? `_${target}` : target);
|
|
78
|
+
}
|
|
79
|
+
return plainDOMProps;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
useEvents(viewProps, events, {
|
|
84
|
+
pseudos
|
|
85
|
+
}, setStateShallow, staticConfig) {}
|
|
86
|
+
});
|
|
87
|
+
const View = WebView,
|
|
88
|
+
Stack = WebStack,
|
|
89
|
+
Text = WebText;
|
|
90
|
+
export { Stack, Text, View };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const stylesheets = {},
|
|
2
|
+
injectStyles = ({
|
|
3
|
+
filePath,
|
|
4
|
+
css
|
|
5
|
+
}) => {
|
|
6
|
+
let stylesheet = stylesheets[filePath];
|
|
7
|
+
if (!stylesheet) {
|
|
8
|
+
const styleEl = document.createElement("style");
|
|
9
|
+
styleEl.setAttribute("data-file", filePath), styleEl.setAttribute("type", "text/css"), stylesheet = stylesheets[filePath] = styleEl, document.head.appendChild(styleEl);
|
|
10
|
+
}
|
|
11
|
+
stylesheet.innerHTML = css;
|
|
12
|
+
};
|
|
13
|
+
export { injectStyles };
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.89.
|
|
3
|
+
"version": "1.89.2",
|
|
4
4
|
"source": "src/index.tsx",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
"native-test.d.ts"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@tamagui/react-native-use-pressable": "1.89.
|
|
39
|
-
"@tamagui/react-native-use-responder-events": "1.89.
|
|
40
|
-
"@tamagui/use-event": "1.89.
|
|
41
|
-
"@tamagui/web": "1.89.
|
|
38
|
+
"@tamagui/react-native-use-pressable": "1.89.2",
|
|
39
|
+
"@tamagui/react-native-use-responder-events": "1.89.2",
|
|
40
|
+
"@tamagui/use-event": "1.89.2",
|
|
41
|
+
"@tamagui/web": "1.89.2"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "*"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@tamagui/build": "1.89.
|
|
47
|
+
"@tamagui/build": "1.89.2",
|
|
48
48
|
"@testing-library/react": "^14.0.0",
|
|
49
49
|
"csstype": "^3.0.10",
|
|
50
50
|
"react": "^18.2.0",
|