@react-navigation/elements 2.5.0 → 2.5.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.
|
@@ -2,19 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Platform, StyleSheet } from 'react-native';
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
6
|
// eslint-disable-next-line no-restricted-imports
|
|
7
7
|
useSafeAreaFrame } from 'react-native-safe-area-context';
|
|
8
8
|
import useLatestCallback from 'use-latest-callback';
|
|
9
9
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
10
|
+
|
|
11
|
+
// Load with require to avoid error from webpack due to missing export in older versions
|
|
12
|
+
// eslint-disable-next-line import-x/no-commonjs
|
|
10
13
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
const SafeAreaListener = require('react-native-safe-area-context').SafeAreaListener;
|
|
11
15
|
const FrameContext = /*#__PURE__*/React.createContext(undefined);
|
|
12
|
-
export function useFrameSize(selector,
|
|
16
|
+
export function useFrameSize(selector, throttle) {
|
|
13
17
|
const context = React.useContext(FrameContext);
|
|
14
18
|
if (context == null) {
|
|
15
19
|
throw new Error('useFrameSize must be used within a FrameSizeProvider');
|
|
16
20
|
}
|
|
17
|
-
const value = useSyncExternalStoreWithSelector(
|
|
21
|
+
const value = useSyncExternalStoreWithSelector(throttle ? context.subscribeThrottled : context.subscribe, context.getCurrent, context.getCurrent, selector);
|
|
18
22
|
return value;
|
|
19
23
|
}
|
|
20
24
|
export function FrameSizeProvider({
|
|
@@ -35,7 +39,10 @@ function FrameSizeProviderInner({
|
|
|
35
39
|
initialFrame,
|
|
36
40
|
children
|
|
37
41
|
}) {
|
|
38
|
-
const frameRef = React.useRef(
|
|
42
|
+
const frameRef = React.useRef({
|
|
43
|
+
width: initialFrame.width,
|
|
44
|
+
height: initialFrame.height
|
|
45
|
+
});
|
|
39
46
|
const listeners = React.useRef(new Set());
|
|
40
47
|
const getCurrent = useLatestCallback(() => frameRef.current);
|
|
41
48
|
const subscribe = useLatestCallback(listener => {
|
|
@@ -44,27 +51,54 @@ function FrameSizeProviderInner({
|
|
|
44
51
|
listeners.current.delete(listener);
|
|
45
52
|
};
|
|
46
53
|
});
|
|
47
|
-
const
|
|
54
|
+
const subscribeThrottled = useLatestCallback(listener => {
|
|
55
|
+
const delay = 100; // Throttle delay in milliseconds
|
|
56
|
+
|
|
48
57
|
let timer;
|
|
49
|
-
|
|
58
|
+
let updated = false;
|
|
59
|
+
let waiting = false;
|
|
60
|
+
const throttledListener = () => {
|
|
61
|
+
clearTimeout(timer);
|
|
62
|
+
updated = true;
|
|
63
|
+
if (waiting) {
|
|
64
|
+
// Schedule a timer to call the listener at the end
|
|
65
|
+
timer = setTimeout(() => {
|
|
66
|
+
if (updated) {
|
|
67
|
+
updated = false;
|
|
68
|
+
listener();
|
|
69
|
+
}
|
|
70
|
+
}, delay);
|
|
71
|
+
} else {
|
|
72
|
+
waiting = true;
|
|
73
|
+
setTimeout(function () {
|
|
74
|
+
waiting = false;
|
|
75
|
+
}, delay);
|
|
76
|
+
|
|
77
|
+
// Call the listener immediately at start
|
|
78
|
+
updated = false;
|
|
79
|
+
listener();
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const unsubscribe = subscribe(throttledListener);
|
|
83
|
+
return () => {
|
|
84
|
+
unsubscribe();
|
|
50
85
|
clearTimeout(timer);
|
|
51
|
-
timer = setTimeout(() => {
|
|
52
|
-
listener(frame);
|
|
53
|
-
}, 100);
|
|
54
86
|
};
|
|
55
|
-
return subscribe(debouncedListener);
|
|
56
87
|
});
|
|
57
88
|
const context = React.useMemo(() => ({
|
|
58
89
|
getCurrent,
|
|
59
90
|
subscribe,
|
|
60
|
-
|
|
61
|
-
}), [subscribe,
|
|
91
|
+
subscribeThrottled
|
|
92
|
+
}), [subscribe, subscribeThrottled, getCurrent]);
|
|
62
93
|
const onChange = useLatestCallback(frame => {
|
|
63
94
|
if (frameRef.current.height === frame.height && frameRef.current.width === frame.width) {
|
|
64
95
|
return;
|
|
65
96
|
}
|
|
66
|
-
|
|
67
|
-
|
|
97
|
+
frameRef.current = {
|
|
98
|
+
width: frame.width,
|
|
99
|
+
height: frame.height
|
|
100
|
+
};
|
|
101
|
+
listeners.current.forEach(listener => listener());
|
|
68
102
|
});
|
|
69
103
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
70
104
|
children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","StyleSheet","
|
|
1
|
+
{"version":3,"names":["React","Platform","StyleSheet","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SafeAreaListener","require","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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAetB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgBF,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,EAC7B,QAAQ,CAAC,EAAE,OAAO,GACjB,CAAC,CAeH;AAED,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,QAAQ,GACT,EAAE,sBAAsB,yTAaxB"}
|
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.2",
|
|
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": "f2ca954afa5a478de49489199444d7a5269df261"
|
|
94
94
|
}
|
package/src/useFrameSize.tsx
CHANGED
|
@@ -6,26 +6,32 @@ import {
|
|
|
6
6
|
type ViewStyle,
|
|
7
7
|
} from 'react-native';
|
|
8
8
|
import {
|
|
9
|
-
SafeAreaListener,
|
|
10
9
|
// eslint-disable-next-line no-restricted-imports
|
|
11
10
|
useSafeAreaFrame,
|
|
12
11
|
} from 'react-native-safe-area-context';
|
|
13
12
|
import useLatestCallback from 'use-latest-callback';
|
|
14
13
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
15
14
|
|
|
15
|
+
// Load with require to avoid error from webpack due to missing export in older versions
|
|
16
|
+
// eslint-disable-next-line import-x/no-commonjs
|
|
17
|
+
const SafeAreaListener = require('react-native-safe-area-context')
|
|
18
|
+
.SafeAreaListener as
|
|
19
|
+
| typeof import('react-native-safe-area-context').SafeAreaListener
|
|
20
|
+
| undefined;
|
|
21
|
+
|
|
16
22
|
type Frame = {
|
|
17
23
|
width: number;
|
|
18
24
|
height: number;
|
|
19
25
|
};
|
|
20
26
|
|
|
21
|
-
type Listener = (
|
|
27
|
+
type Listener = () => void;
|
|
22
28
|
|
|
23
29
|
type RemoveListener = () => void;
|
|
24
30
|
|
|
25
31
|
type FrameContextType = {
|
|
26
32
|
getCurrent: () => Frame;
|
|
27
33
|
subscribe: (listener: Listener) => RemoveListener;
|
|
28
|
-
|
|
34
|
+
subscribeThrottled: (listener: Listener) => RemoveListener;
|
|
29
35
|
};
|
|
30
36
|
|
|
31
37
|
const FrameContext = React.createContext<FrameContextType | undefined>(
|
|
@@ -34,7 +40,7 @@ const FrameContext = React.createContext<FrameContextType | undefined>(
|
|
|
34
40
|
|
|
35
41
|
export function useFrameSize<T>(
|
|
36
42
|
selector: (frame: Frame) => T,
|
|
37
|
-
|
|
43
|
+
throttle?: boolean
|
|
38
44
|
): T {
|
|
39
45
|
const context = React.useContext(FrameContext);
|
|
40
46
|
|
|
@@ -43,7 +49,7 @@ export function useFrameSize<T>(
|
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
const value = useSyncExternalStoreWithSelector(
|
|
46
|
-
|
|
52
|
+
throttle ? context.subscribeThrottled : context.subscribe,
|
|
47
53
|
context.getCurrent,
|
|
48
54
|
context.getCurrent,
|
|
49
55
|
selector
|
|
@@ -80,7 +86,11 @@ function FrameSizeProviderInner({
|
|
|
80
86
|
initialFrame,
|
|
81
87
|
children,
|
|
82
88
|
}: FrameSizeProviderProps) {
|
|
83
|
-
const frameRef = React.useRef<Frame>(
|
|
89
|
+
const frameRef = React.useRef<Frame>({
|
|
90
|
+
width: initialFrame.width,
|
|
91
|
+
height: initialFrame.height,
|
|
92
|
+
});
|
|
93
|
+
|
|
84
94
|
const listeners = React.useRef<Set<Listener>>(new Set());
|
|
85
95
|
|
|
86
96
|
const getCurrent = useLatestCallback(() => frameRef.current);
|
|
@@ -93,18 +103,45 @@ function FrameSizeProviderInner({
|
|
|
93
103
|
};
|
|
94
104
|
});
|
|
95
105
|
|
|
96
|
-
const
|
|
106
|
+
const subscribeThrottled = useLatestCallback(
|
|
97
107
|
(listener: Listener): RemoveListener => {
|
|
108
|
+
const delay = 100; // Throttle delay in milliseconds
|
|
109
|
+
|
|
98
110
|
let timer: ReturnType<typeof setTimeout>;
|
|
111
|
+
let updated = false;
|
|
112
|
+
let waiting = false;
|
|
99
113
|
|
|
100
|
-
const
|
|
114
|
+
const throttledListener = () => {
|
|
101
115
|
clearTimeout(timer);
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
116
|
+
|
|
117
|
+
updated = true;
|
|
118
|
+
|
|
119
|
+
if (waiting) {
|
|
120
|
+
// Schedule a timer to call the listener at the end
|
|
121
|
+
timer = setTimeout(() => {
|
|
122
|
+
if (updated) {
|
|
123
|
+
updated = false;
|
|
124
|
+
listener();
|
|
125
|
+
}
|
|
126
|
+
}, delay);
|
|
127
|
+
} else {
|
|
128
|
+
waiting = true;
|
|
129
|
+
setTimeout(function () {
|
|
130
|
+
waiting = false;
|
|
131
|
+
}, delay);
|
|
132
|
+
|
|
133
|
+
// Call the listener immediately at start
|
|
134
|
+
updated = false;
|
|
135
|
+
listener();
|
|
136
|
+
}
|
|
105
137
|
};
|
|
106
138
|
|
|
107
|
-
|
|
139
|
+
const unsubscribe = subscribe(throttledListener);
|
|
140
|
+
|
|
141
|
+
return () => {
|
|
142
|
+
unsubscribe();
|
|
143
|
+
clearTimeout(timer);
|
|
144
|
+
};
|
|
108
145
|
}
|
|
109
146
|
);
|
|
110
147
|
|
|
@@ -112,9 +149,9 @@ function FrameSizeProviderInner({
|
|
|
112
149
|
() => ({
|
|
113
150
|
getCurrent,
|
|
114
151
|
subscribe,
|
|
115
|
-
|
|
152
|
+
subscribeThrottled,
|
|
116
153
|
}),
|
|
117
|
-
[subscribe,
|
|
154
|
+
[subscribe, subscribeThrottled, getCurrent]
|
|
118
155
|
);
|
|
119
156
|
|
|
120
157
|
const onChange = useLatestCallback((frame: Frame) => {
|
|
@@ -125,8 +162,8 @@ function FrameSizeProviderInner({
|
|
|
125
162
|
return;
|
|
126
163
|
}
|
|
127
164
|
|
|
128
|
-
|
|
129
|
-
|
|
165
|
+
frameRef.current = { width: frame.width, height: frame.height };
|
|
166
|
+
listeners.current.forEach((listener) => listener());
|
|
130
167
|
});
|
|
131
168
|
|
|
132
169
|
return (
|