@react-navigation/elements 2.5.0 → 2.5.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.
|
@@ -9,12 +9,12 @@ import useLatestCallback from 'use-latest-callback';
|
|
|
9
9
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
10
10
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
11
|
const FrameContext = /*#__PURE__*/React.createContext(undefined);
|
|
12
|
-
export function useFrameSize(selector,
|
|
12
|
+
export function useFrameSize(selector, throttle) {
|
|
13
13
|
const context = React.useContext(FrameContext);
|
|
14
14
|
if (context == null) {
|
|
15
15
|
throw new Error('useFrameSize must be used within a FrameSizeProvider');
|
|
16
16
|
}
|
|
17
|
-
const value = useSyncExternalStoreWithSelector(
|
|
17
|
+
const value = useSyncExternalStoreWithSelector(throttle ? context.subscribeThrottled : context.subscribe, context.getCurrent, context.getCurrent, selector);
|
|
18
18
|
return value;
|
|
19
19
|
}
|
|
20
20
|
export function FrameSizeProvider({
|
|
@@ -35,7 +35,10 @@ function FrameSizeProviderInner({
|
|
|
35
35
|
initialFrame,
|
|
36
36
|
children
|
|
37
37
|
}) {
|
|
38
|
-
const frameRef = React.useRef(
|
|
38
|
+
const frameRef = React.useRef({
|
|
39
|
+
width: initialFrame.width,
|
|
40
|
+
height: initialFrame.height
|
|
41
|
+
});
|
|
39
42
|
const listeners = React.useRef(new Set());
|
|
40
43
|
const getCurrent = useLatestCallback(() => frameRef.current);
|
|
41
44
|
const subscribe = useLatestCallback(listener => {
|
|
@@ -44,27 +47,54 @@ function FrameSizeProviderInner({
|
|
|
44
47
|
listeners.current.delete(listener);
|
|
45
48
|
};
|
|
46
49
|
});
|
|
47
|
-
const
|
|
50
|
+
const subscribeThrottled = useLatestCallback(listener => {
|
|
51
|
+
const delay = 100; // Throttle delay in milliseconds
|
|
52
|
+
|
|
48
53
|
let timer;
|
|
49
|
-
|
|
54
|
+
let updated = false;
|
|
55
|
+
let waiting = false;
|
|
56
|
+
const throttledListener = () => {
|
|
57
|
+
clearTimeout(timer);
|
|
58
|
+
updated = true;
|
|
59
|
+
if (waiting) {
|
|
60
|
+
// Schedule a timer to call the listener at the end
|
|
61
|
+
timer = setTimeout(() => {
|
|
62
|
+
if (updated) {
|
|
63
|
+
updated = false;
|
|
64
|
+
listener();
|
|
65
|
+
}
|
|
66
|
+
}, delay);
|
|
67
|
+
} else {
|
|
68
|
+
waiting = true;
|
|
69
|
+
setTimeout(function () {
|
|
70
|
+
waiting = false;
|
|
71
|
+
}, delay);
|
|
72
|
+
|
|
73
|
+
// Call the listener immediately at start
|
|
74
|
+
updated = false;
|
|
75
|
+
listener();
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
const unsubscribe = subscribe(throttledListener);
|
|
79
|
+
return () => {
|
|
80
|
+
unsubscribe();
|
|
50
81
|
clearTimeout(timer);
|
|
51
|
-
timer = setTimeout(() => {
|
|
52
|
-
listener(frame);
|
|
53
|
-
}, 100);
|
|
54
82
|
};
|
|
55
|
-
return subscribe(debouncedListener);
|
|
56
83
|
});
|
|
57
84
|
const context = React.useMemo(() => ({
|
|
58
85
|
getCurrent,
|
|
59
86
|
subscribe,
|
|
60
|
-
|
|
61
|
-
}), [subscribe,
|
|
87
|
+
subscribeThrottled
|
|
88
|
+
}), [subscribe, subscribeThrottled, getCurrent]);
|
|
62
89
|
const onChange = useLatestCallback(frame => {
|
|
63
90
|
if (frameRef.current.height === frame.height && frameRef.current.width === frame.width) {
|
|
64
91
|
return;
|
|
65
92
|
}
|
|
66
|
-
|
|
67
|
-
|
|
93
|
+
frameRef.current = {
|
|
94
|
+
width: frame.width,
|
|
95
|
+
height: frame.height
|
|
96
|
+
};
|
|
97
|
+
listeners.current.forEach(listener => listener());
|
|
68
98
|
});
|
|
69
99
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
70
100
|
children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","StyleSheet","SafeAreaListener","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","
|
|
1
|
+
{"version":3,"names":["React","Platform","StyleSheet","SafeAreaListener","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","value","subscribeThrottled","subscribe","getCurrent","FrameSizeProvider","initialFrame","children","FrameSizeProviderInner","frameRef","useRef","width","height","listeners","Set","current","listener","add","delete","delay","timer","updated","waiting","throttledListener","clearTimeout","setTimeout","unsubscribe","useMemo","onChange","frame","forEach","OS","FrameSizeListenerWeb","FrameSizeListenerNativeFallback","style","absoluteFill","Provider","useLayoutEffect","elementRef","useEffect","rect","getBoundingClientRect","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","ref","absoluteFillObject","pointerEvents","visibility"],"sourceRoot":"../../src","sources":["useFrameSize.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,7 +4,7 @@ type Frame = {
|
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
6
6
|
};
|
|
7
|
-
export declare function useFrameSize<T>(selector: (frame: Frame) => T,
|
|
7
|
+
export declare function useFrameSize<T>(selector: (frame: Frame) => T, throttle?: boolean): T;
|
|
8
8
|
type FrameSizeProviderProps = {
|
|
9
9
|
initialFrame: Frame;
|
|
10
10
|
children: React.ReactNode;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/elements",
|
|
3
3
|
"description": "UI Components for React Navigation",
|
|
4
|
-
"version": "2.5.
|
|
4
|
+
"version": "2.5.1",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
]
|
|
91
91
|
]
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "0508fba46d6ea4823de28f35e981d5cc8f15e93a"
|
|
94
94
|
}
|
package/src/useFrameSize.tsx
CHANGED
|
@@ -18,14 +18,14 @@ type Frame = {
|
|
|
18
18
|
height: number;
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
type Listener = (
|
|
21
|
+
type Listener = () => void;
|
|
22
22
|
|
|
23
23
|
type RemoveListener = () => void;
|
|
24
24
|
|
|
25
25
|
type FrameContextType = {
|
|
26
26
|
getCurrent: () => Frame;
|
|
27
27
|
subscribe: (listener: Listener) => RemoveListener;
|
|
28
|
-
|
|
28
|
+
subscribeThrottled: (listener: Listener) => RemoveListener;
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
const FrameContext = React.createContext<FrameContextType | undefined>(
|
|
@@ -34,7 +34,7 @@ const FrameContext = React.createContext<FrameContextType | undefined>(
|
|
|
34
34
|
|
|
35
35
|
export function useFrameSize<T>(
|
|
36
36
|
selector: (frame: Frame) => T,
|
|
37
|
-
|
|
37
|
+
throttle?: boolean
|
|
38
38
|
): T {
|
|
39
39
|
const context = React.useContext(FrameContext);
|
|
40
40
|
|
|
@@ -43,7 +43,7 @@ export function useFrameSize<T>(
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
const value = useSyncExternalStoreWithSelector(
|
|
46
|
-
|
|
46
|
+
throttle ? context.subscribeThrottled : context.subscribe,
|
|
47
47
|
context.getCurrent,
|
|
48
48
|
context.getCurrent,
|
|
49
49
|
selector
|
|
@@ -80,7 +80,11 @@ function FrameSizeProviderInner({
|
|
|
80
80
|
initialFrame,
|
|
81
81
|
children,
|
|
82
82
|
}: FrameSizeProviderProps) {
|
|
83
|
-
const frameRef = React.useRef<Frame>(
|
|
83
|
+
const frameRef = React.useRef<Frame>({
|
|
84
|
+
width: initialFrame.width,
|
|
85
|
+
height: initialFrame.height,
|
|
86
|
+
});
|
|
87
|
+
|
|
84
88
|
const listeners = React.useRef<Set<Listener>>(new Set());
|
|
85
89
|
|
|
86
90
|
const getCurrent = useLatestCallback(() => frameRef.current);
|
|
@@ -93,18 +97,45 @@ function FrameSizeProviderInner({
|
|
|
93
97
|
};
|
|
94
98
|
});
|
|
95
99
|
|
|
96
|
-
const
|
|
100
|
+
const subscribeThrottled = useLatestCallback(
|
|
97
101
|
(listener: Listener): RemoveListener => {
|
|
102
|
+
const delay = 100; // Throttle delay in milliseconds
|
|
103
|
+
|
|
98
104
|
let timer: ReturnType<typeof setTimeout>;
|
|
105
|
+
let updated = false;
|
|
106
|
+
let waiting = false;
|
|
99
107
|
|
|
100
|
-
const
|
|
108
|
+
const throttledListener = () => {
|
|
101
109
|
clearTimeout(timer);
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
110
|
+
|
|
111
|
+
updated = true;
|
|
112
|
+
|
|
113
|
+
if (waiting) {
|
|
114
|
+
// Schedule a timer to call the listener at the end
|
|
115
|
+
timer = setTimeout(() => {
|
|
116
|
+
if (updated) {
|
|
117
|
+
updated = false;
|
|
118
|
+
listener();
|
|
119
|
+
}
|
|
120
|
+
}, delay);
|
|
121
|
+
} else {
|
|
122
|
+
waiting = true;
|
|
123
|
+
setTimeout(function () {
|
|
124
|
+
waiting = false;
|
|
125
|
+
}, delay);
|
|
126
|
+
|
|
127
|
+
// Call the listener immediately at start
|
|
128
|
+
updated = false;
|
|
129
|
+
listener();
|
|
130
|
+
}
|
|
105
131
|
};
|
|
106
132
|
|
|
107
|
-
|
|
133
|
+
const unsubscribe = subscribe(throttledListener);
|
|
134
|
+
|
|
135
|
+
return () => {
|
|
136
|
+
unsubscribe();
|
|
137
|
+
clearTimeout(timer);
|
|
138
|
+
};
|
|
108
139
|
}
|
|
109
140
|
);
|
|
110
141
|
|
|
@@ -112,9 +143,9 @@ function FrameSizeProviderInner({
|
|
|
112
143
|
() => ({
|
|
113
144
|
getCurrent,
|
|
114
145
|
subscribe,
|
|
115
|
-
|
|
146
|
+
subscribeThrottled,
|
|
116
147
|
}),
|
|
117
|
-
[subscribe,
|
|
148
|
+
[subscribe, subscribeThrottled, getCurrent]
|
|
118
149
|
);
|
|
119
150
|
|
|
120
151
|
const onChange = useLatestCallback((frame: Frame) => {
|
|
@@ -125,8 +156,8 @@ function FrameSizeProviderInner({
|
|
|
125
156
|
return;
|
|
126
157
|
}
|
|
127
158
|
|
|
128
|
-
|
|
129
|
-
|
|
159
|
+
frameRef.current = { width: frame.width, height: frame.height };
|
|
160
|
+
listeners.current.forEach((listener) => listener());
|
|
130
161
|
});
|
|
131
162
|
|
|
132
163
|
return (
|