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

package/src/CollapsiblePagerView.tsx

@@ -32,8 +32,11 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
 }>;
 
 export type CollapsiblePagerNativeTabBarStyle = Readonly<{
+  variant?: "underline" | "segmented";
   height?: number;
+  trailingReservedWidth?: number;
   contentPaddingHorizontal?: number;
+  contentPaddingVertical?: number;
   itemSpacing?: number;
   fontSize?: number;
   fontFamily?: string;
@@ -94,7 +97,10 @@ export interface CollapsiblePagerViewProps
     | "retainedPages"
     | "nativeTabBarItems"
     | "nativeTabBarHeight"
+    | "nativeTabBarVariant"
+    | "nativeTabBarTrailingReservedWidth"
     | "nativeTabBarContentPaddingHorizontal"
+    | "nativeTabBarContentPaddingVertical"
     | "nativeTabBarItemSpacing"
     | "nativeTabBarFontSize"
     | "nativeTabBarFontFamily"
@@ -120,6 +126,8 @@ export interface CollapsiblePagerViewProps
   stickyHeaderHeight: number;
   /** Fixed content above the collapsible header on iOS 26 and newer. */
   topOverlay?: React.ReactNode;
+  /** Known overlay height to reserve until its first layout measurement. */
+  topOverlayHeightHint?: number;
   /** Existing fixed header shared with a parent pager on iOS 26 and newer. */
   externalTopOverlayTag?: number;
   /** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
@@ -158,7 +166,7 @@ export interface CollapsiblePagerViewProps
 type State = {
   selectedPage: number;
   transientRetainedPages: readonly number[];
-  topOverlayHeight: number;
+  topOverlayHeight: number | null;
 };
 
 const pageIndex = (value: number) => {
@@ -186,7 +194,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   State
 > {
   state: State = {
-    topOverlayHeight: 0,
+    topOverlayHeight: null,
     selectedPage: clampedPageIndex(
       this.props.initialPage ?? 0,
       React.Children.toArray(this.props.children).length
@@ -219,7 +227,22 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.notifyMountedPagesChanged();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(previousProps: CollapsiblePagerViewProps) {
+    const previousOverlayEnabled =
+      previousProps.topOverlay != null &&
+      (previousProps.topScrollEdgeEffect === "hard" ||
+        previousProps.topScrollEdgeEffect === "soft");
+    const overlayEnabled =
+      this.props.topOverlay != null &&
+      (this.props.topScrollEdgeEffect === "hard" ||
+        this.props.topScrollEdgeEffect === "soft");
+    if (
+      previousOverlayEnabled &&
+      !overlayEnabled &&
+      this.state.topOverlayHeight !== null
+    ) {
+      this.setState({ topOverlayHeight: null });
+    }
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
@@ -273,6 +296,22 @@ export class CollapsiblePagerView extends React.PureComponent<
       );
   };
 
+  public scrollHeaderBy = (delta: number) => {
+    if (this.nativeRef && Number.isFinite(delta))
+      CollapsiblePagerViewNativeCommands.scrollHeaderBy(
+        this.nativeRef,
+        delta
+      );
+  };
+
+  public scrollHeaderToOffset = (offset: number) => {
+    if (this.nativeRef && Number.isFinite(offset))
+      CollapsiblePagerViewNativeCommands.scrollHeaderToOffset(
+        this.nativeRef,
+        offset
+      );
+  };
+
   public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
     if (this.nativeRef)
       CollapsiblePagerViewNativeCommands.scrollToTop(
@@ -302,7 +341,11 @@ export class CollapsiblePagerView extends React.PureComponent<
     );
   }
 
-  private dispatchNativeTabPageCommand(position: number, animated: boolean) {
+  private dispatchNativeTabPageCommand(
+    position: number,
+    animated: boolean,
+    expectedKey?: string
+  ) {
     const commandId = ++this.nativeTabCommandId;
     this.nativeTabCommandQueuedDuringScroll =
       this.nativePagerScrollState !== "idle";
@@ -315,7 +358,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       }),
       () => {
         requestAnimationFrame(() => {
-          if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
+          if (
+            commandId !== this.nativeTabCommandId ||
+            !this.nativeRef ||
+            (expectedKey !== undefined &&
+              (!this.nativeTabBarEnabled() ||
+                this.props.nativeTabBar?.items[position]?.key !== expectedKey))
+          ) {
             return;
           }
           this.dispatchedNativeTabTarget = position;
@@ -441,7 +490,13 @@ export class CollapsiblePagerView extends React.PureComponent<
   ) => {
     const position = pageIndex(event.nativeEvent.position);
     if (
-      position !== null &&
+      !this.nativeTabBarEnabled() ||
+      position === null ||
+      this.props.nativeTabBar?.items[position]?.key !== event.nativeEvent.key
+    ) {
+      return;
+    }
+    if (
       position >= 0 &&
       position < this.pages().length &&
       (position !== this.state.selectedPage ||
@@ -453,7 +508,8 @@ export class CollapsiblePagerView extends React.PureComponent<
       this.dispatchNativeTabPageCommand(
         position,
         this.props.nativeTabPressAnimationEnabled ??
-          Math.abs(position - currentPage) <= 1
+          Math.abs(position - currentPage) <= 1,
+        event.nativeEvent.key
       );
     }
     this.props.onNativeTabPress?.(event);
@@ -473,6 +529,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       headerHeight,
       stickyHeaderHeight,
       topOverlay,
+      topOverlayHeightHint,
       externalTopOverlayTag,
       topScrollEdgeEffect,
       topOverlayColorScheme,
@@ -498,6 +555,11 @@ export class CollapsiblePagerView extends React.PureComponent<
       supportsTopScrollEdge &&
       (topScrollEdgeEffect === "hard" || topScrollEdgeEffect === "soft");
     const hasTopOverlay = scrollEdgeEnabled && topOverlay != null;
+    const initialTopOverlayHeight =
+      typeof topOverlayHeightHint === "number" &&
+      Number.isFinite(topOverlayHeightHint)
+        ? Math.max(0, Math.ceil(topOverlayHeightHint))
+        : 0;
     const pageKeys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const deducedLayoutDirection =
@@ -510,6 +572,22 @@ export class CollapsiblePagerView extends React.PureComponent<
       (Platform.OS === "ios" || Platform.OS === "android") &&
       !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
+    const requestedContentPaddingVertical =
+      nativeTabBarStyle?.contentPaddingVertical;
+    const nativeTabBarContentPaddingVertical =
+      typeof requestedContentPaddingVertical === "number" &&
+      Number.isFinite(requestedContentPaddingVertical) &&
+      requestedContentPaddingVertical >= 0
+        ? requestedContentPaddingVertical
+        : 0;
+    const requestedTrailingReservedWidth =
+      nativeTabBarStyle?.trailingReservedWidth;
+    const nativeTabBarTrailingReservedWidth =
+      typeof requestedTrailingReservedWidth === "number" &&
+      Number.isFinite(requestedTrailingReservedWidth) &&
+      requestedTrailingReservedWidth >= 0
+        ? requestedTrailingReservedWidth
+        : 0;
     const nativeSubHeaderEnabled =
       (Platform.OS === "ios" || Platform.OS === "android") &&
       !!nativeSubHeader?.items.length;
@@ -542,7 +620,11 @@ export class CollapsiblePagerView extends React.PureComponent<
         topOverlayColorScheme={
           scrollEdgeEnabled ? topOverlayColorScheme : undefined
         }
-        topOverlayHeight={hasTopOverlay ? this.state.topOverlayHeight : 0}
+        topOverlayHeight={
+          hasTopOverlay
+            ? this.state.topOverlayHeight ?? initialTopOverlayHeight
+            : 0
+        }
         externalTopOverlayTag={
           supportsTopScrollEdge && !hasTopOverlay
             ? externalTopOverlayTag ?? 0
@@ -559,11 +641,20 @@ export class CollapsiblePagerView extends React.PureComponent<
         nativeTabBarHeight={
           nativeTabBarEnabled ? nativeTabBarStyle?.height ?? 44 : undefined
         }
+        nativeTabBarVariant={
+          nativeTabBarEnabled ? nativeTabBarStyle?.variant ?? "underline" : undefined
+        }
+        nativeTabBarTrailingReservedWidth={
+          nativeTabBarEnabled ? nativeTabBarTrailingReservedWidth : 0
+        }
         nativeTabBarContentPaddingHorizontal={
           nativeTabBarEnabled
             ? nativeTabBarStyle?.contentPaddingHorizontal ?? 20
             : undefined
         }
+        nativeTabBarContentPaddingVertical={
+          nativeTabBarEnabled ? nativeTabBarContentPaddingVertical : undefined
+        }
         nativeTabBarItemSpacing={
           nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined
         }