@onekeyfe/react-native-pager-view 6.7.0-2 → 6.7.0-20

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.
Files changed (42) hide show
  1. package/README.md +14 -0
  2. package/android/src/androidTest/AndroidManifest.xml +7 -0
  3. package/android/src/androidTest/java/com/reactnativepagerview/CollapsiblePagerTabReservationTest.kt +306 -0
  4. package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerHost.kt +90 -21
  5. package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerNativeHeaders.kt +72 -7
  6. package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerViewManager.kt +27 -0
  7. package/android/src/main/java/com/reactnativepagerview/NativeScrollerScrollAwayInsets.kt +19 -0
  8. package/android/src/main/java/com/reactnativepagerview/NativeScrollerView.kt +50 -6
  9. package/android/src/test/java/com/reactnativepagerview/NativeScrollerScrollAwayInsetsTest.kt +40 -0
  10. package/docs/SPEC.md +253 -10
  11. package/ios/RNCCollapsiblePagerViewComponentView.mm +614 -42
  12. package/ios/RNCNativeScrollerComponentView.h +2 -0
  13. package/ios/RNCNativeScrollerComponentView.mm +42 -0
  14. package/ios/tests/RNCCollapsiblePagerFirstFrameTests.mm +393 -0
  15. package/ios/tests/RNCCollapsiblePagerHitTestTests.mm +338 -0
  16. package/ios/tests/RNCCollapsiblePagerPressCancellationTests.mm +74 -9
  17. package/ios/tests/RNCCollapsiblePagerRefreshControlTests.mm +50 -0
  18. package/lib/module/CollapsiblePagerView.js +32 -7
  19. package/lib/module/CollapsiblePagerView.web.js +439 -39
  20. package/lib/module/CollapsiblePagerViewNativeComponent.ts +13 -0
  21. package/lib/module/NativeScroller.web.js +16 -3
  22. package/lib/module/WebCollapsiblePagerPage.js +182 -0
  23. package/lib/module/index.js +2 -0
  24. package/lib/module/index.native.js +9 -0
  25. package/lib/module/index.web.js +2 -0
  26. package/lib/typescript/src/CollapsiblePagerView.d.ts +10 -3
  27. package/lib/typescript/src/CollapsiblePagerView.web.d.ts +66 -3
  28. package/lib/typescript/src/CollapsiblePagerViewNativeComponent.d.ts +5 -0
  29. package/lib/typescript/src/WebCollapsiblePagerPage.d.ts +42 -0
  30. package/lib/typescript/src/index.d.ts +4 -0
  31. package/lib/typescript/src/index.native.d.ts +13 -0
  32. package/lib/typescript/src/index.web.d.ts +4 -0
  33. package/package.json +6 -4
  34. package/react-native-pager-view.podspec +1 -0
  35. package/src/CollapsiblePagerView.tsx +99 -8
  36. package/src/CollapsiblePagerView.web.tsx +657 -51
  37. package/src/CollapsiblePagerViewNativeComponent.ts +13 -0
  38. package/src/NativeScroller.web.tsx +24 -2
  39. package/src/WebCollapsiblePagerPage.tsx +258 -0
  40. package/src/index.native.tsx +30 -0
  41. package/src/index.tsx +4 -0
  42. 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: _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: 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
@@ -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
@@ -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: number;
42
- stickyHeaderHeight: number;
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-2",
3
+ "version": "6.7.0-20",
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-2",
76
+ "@onekeyfe/react-native-native-logger": "6.7.0-20",
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
  }
@@ -19,6 +19,7 @@ Pod::Spec.new do |s|
19
19
 
20
20
  s.test_spec "Tests" do |test_spec|
21
21
  test_spec.source_files = "ios/tests/**/*.{m,mm}"
22
+ test_spec.dependency "react-native-native-list"
22
23
  end
23
24
 
24
25
  install_modules_dependencies(s)