@onekeyfe/react-native-pager-view 6.7.0-2 → 6.7.0-21
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/README.md +14 -0
- package/android/src/androidTest/AndroidManifest.xml +7 -0
- package/android/src/androidTest/java/com/reactnativepagerview/CollapsiblePagerTabReservationTest.kt +306 -0
- package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerHost.kt +130 -30
- package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerNativeHeaders.kt +72 -7
- package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerViewManager.kt +27 -0
- package/android/src/main/java/com/reactnativepagerview/NativeScrollerScrollAwayInsets.kt +19 -0
- package/android/src/main/java/com/reactnativepagerview/NativeScrollerView.kt +50 -6
- package/android/src/main/java/com/reactnativepagerview/NestedScrollableHost.kt +8 -2
- package/android/src/test/java/com/reactnativepagerview/NativeScrollerScrollAwayInsetsTest.kt +40 -0
- package/docs/SPEC.md +257 -10
- package/ios/RNCCollapsiblePagerViewComponentView.mm +614 -42
- package/ios/RNCNativeScrollerComponentView.h +2 -0
- package/ios/RNCNativeScrollerComponentView.mm +42 -0
- package/ios/tests/RNCCollapsiblePagerFirstFrameTests.mm +403 -1
- package/ios/tests/RNCCollapsiblePagerHitTestTests.mm +338 -0
- package/ios/tests/RNCCollapsiblePagerPressCancellationTests.mm +74 -9
- package/ios/tests/RNCCollapsiblePagerRefreshControlTests.mm +50 -0
- package/lib/module/CollapsiblePagerView.js +32 -7
- package/lib/module/CollapsiblePagerView.web.js +439 -39
- package/lib/module/CollapsiblePagerViewNativeComponent.ts +13 -0
- package/lib/module/NativeScroller.web.js +16 -3
- package/lib/module/WebCollapsiblePagerPage.js +182 -0
- package/lib/module/index.js +2 -0
- package/lib/module/index.native.js +9 -0
- package/lib/module/index.web.js +2 -0
- package/lib/typescript/src/CollapsiblePagerView.d.ts +10 -3
- package/lib/typescript/src/CollapsiblePagerView.web.d.ts +66 -3
- package/lib/typescript/src/CollapsiblePagerViewNativeComponent.d.ts +5 -0
- package/lib/typescript/src/WebCollapsiblePagerPage.d.ts +42 -0
- package/lib/typescript/src/index.d.ts +4 -0
- package/lib/typescript/src/index.native.d.ts +13 -0
- package/lib/typescript/src/index.web.d.ts +4 -0
- package/package.json +6 -4
- package/react-native-pager-view.podspec +1 -0
- package/src/CollapsiblePagerView.tsx +99 -8
- package/src/CollapsiblePagerView.web.tsx +657 -51
- package/src/CollapsiblePagerViewNativeComponent.ts +13 -0
- package/src/NativeScroller.web.tsx +24 -2
- package/src/WebCollapsiblePagerPage.tsx +258 -0
- package/src/index.native.tsx +30 -0
- package/src/index.tsx +4 -0
- package/src/index.web.tsx +4 -0
|
@@ -67,7 +67,10 @@ export interface NativeProps extends ViewProps {
|
|
|
67
67
|
retainedPages?: string;
|
|
68
68
|
nativeTabBarItems?: string;
|
|
69
69
|
nativeTabBarHeight?: Double;
|
|
70
|
+
nativeTabBarVariant?: string;
|
|
71
|
+
nativeTabBarTrailingReservedWidth?: WithDefault<Double, 0>;
|
|
70
72
|
nativeTabBarContentPaddingHorizontal?: Double;
|
|
73
|
+
nativeTabBarContentPaddingVertical?: Double;
|
|
71
74
|
nativeTabBarItemSpacing?: Double;
|
|
72
75
|
nativeTabBarFontSize?: Double;
|
|
73
76
|
nativeTabBarFontFamily?: string;
|
|
@@ -91,6 +94,14 @@ export interface NativeProps extends ViewProps {
|
|
|
91
94
|
type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
|
|
92
95
|
|
|
93
96
|
export interface NativeCommands {
|
|
97
|
+
scrollHeaderToOffset: (
|
|
98
|
+
viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
|
|
99
|
+
offset: Double
|
|
100
|
+
) => void;
|
|
101
|
+
scrollHeaderBy: (
|
|
102
|
+
viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
|
|
103
|
+
delta: Double
|
|
104
|
+
) => void;
|
|
94
105
|
scrollToTop: (
|
|
95
106
|
viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
|
|
96
107
|
target: Int32,
|
|
@@ -112,6 +123,8 @@ export interface NativeCommands {
|
|
|
112
123
|
|
|
113
124
|
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
|
|
114
125
|
supportedCommands: [
|
|
126
|
+
"scrollHeaderToOffset",
|
|
127
|
+
"scrollHeaderBy",
|
|
115
128
|
"scrollToTop",
|
|
116
129
|
"setPage",
|
|
117
130
|
"setPageWithoutAnimation",
|
|
@@ -6,20 +6,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
export const NativeScroller = /*#__PURE__*/React.forwardRef(function NativeScroller(inputProps, ref) {
|
|
7
7
|
const {
|
|
8
8
|
dataSet,
|
|
9
|
-
pagerScrollKey
|
|
9
|
+
pagerScrollKey,
|
|
10
10
|
topOverlay: _topOverlay,
|
|
11
11
|
topScrollEdgeEffect: _topScrollEdgeEffect,
|
|
12
12
|
...props
|
|
13
13
|
} = inputProps;
|
|
14
|
+
const scrollRef = React.useRef(null);
|
|
15
|
+
const setRef = React.useCallback(node => {
|
|
16
|
+
scrollRef.current = node;
|
|
17
|
+
if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
|
|
18
|
+
}, [ref]);
|
|
19
|
+
React.useLayoutEffect(() => {
|
|
20
|
+
const element = scrollRef.current?.getScrollableNode();
|
|
21
|
+
const EventConstructor = element?.ownerDocument?.defaultView?.Event;
|
|
22
|
+
if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-scroll-key-changed", {
|
|
23
|
+
bubbles: true
|
|
24
|
+
}));
|
|
25
|
+
}, [pagerScrollKey]);
|
|
14
26
|
const webDataProps = {
|
|
15
27
|
dataSet: {
|
|
16
28
|
...dataSet,
|
|
17
|
-
collapsiblePagerScroll: "true"
|
|
29
|
+
collapsiblePagerScroll: "true",
|
|
30
|
+
collapsiblePagerScrollKey: pagerScrollKey ?? ""
|
|
18
31
|
}
|
|
19
32
|
};
|
|
20
33
|
return /*#__PURE__*/_jsx(ScrollView, {
|
|
21
34
|
...props,
|
|
22
|
-
ref:
|
|
35
|
+
ref: setRef,
|
|
23
36
|
...webDataProps
|
|
24
37
|
});
|
|
25
38
|
});
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
const PageContext = /*#__PURE__*/React.createContext(null);
|
|
6
|
+
export function useWebCollapsiblePagerPage() {
|
|
7
|
+
return React.useContext(PageContext);
|
|
8
|
+
}
|
|
9
|
+
export function WebCollapsiblePagerPage({
|
|
10
|
+
children,
|
|
11
|
+
pageKey,
|
|
12
|
+
isFocused,
|
|
13
|
+
isRouteActive,
|
|
14
|
+
headerHeight,
|
|
15
|
+
stickyHeaderHeight,
|
|
16
|
+
onBridge,
|
|
17
|
+
onGeometryChange,
|
|
18
|
+
onScroll,
|
|
19
|
+
onUserInput
|
|
20
|
+
}) {
|
|
21
|
+
const [owner, setOwner] = React.useState(null);
|
|
22
|
+
const ownerRef = React.useRef(null);
|
|
23
|
+
const [registered, setRegistered] = React.useState(null);
|
|
24
|
+
const registeredRef = React.useRef(registered);
|
|
25
|
+
const observerRef = React.useRef(null);
|
|
26
|
+
const observedContentRef = React.useRef(null);
|
|
27
|
+
const frameRef = React.useRef(null);
|
|
28
|
+
const disposedRef = React.useRef(false);
|
|
29
|
+
const [pendingRouteScrollTop, setPendingRouteScrollTop] = React.useState(null);
|
|
30
|
+
const [metrics, setMetrics] = React.useState({
|
|
31
|
+
width: 0,
|
|
32
|
+
height: 0,
|
|
33
|
+
scrollTop: 0
|
|
34
|
+
});
|
|
35
|
+
const inputsRef = React.useRef({
|
|
36
|
+
pageKey,
|
|
37
|
+
headerHeight,
|
|
38
|
+
stickyHeaderHeight,
|
|
39
|
+
onGeometryChange,
|
|
40
|
+
onScroll,
|
|
41
|
+
onUserInput
|
|
42
|
+
});
|
|
43
|
+
inputsRef.current = {
|
|
44
|
+
pageKey,
|
|
45
|
+
headerHeight,
|
|
46
|
+
stickyHeaderHeight,
|
|
47
|
+
onGeometryChange,
|
|
48
|
+
onScroll,
|
|
49
|
+
onUserInput
|
|
50
|
+
};
|
|
51
|
+
const measure = React.useCallback(() => {
|
|
52
|
+
frameRef.current = null;
|
|
53
|
+
if (disposedRef.current) return;
|
|
54
|
+
const current = ownerRef.current;
|
|
55
|
+
if (!current?.isConnected) return;
|
|
56
|
+
const ownerRect = current.getBoundingClientRect();
|
|
57
|
+
const candidate = registeredRef.current?.element;
|
|
58
|
+
const content = candidate?.isConnected && current.contains(candidate) ? candidate : null;
|
|
59
|
+
const contentRect = (content ?? current.firstElementChild)?.getBoundingClientRect();
|
|
60
|
+
const inputs = inputsRef.current;
|
|
61
|
+
const pinnedBottom = ownerRect.top + Math.max(0, inputs.headerHeight - current.scrollTop) + inputs.stickyHeaderHeight;
|
|
62
|
+
const visibleTop = Math.max(ownerRect.top, pinnedBottom, contentRect?.top ?? 0);
|
|
63
|
+
const next = {
|
|
64
|
+
width: current.clientWidth,
|
|
65
|
+
height: Math.max(0, ownerRect.bottom - visibleTop),
|
|
66
|
+
scrollTop: Math.max(0, pinnedBottom - (contentRect?.top ?? pinnedBottom))
|
|
67
|
+
};
|
|
68
|
+
setMetrics(previous => previous.width === next.width && previous.height === next.height && previous.scrollTop === next.scrollTop ? previous : next);
|
|
69
|
+
inputs.onGeometryChange(inputs.pageKey);
|
|
70
|
+
}, []);
|
|
71
|
+
const requestMeasure = React.useCallback(() => {
|
|
72
|
+
if (!disposedRef.current && frameRef.current === null) frameRef.current = requestAnimationFrame(measure);
|
|
73
|
+
}, [measure]);
|
|
74
|
+
const syncContentObservation = React.useCallback(() => {
|
|
75
|
+
const observer = observerRef.current;
|
|
76
|
+
const current = ownerRef.current;
|
|
77
|
+
if (!observer || !current) return;
|
|
78
|
+
const candidate = registeredRef.current?.element;
|
|
79
|
+
const content = candidate?.isConnected && current.contains(candidate) ? candidate : current.firstElementChild;
|
|
80
|
+
const next = typeof HTMLElement !== "undefined" && content instanceof HTMLElement ? content : null;
|
|
81
|
+
if (observedContentRef.current === next) return;
|
|
82
|
+
if (observedContentRef.current) observer.unobserve(observedContentRef.current);
|
|
83
|
+
observedContentRef.current = next;
|
|
84
|
+
if (next) observer.observe(next);
|
|
85
|
+
}, []);
|
|
86
|
+
const registerContent = React.useCallback((element, height) => {
|
|
87
|
+
const entry = {
|
|
88
|
+
element,
|
|
89
|
+
height: height !== undefined && Number.isFinite(height) && height >= 0 ? height : undefined
|
|
90
|
+
};
|
|
91
|
+
registeredRef.current = entry;
|
|
92
|
+
setRegistered(entry);
|
|
93
|
+
syncContentObservation();
|
|
94
|
+
requestMeasure();
|
|
95
|
+
return () => {
|
|
96
|
+
if (registeredRef.current !== entry) return;
|
|
97
|
+
registeredRef.current = null;
|
|
98
|
+
setRegistered(null);
|
|
99
|
+
syncContentObservation();
|
|
100
|
+
requestMeasure();
|
|
101
|
+
};
|
|
102
|
+
}, [requestMeasure, syncContentObservation]);
|
|
103
|
+
const bridge = React.useMemo(() => ({
|
|
104
|
+
setOwner: next => {
|
|
105
|
+
if (ownerRef.current === next) return;
|
|
106
|
+
ownerRef.current = next;
|
|
107
|
+
setOwner(next);
|
|
108
|
+
requestMeasure();
|
|
109
|
+
},
|
|
110
|
+
requestMeasure,
|
|
111
|
+
setPendingRouteScrollTop
|
|
112
|
+
}), [requestMeasure]);
|
|
113
|
+
React.useLayoutEffect(() => {
|
|
114
|
+
disposedRef.current = false;
|
|
115
|
+
return () => {
|
|
116
|
+
disposedRef.current = true;
|
|
117
|
+
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
|
118
|
+
frameRef.current = null;
|
|
119
|
+
};
|
|
120
|
+
}, []);
|
|
121
|
+
React.useLayoutEffect(() => {
|
|
122
|
+
onBridge(pageKey, bridge);
|
|
123
|
+
return () => onBridge(pageKey, null);
|
|
124
|
+
}, [bridge, onBridge, pageKey]);
|
|
125
|
+
React.useLayoutEffect(() => {
|
|
126
|
+
if (!owner) return undefined;
|
|
127
|
+
const observer = new ResizeObserver(requestMeasure);
|
|
128
|
+
observerRef.current = observer;
|
|
129
|
+
observer.observe(owner);
|
|
130
|
+
syncContentObservation();
|
|
131
|
+
const handleScroll = () => {
|
|
132
|
+
if (ownerRef.current !== owner) return;
|
|
133
|
+
const inputs = inputsRef.current;
|
|
134
|
+
inputs.onScroll(inputs.pageKey, owner.scrollTop);
|
|
135
|
+
requestMeasure();
|
|
136
|
+
};
|
|
137
|
+
const handleKey = event => {
|
|
138
|
+
if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) inputsRef.current.onUserInput(inputsRef.current.pageKey);
|
|
139
|
+
};
|
|
140
|
+
const handleUserInput = () => inputsRef.current.onUserInput(inputsRef.current.pageKey);
|
|
141
|
+
owner.addEventListener("scroll", handleScroll, {
|
|
142
|
+
passive: true
|
|
143
|
+
});
|
|
144
|
+
owner.addEventListener("touchstart", handleUserInput, {
|
|
145
|
+
passive: true
|
|
146
|
+
});
|
|
147
|
+
owner.addEventListener("pointerdown", handleUserInput);
|
|
148
|
+
owner.addEventListener("keydown", handleKey);
|
|
149
|
+
owner.addEventListener("ok-collapsible-pager-user-scroll", handleUserInput);
|
|
150
|
+
owner.addEventListener("ok-collapsible-pager-insets-changed", requestMeasure);
|
|
151
|
+
requestMeasure();
|
|
152
|
+
return () => {
|
|
153
|
+
observer.disconnect();
|
|
154
|
+
observerRef.current = null;
|
|
155
|
+
observedContentRef.current = null;
|
|
156
|
+
owner.removeEventListener("scroll", handleScroll);
|
|
157
|
+
owner.removeEventListener("touchstart", handleUserInput);
|
|
158
|
+
owner.removeEventListener("pointerdown", handleUserInput);
|
|
159
|
+
owner.removeEventListener("keydown", handleKey);
|
|
160
|
+
owner.removeEventListener("ok-collapsible-pager-user-scroll", handleUserInput);
|
|
161
|
+
owner.removeEventListener("ok-collapsible-pager-insets-changed", requestMeasure);
|
|
162
|
+
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
|
163
|
+
frameRef.current = null;
|
|
164
|
+
};
|
|
165
|
+
}, [owner, requestMeasure, syncContentObservation]);
|
|
166
|
+
React.useLayoutEffect(requestMeasure, [isFocused, isRouteActive, headerHeight, stickyHeaderHeight, requestMeasure]);
|
|
167
|
+
const value = React.useMemo(() => ({
|
|
168
|
+
isFocused,
|
|
169
|
+
isRouteActive,
|
|
170
|
+
owner,
|
|
171
|
+
content: registered?.element.isConnected && owner?.contains(registered.element) ? registered.element : null,
|
|
172
|
+
contentHeight: registered?.height,
|
|
173
|
+
...metrics,
|
|
174
|
+
pendingRouteScrollTop,
|
|
175
|
+
registerContent
|
|
176
|
+
}), [isFocused, isRouteActive, owner, registered, metrics, pendingRouteScrollTop, registerContent]);
|
|
177
|
+
return /*#__PURE__*/_jsx(PageContext.Provider, {
|
|
178
|
+
value: value,
|
|
179
|
+
children: children
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
//# sourceMappingURL=WebCollapsiblePagerPage.js.map
|
package/lib/module/index.js
CHANGED
|
@@ -5,5 +5,7 @@ export default PagerView;
|
|
|
5
5
|
export * from "./usePagerView.js";
|
|
6
6
|
export * from './CollapsiblePagerView';
|
|
7
7
|
export * from './NativeScroller';
|
|
8
|
+
export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web.js";
|
|
9
|
+
export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
|
|
8
10
|
export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";
|
|
9
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { PagerView } from "./PagerView";
|
|
4
|
+
export default PagerView;
|
|
5
|
+
export * from "./usePagerView.js";
|
|
6
|
+
export * from "./CollapsiblePagerView";
|
|
7
|
+
export * from "./NativeScroller";
|
|
8
|
+
export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";
|
|
9
|
+
//# sourceMappingURL=index.native.js.map
|
package/lib/module/index.web.js
CHANGED
|
@@ -4,5 +4,7 @@ export { PagerView as default, PagerView } from "./PagerView.web.js";
|
|
|
4
4
|
export * from "./usePagerView.js";
|
|
5
5
|
export * from "./CollapsiblePagerView.web.js";
|
|
6
6
|
export * from "./NativeScroller.web.js";
|
|
7
|
+
export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web.js";
|
|
8
|
+
export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage.js";
|
|
7
9
|
export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";
|
|
8
10
|
//# sourceMappingURL=index.web.js.map
|
|
@@ -16,8 +16,11 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
|
|
|
16
16
|
testID?: string;
|
|
17
17
|
}>;
|
|
18
18
|
export type CollapsiblePagerNativeTabBarStyle = Readonly<{
|
|
19
|
+
variant?: "underline" | "segmented";
|
|
19
20
|
height?: number;
|
|
21
|
+
trailingReservedWidth?: number;
|
|
20
22
|
contentPaddingHorizontal?: number;
|
|
23
|
+
contentPaddingVertical?: number;
|
|
21
24
|
itemSpacing?: number;
|
|
22
25
|
fontSize?: number;
|
|
23
26
|
fontFamily?: string;
|
|
@@ -56,7 +59,7 @@ export type CollapsiblePagerNativeSubHeaderConfig = Readonly<{
|
|
|
56
59
|
}>;
|
|
57
60
|
export type CollapsiblePagerViewOnNativeTabPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
|
|
58
61
|
export type CollapsiblePagerViewOnNativeSubHeaderPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
|
|
59
|
-
export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
|
|
62
|
+
export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarVariant" | "nativeTabBarTrailingReservedWidth" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarContentPaddingVertical" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
|
|
60
63
|
/** Collapsible content rendered above the sticky bar. */
|
|
61
64
|
header: React.ReactNode;
|
|
62
65
|
/** Bar which remains pinned after the header has collapsed. */
|
|
@@ -67,6 +70,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
|
|
|
67
70
|
stickyHeaderHeight: number;
|
|
68
71
|
/** Fixed content above the collapsible header on iOS 26 and newer. */
|
|
69
72
|
topOverlay?: React.ReactNode;
|
|
73
|
+
/** Known overlay height to reserve until its first layout measurement. */
|
|
74
|
+
topOverlayHeightHint?: number;
|
|
70
75
|
/** Existing fixed header shared with a parent pager on iOS 26 and newer. */
|
|
71
76
|
externalTopOverlayTag?: number;
|
|
72
77
|
/** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
|
|
@@ -102,7 +107,7 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
|
|
|
102
107
|
type State = {
|
|
103
108
|
selectedPage: number;
|
|
104
109
|
transientRetainedPages: readonly number[];
|
|
105
|
-
topOverlayHeight: number;
|
|
110
|
+
topOverlayHeight: number | null;
|
|
106
111
|
};
|
|
107
112
|
/**
|
|
108
113
|
* Pager variant whose vertical header coordination is performed by the native
|
|
@@ -120,12 +125,14 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
|
|
|
120
125
|
private nativePagerScrollState;
|
|
121
126
|
private nativeTabCommandQueuedDuringScroll;
|
|
122
127
|
componentDidMount(): void;
|
|
123
|
-
componentDidUpdate(): void;
|
|
128
|
+
componentDidUpdate(previousProps: CollapsiblePagerViewProps): void;
|
|
124
129
|
setPage: (selectedPage: number) => void;
|
|
125
130
|
setPageWithoutAnimation: (selectedPage: number) => void;
|
|
126
131
|
scrollToPageTop: (options?: Readonly<{
|
|
127
132
|
animated?: boolean;
|
|
128
133
|
}>) => void;
|
|
134
|
+
scrollHeaderBy: (delta: number) => void;
|
|
135
|
+
scrollHeaderToOffset: (offset: number) => void;
|
|
129
136
|
scrollToStickyTop: (options?: Readonly<{
|
|
130
137
|
animated?: boolean;
|
|
131
138
|
}>) => void;
|
|
@@ -38,8 +38,9 @@ export type CollapsiblePagerMountState = Readonly<{
|
|
|
38
38
|
export interface CollapsiblePagerViewProps extends Omit<WebCollapsiblePagerNativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "pageKeys" | "retainedPages" | "layoutDirection"> {
|
|
39
39
|
header: React.ReactNode;
|
|
40
40
|
stickyHeader: React.ReactNode;
|
|
41
|
-
headerHeight
|
|
42
|
-
stickyHeaderHeight
|
|
41
|
+
headerHeight?: number;
|
|
42
|
+
stickyHeaderHeight?: number;
|
|
43
|
+
isActive?: boolean;
|
|
43
44
|
topOverlay?: React.ReactNode;
|
|
44
45
|
topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
|
|
45
46
|
topOverlayColorScheme?: "light" | "dark";
|
|
@@ -53,16 +54,42 @@ type State = {
|
|
|
53
54
|
selectedPage: number;
|
|
54
55
|
animateTransition: boolean;
|
|
55
56
|
};
|
|
57
|
+
type WebRouteTarget = Readonly<{
|
|
58
|
+
key: string;
|
|
59
|
+
identity: string;
|
|
60
|
+
owner: HTMLElement;
|
|
61
|
+
generation: number;
|
|
62
|
+
top: number;
|
|
63
|
+
}>;
|
|
56
64
|
/** Web counterpart of the native collapsible pager contract. */
|
|
57
65
|
export declare class CollapsiblePagerView extends React.PureComponent<CollapsiblePagerViewProps, State> {
|
|
58
66
|
state: State;
|
|
59
67
|
private root;
|
|
60
68
|
private track;
|
|
69
|
+
private headerSlot;
|
|
70
|
+
private stickySlot;
|
|
71
|
+
private cssTimelineSupported;
|
|
72
|
+
private overlayTouch;
|
|
61
73
|
private touchStartX;
|
|
62
74
|
private touchStartY;
|
|
63
75
|
private horizontalTouch;
|
|
64
76
|
private pageOffsets;
|
|
65
77
|
private pageHosts;
|
|
78
|
+
private pageScrollIdentities;
|
|
79
|
+
private pageBridges;
|
|
80
|
+
private ownerRecords;
|
|
81
|
+
private ownerGeneration;
|
|
82
|
+
private lastRawTops;
|
|
83
|
+
private routeTarget;
|
|
84
|
+
private measuredHeaderHeight;
|
|
85
|
+
private measuredStickyHeight;
|
|
86
|
+
private headerMeasured;
|
|
87
|
+
private stickyMeasured;
|
|
88
|
+
private headerContent;
|
|
89
|
+
private stickyContent;
|
|
90
|
+
private chromeObserver;
|
|
91
|
+
private chromeMeasureFrame;
|
|
92
|
+
private disposed;
|
|
66
93
|
private sharedHeaderOffset;
|
|
67
94
|
private selectionRestoreToken;
|
|
68
95
|
private bodyAlignment;
|
|
@@ -74,14 +101,39 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
|
|
|
74
101
|
private pageScrollState;
|
|
75
102
|
private configuredScrollElement;
|
|
76
103
|
private readonly timelineName;
|
|
104
|
+
private get headerHeight();
|
|
105
|
+
private get hasExplicitHeaderHeight();
|
|
106
|
+
private get stickyHeaderHeight();
|
|
107
|
+
private get hasExplicitStickyHeaderHeight();
|
|
108
|
+
getSnapshotBeforeUpdate(previousProps: CollapsiblePagerViewProps): Readonly<{
|
|
109
|
+
key: string;
|
|
110
|
+
identity: string;
|
|
111
|
+
owner: HTMLElement;
|
|
112
|
+
generation: number;
|
|
113
|
+
top: number;
|
|
114
|
+
}> | null;
|
|
77
115
|
componentDidMount(): void;
|
|
78
|
-
componentDidUpdate(previousProps: CollapsiblePagerViewProps): void;
|
|
116
|
+
componentDidUpdate(previousProps: CollapsiblePagerViewProps, _previousState: State, routeSnapshot: WebRouteTarget | null): void;
|
|
79
117
|
componentWillUnmount(): void;
|
|
118
|
+
private setHeaderContent;
|
|
119
|
+
private setStickyContent;
|
|
120
|
+
private observeChrome;
|
|
121
|
+
private scheduleChromeMeasurement;
|
|
122
|
+
private onPageBridge;
|
|
123
|
+
private setRouteTarget;
|
|
124
|
+
private syncPageOwner;
|
|
125
|
+
private captureRouteTarget;
|
|
126
|
+
restoreScrollPosition: () => boolean;
|
|
127
|
+
private onPageScroll;
|
|
128
|
+
private onPageGeometryChange;
|
|
129
|
+
private onPageUserInput;
|
|
80
130
|
setPage: (selectedPage: number) => void;
|
|
81
131
|
setPageWithoutAnimation: (selectedPage: number) => void;
|
|
82
132
|
scrollToPageTop: (options?: Readonly<{
|
|
83
133
|
animated?: boolean;
|
|
84
134
|
}>) => void;
|
|
135
|
+
scrollHeaderBy: (delta: number) => void;
|
|
136
|
+
scrollHeaderToOffset: (offset: number) => void;
|
|
85
137
|
scrollToStickyTop: (options?: Readonly<{
|
|
86
138
|
animated?: boolean;
|
|
87
139
|
}>) => void;
|
|
@@ -101,9 +153,20 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
|
|
|
101
153
|
private onTrackTransitionEnd;
|
|
102
154
|
private setTrack;
|
|
103
155
|
private pageScrollElement;
|
|
156
|
+
private setRoot;
|
|
157
|
+
private overlayTarget;
|
|
158
|
+
private nestedScrollConsumes;
|
|
159
|
+
private scrollOverlayOwner;
|
|
160
|
+
private onOverlayWheel;
|
|
161
|
+
private onOverlayTouchStart;
|
|
162
|
+
private onOverlayTouchMove;
|
|
163
|
+
private onOverlayTouchEnd;
|
|
164
|
+
private synchronizeScrollOwnerIdentity;
|
|
165
|
+
private onScrollOwnerIdentityChanged;
|
|
104
166
|
private notifyInsetsChanged;
|
|
105
167
|
private restoreConfiguredScrollElement;
|
|
106
168
|
private configureActiveScrollElement;
|
|
169
|
+
private syncFallbackHeader;
|
|
107
170
|
private scheduleScrollConfiguration;
|
|
108
171
|
private takeOverVerticalScroll;
|
|
109
172
|
private onListScrollCommandAccepted;
|
|
@@ -50,7 +50,10 @@ export interface NativeProps extends ViewProps {
|
|
|
50
50
|
retainedPages?: string;
|
|
51
51
|
nativeTabBarItems?: string;
|
|
52
52
|
nativeTabBarHeight?: Double;
|
|
53
|
+
nativeTabBarVariant?: string;
|
|
54
|
+
nativeTabBarTrailingReservedWidth?: WithDefault<Double, 0>;
|
|
53
55
|
nativeTabBarContentPaddingHorizontal?: Double;
|
|
56
|
+
nativeTabBarContentPaddingVertical?: Double;
|
|
54
57
|
nativeTabBarItemSpacing?: Double;
|
|
55
58
|
nativeTabBarFontSize?: Double;
|
|
56
59
|
nativeTabBarFontFamily?: string;
|
|
@@ -72,6 +75,8 @@ export interface NativeProps extends ViewProps {
|
|
|
72
75
|
}
|
|
73
76
|
type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
|
|
74
77
|
export interface NativeCommands {
|
|
78
|
+
scrollHeaderToOffset: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, offset: Double) => void;
|
|
79
|
+
scrollHeaderBy: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, delta: Double) => void;
|
|
75
80
|
scrollToTop: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, target: Int32, animated: boolean) => void;
|
|
76
81
|
setPage: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
|
|
77
82
|
setPageWithoutAnimation: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type WebCollapsiblePagerPageState = Readonly<{
|
|
3
|
+
isFocused: boolean;
|
|
4
|
+
isRouteActive: boolean;
|
|
5
|
+
owner: HTMLElement | null;
|
|
6
|
+
content: HTMLElement | null;
|
|
7
|
+
contentHeight?: number;
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
scrollTop: number;
|
|
11
|
+
pendingRouteScrollTop: number | null;
|
|
12
|
+
registerContent: (element: HTMLElement, explicitHeight?: number) => () => void;
|
|
13
|
+
}>;
|
|
14
|
+
export type WebCollapsiblePagerPageBridge = Readonly<{
|
|
15
|
+
setOwner: (owner: HTMLElement | null) => void;
|
|
16
|
+
requestMeasure: () => void;
|
|
17
|
+
setPendingRouteScrollTop: (top: number | null) => void;
|
|
18
|
+
}>;
|
|
19
|
+
export declare function useWebCollapsiblePagerPage(): Readonly<{
|
|
20
|
+
isFocused: boolean;
|
|
21
|
+
isRouteActive: boolean;
|
|
22
|
+
owner: HTMLElement | null;
|
|
23
|
+
content: HTMLElement | null;
|
|
24
|
+
contentHeight?: number;
|
|
25
|
+
width: number;
|
|
26
|
+
height: number;
|
|
27
|
+
scrollTop: number;
|
|
28
|
+
pendingRouteScrollTop: number | null;
|
|
29
|
+
registerContent: (element: HTMLElement, explicitHeight?: number) => () => void;
|
|
30
|
+
}> | null;
|
|
31
|
+
export declare function WebCollapsiblePagerPage({ children, pageKey, isFocused, isRouteActive, headerHeight, stickyHeaderHeight, onBridge, onGeometryChange, onScroll, onUserInput, }: React.PropsWithChildren<{
|
|
32
|
+
pageKey: string;
|
|
33
|
+
isFocused: boolean;
|
|
34
|
+
isRouteActive: boolean;
|
|
35
|
+
headerHeight: number;
|
|
36
|
+
stickyHeaderHeight: number;
|
|
37
|
+
onBridge: (key: string, bridge: WebCollapsiblePagerPageBridge | null) => void;
|
|
38
|
+
onGeometryChange: (key: string) => void;
|
|
39
|
+
onScroll: (key: string, top: number) => void;
|
|
40
|
+
onUserInput: (key: string) => void;
|
|
41
|
+
}>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
//# sourceMappingURL=WebCollapsiblePagerPage.d.ts.map
|
|
@@ -4,6 +4,10 @@ export default PagerView;
|
|
|
4
4
|
export * from './usePagerView';
|
|
5
5
|
export * from './CollapsiblePagerView';
|
|
6
6
|
export * from './NativeScroller';
|
|
7
|
+
export { CollapsiblePagerView as WebCollapsiblePagerView } from './CollapsiblePagerView.web';
|
|
8
|
+
export type { CollapsiblePagerViewProps as WebCollapsiblePagerViewProps } from './CollapsiblePagerView.web';
|
|
9
|
+
export { useWebCollapsiblePagerPage } from './WebCollapsiblePagerPage';
|
|
10
|
+
export type { WebCollapsiblePagerPageState } from './WebCollapsiblePagerPage';
|
|
7
11
|
import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from './PagerViewNativeComponent';
|
|
8
12
|
export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
|
|
9
13
|
export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type * as ReactNative from "react-native";
|
|
2
|
+
import { PagerView } from "./PagerView";
|
|
3
|
+
export default PagerView;
|
|
4
|
+
export * from "./usePagerView";
|
|
5
|
+
export * from "./CollapsiblePagerView";
|
|
6
|
+
export * from "./NativeScroller";
|
|
7
|
+
import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from "./PagerViewNativeComponent";
|
|
8
|
+
export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
|
|
9
|
+
export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
|
|
10
|
+
export type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
|
|
11
|
+
export type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;
|
|
12
|
+
export { ScrollEdgeEffect } from "./ScrollEdgeEffect";
|
|
13
|
+
//# sourceMappingURL=index.native.d.ts.map
|
|
@@ -3,5 +3,9 @@ export type { PagerViewProps, PagerViewOnPageScrollEvent, PagerViewOnPageScrollE
|
|
|
3
3
|
export * from "./usePagerView";
|
|
4
4
|
export * from "./CollapsiblePagerView.web";
|
|
5
5
|
export * from "./NativeScroller.web";
|
|
6
|
+
export { CollapsiblePagerView as WebCollapsiblePagerView } from "./CollapsiblePagerView.web";
|
|
7
|
+
export type { CollapsiblePagerViewProps as WebCollapsiblePagerViewProps } from "./CollapsiblePagerView.web";
|
|
8
|
+
export { useWebCollapsiblePagerPage } from "./WebCollapsiblePagerPage";
|
|
9
|
+
export type { WebCollapsiblePagerPageState } from "./WebCollapsiblePagerPage";
|
|
6
10
|
export { ScrollEdgeEffect } from "./ScrollEdgeEffect";
|
|
7
11
|
//# sourceMappingURL=index.web.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onekeyfe/react-native-pager-view",
|
|
3
|
-
"version": "6.7.0-
|
|
3
|
+
"version": "6.7.0-21",
|
|
4
4
|
"description": "React Native wrapper for Android and iOS ViewPager",
|
|
5
5
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "./lib/module/index.js",
|
|
@@ -9,8 +9,9 @@
|
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
|
-
"source": "./src/index.tsx",
|
|
13
12
|
"types": "./lib/typescript/src/index.d.ts",
|
|
13
|
+
"react-native": "./lib/module/index.native.js",
|
|
14
|
+
"source": "./src/index.tsx",
|
|
14
15
|
"browser": "./lib/module/index.web.js",
|
|
15
16
|
"default": "./lib/module/index.js"
|
|
16
17
|
},
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
"typescript": "^5.9.2"
|
|
73
74
|
},
|
|
74
75
|
"peerDependencies": {
|
|
75
|
-
"@onekeyfe/react-native-native-logger": "6.7.0-
|
|
76
|
+
"@onekeyfe/react-native-native-logger": "6.7.0-21",
|
|
76
77
|
"react": "*",
|
|
77
78
|
"react-native": "*"
|
|
78
79
|
},
|
|
@@ -108,5 +109,6 @@
|
|
|
108
109
|
"RNCNativeScroller": "RNCNativeScrollerComponentView"
|
|
109
110
|
}
|
|
110
111
|
}
|
|
111
|
-
}
|
|
112
|
+
},
|
|
113
|
+
"react-native": "./lib/module/index.native.js"
|
|
112
114
|
}
|