@onekeyfe/react-native-pager-view 6.7.0-alpha.378 → 6.7.0-alpha.383

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"
@@ -290,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(
@@ -319,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";
@@ -332,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;
@@ -458,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 ||
@@ -470,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);
@@ -533,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;
@@ -586,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
         }

package/src/CollapsiblePagerView.web.tsx

@@ -580,6 +580,23 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.scrollCurrentPageToTop(0, options?.animated ?? true);
   };
 
+  public scrollHeaderBy = (delta: number) => {
+    if (!Number.isFinite(delta)) return;
+    const offset = Math.min(
+      this.headerHeight,
+      Math.max(0, this.sharedHeaderOffset + delta)
+    );
+    this.scrollCurrentPageToTop(offset, false);
+  };
+
+  public scrollHeaderToOffset = (offset: number) => {
+    if (!Number.isFinite(offset)) return;
+    this.scrollCurrentPageToTop(
+      Math.min(this.headerHeight, Math.max(0, offset)),
+      false
+    );
+  };
+
   public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
     this.scrollCurrentPageToTop(
       this.headerHeight,
@@ -674,10 +691,10 @@ export class CollapsiblePagerView extends React.PureComponent<
       )
         return;
       this.pageOffsets.set(key, 0);
-      this.sharedHeaderOffset = offset;
+      this.sharedHeaderOffset = Math.min(this.headerHeight, Math.max(0, offset));
       this.bodyAlignment = { element, key };
       scrollElementTo(element, {
-        top: offset,
+        top: this.sharedHeaderOffset,
         behavior: animated ? "smooth" : "instant",
       });
       this.syncFallbackHeader();

package/src/CollapsiblePagerViewNativeComponent.ts

@@ -67,7 +67,10 @@ export interface NativeProps extends ViewProps {
   retainedPages?: string;
   nativeTabBarItems?: string;
   nativeTabBarHeight?: Double;
+  nativeTabBarVariant?: string;
+  nativeTabBarTrailingReservedWidth?: WithDefault<Double, 0>;
   nativeTabBarContentPaddingHorizontal?: Double;
+  nativeTabBarContentPaddingVertical?: Double;
   nativeTabBarItemSpacing?: Double;
   nativeTabBarFontSize?: Double;
   nativeTabBarFontFamily?: string;
@@ -91,6 +94,14 @@ export interface NativeProps extends ViewProps {
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
+  scrollHeaderToOffset: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    offset: Double
+  ) => void;
+  scrollHeaderBy: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    delta: Double
+  ) => void;
   scrollToTop: (
     viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
     target: Int32,
@@ -112,6 +123,8 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    "scrollHeaderToOffset",
+    "scrollHeaderBy",
     "scrollToTop",
     "setPage",
     "setPageWithoutAnimation",