@onekeyfe/react-native-pager-view 6.7.0-alpha.436 → 6.7.0-alpha.449

package/lib/typescript/src/CollapsiblePagerView.d.ts

@@ -16,7 +16,7 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
     testID?: string;
 }>;
 export type CollapsiblePagerNativeTabBarStyle = Readonly<{
-    variant?: "underline" | "segmented";
+    variant?: "underline" | "segmented" | "text";
     height?: number;
     trailingReservedWidth?: number;
     contentPaddingHorizontal?: number;
@@ -24,6 +24,7 @@ export type CollapsiblePagerNativeTabBarStyle = Readonly<{
     itemSpacing?: number;
     fontSize?: number;
     fontFamily?: string;
+    activeFontFamily?: string;
     backgroundColor?: ReactNative.ColorValue;
     activeTextColor?: ReactNative.ColorValue;
     inactiveTextColor?: ReactNative.ColorValue;
@@ -31,7 +32,33 @@ export type CollapsiblePagerNativeTabBarStyle = Readonly<{
     indicatorHeight?: number;
     indicatorBottom?: number;
 }>;
+export type CollapsiblePagerToolbarItem = Readonly<{
+    iconName: string;
+    selected?: boolean;
+    accessibilityLabel?: string;
+    testID?: string;
+    iconColor?: string;
+    selectedBackgroundColor?: string;
+    hoverBackgroundColor?: string;
+    pressedBackgroundColor?: string;
+    size?: number;
+    iconSize?: number;
+    contentWidth?: number;
+    trailingInset?: number;
+}>;
+export type CollapsiblePagerToolbarPress = Readonly<{
+    key: string;
+    anchorRect: Readonly<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+}>;
 export type CollapsiblePagerNativeTabBarConfig = Readonly<{
+    controlled?: boolean;
+    selectedKey?: string;
+    toolbar?: Readonly<Record<string, CollapsiblePagerToolbarItem>>;
     items: readonly CollapsiblePagerNativeTabBarItem[];
     style?: CollapsiblePagerNativeTabBarStyle;
 }>;
@@ -59,7 +86,7 @@ export type CollapsiblePagerNativeSubHeaderConfig = Readonly<{
 }>;
 export type CollapsiblePagerViewOnNativeTabPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
 export type CollapsiblePagerViewOnNativeSubHeaderPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
-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"> {
+export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarConfig" | "onNativeToolbarPress" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarVariant" | "nativeTabBarTrailingReservedWidth" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarContentPaddingVertical" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
     /** Collapsible content rendered above the sticky bar. */
     header: React.ReactNode;
     /** Bar which remains pinned after the header has collapsed. */
@@ -92,6 +119,7 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     layoutDirection?: "ltr" | "rtl" | "locale";
     /** Optional native tab bar for iOS and Android. */
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
+    onNativeToolbarPress?: (event: ReactNative.NativeSyntheticEvent<CollapsiblePagerToolbarPress>) => void;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
     /**
      * Defaults to animating adjacent native tab presses and jumping directly to
@@ -146,6 +174,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private onPageSelected;
     private onPageScrollStateChanged;
     private onNativeTabPress;
+    private onNativeToolbarPress;
     private onNativeSubHeaderPress;
     render(): React.JSX.Element;
 }

package/lib/typescript/src/CollapsiblePagerView.web.d.ts

@@ -1,5 +1,7 @@
 import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
+import type { CollapsiblePagerNativeTabBarConfig, CollapsiblePagerToolbarPress, CollapsiblePagerViewOnNativeTabPressEvent } from "./CollapsiblePagerView";
+export type { CollapsiblePagerNativeTabBarConfig, CollapsiblePagerNativeTabBarItem, CollapsiblePagerNativeTabBarStyle, CollapsiblePagerToolbarItem, CollapsiblePagerToolbarPress } from "./CollapsiblePagerView";
 import type * as ReactNative from "react-native";
 export type OnPageScrollEventData = Readonly<{
     position: number;
@@ -36,6 +38,10 @@ export type CollapsiblePagerMountState = Readonly<{
     pageKeys: readonly string[];
 }>;
 export interface CollapsiblePagerViewProps extends Omit<WebCollapsiblePagerNativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "pageKeys" | "retainedPages" | "layoutDirection"> {
+    nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
+    nativeTabPressAnimationEnabled?: boolean;
+    onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
+    onNativeToolbarPress?: (event: ReactNative.NativeSyntheticEvent<CollapsiblePagerToolbarPress>) => void;
     header: React.ReactNode;
     stickyHeader: React.ReactNode;
     headerHeight?: number;
@@ -66,6 +72,10 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     state: State;
     private root;
     private track;
+    private tabProgress;
+    private tabProgressFrame;
+    private tabProgressGeneration;
+    private tabButtons;
     private headerSlot;
     private stickySlot;
     private cssTimelineSupported;
@@ -98,6 +108,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private configureFrame;
     private pendingTopFrame;
     private transitionTimer;
+    private transitionGeneration;
     private pageScrollState;
     private configuredScrollElement;
     private readonly timelineName;
@@ -152,6 +163,13 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private beginPageTransition;
     private onTrackTransitionEnd;
     private setTrack;
+    private cancelTabProgressFrame;
+    private readTabProgress;
+    private startTabProgressFrames;
+    private tabColorWeights;
+    private tabFontOwnerKey;
+    private tabColor;
+    private syncTabColors;
     private pageScrollElement;
     private setRoot;
     private overlayTarget;
@@ -180,10 +198,35 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private onTouchMove;
     private onTouchEnd;
     private onTouchCancel;
+    private toolbarSlot;
+    private toolbarButton;
+    private toolbarOwnerKey;
+    private toolbarOwnerEntry;
+    private toolbarIconIdentity;
+    private toolbarLoadedIcon;
+    private toolbarPendingIdentity;
+    private toolbarReadyIcon;
+    private toolbarFailedIdentity;
+    private toolbarAnimation;
+    private toolbarPresence;
+    private toolbarPresenceInterrupted;
+    private toolbarImage;
+    private toolbarGeneration;
+    private toolbarTouchKey;
+    private ownsSettledToolbar;
+    private toolbarCanCommit;
+    private cancelToolbarPending;
+    private setToolbarInteractive;
+    private suspendToolbar;
+    private setToolbarSlot;
+    private animateToolbar;
+    private hideToolbar;
+    private commitToolbar;
+    private syncToolbar;
+    private renderNativeTabBar;
     render(): React.JSX.Element;
 }
 export type CollapsiblePagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<OnPageScrollEventData>;
 export type CollapsiblePagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>;
 export type CollapsiblePagerViewOnPageScrollStateChangedEvent = ReactNative.NativeSyntheticEvent<OnPageScrollStateChangedEventData>;
-export {};
 //# sourceMappingURL=CollapsiblePagerView.web.d.ts.map

package/lib/typescript/src/CollapsiblePagerViewNativeComponent.d.ts

@@ -25,6 +25,15 @@ export type OnNativeTabPressEventData = Readonly<{
     position: CodegenTypes.Int32;
     key: string;
 }>;
+export type OnNativeToolbarPressEventData = Readonly<{
+    key: string;
+    anchorRect: Readonly<{
+        x: CodegenTypes.Double;
+        y: CodegenTypes.Double;
+        width: CodegenTypes.Double;
+        height: CodegenTypes.Double;
+    }>;
+}>;
 export type OnScrollEdgeCapabilityEventData = Readonly<{
     available: boolean;
 }>;
@@ -47,6 +56,7 @@ export interface NativeProps extends ViewProps {
     externalTopOverlayTag?: CodegenTypes.WithDefault<CodegenTypes.Int32, 0>;
     pageKeys?: string;
     retainedPages?: string;
+    nativeTabBarConfig?: string;
     nativeTabBarItems?: string;
     nativeTabBarHeight?: CodegenTypes.Double;
     nativeTabBarVariant?: string;
@@ -68,6 +78,7 @@ export interface NativeProps extends ViewProps {
     onPageSelected?: CodegenTypes.DirectEventHandler<OnPageSelectedEventData>;
     onPageScrollStateChanged?: CodegenTypes.DirectEventHandler<OnPageScrollStateChangedEventData>;
     onCollapsibleStateChanged?: CodegenTypes.DirectEventHandler<OnCollapsibleStateChangedEventData>;
+    onNativeToolbarPress?: CodegenTypes.DirectEventHandler<OnNativeToolbarPressEventData>;
     onNativeTabPress?: CodegenTypes.DirectEventHandler<OnNativeTabPressEventData>;
     onNativeSubHeaderPress?: CodegenTypes.DirectEventHandler<OnNativeTabPressEventData>;
     onScrollEdgeCapability?: CodegenTypes.DirectEventHandler<OnScrollEdgeCapabilityEventData>;

package/lib/typescript/src/NativeScroller.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type HostInstance, type RefreshControlProps, type ScrollView, type ScrollViewProps, type ViewProps } from "react-native";
+import { type RefreshControlProps, type ScrollView, type ScrollViewProps, type ViewProps } from "react-native";
 import NativeScrollerHost from "./NativeScrollerNativeComponent";
 import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 export declare const NATIVE_SCROLLER_NATIVE_ID_PREFIX = "rnc-collapsible-pager-native-scroller";
@@ -18,7 +18,7 @@ export interface NativeScrollerProps extends ViewProps, Pick<ScrollViewProps, "c
     keyboardShouldPersistTaps?: ScrollViewProps["keyboardShouldPersistTaps"] | boolean;
 }
 type HostRef = React.ElementRef<typeof NativeScrollerHost>;
-export interface NativeScrollerRef extends Pick<HostInstance, "measure" | "measureInWindow" | "measureLayout" | "setNativeProps" | "focus" | "blur">, Pick<React.ElementRef<typeof ScrollView>, "scrollTo" | "scrollToEnd" | "flashScrollIndicators"> {
+export interface NativeScrollerRef extends Pick<HostRef, "measure" | "measureInWindow" | "measureLayout" | "setNativeProps" | "focus" | "blur">, Pick<React.ElementRef<typeof ScrollView>, "scrollTo" | "scrollToEnd" | "flashScrollIndicators"> {
     getNativeScrollRef(): HostRef | null;
     getScrollableNode(): number | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "6.7.0-alpha.436",
+  "version": "6.7.0-alpha.449",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -74,7 +74,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "6.7.0-alpha.436",
+    "@onekeyfe/react-native-image": "*",
+    "@onekeyfe/react-native-native-logger": "*",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -1,6 +1,6 @@
 import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
-import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import { I18nManager, Platform, StyleSheet, View, processColor } from "react-native";
 import type * as ReactNative from "react-native";
 
 import CollapsiblePagerViewNativeComponent, {
@@ -32,7 +32,7 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
 }>;
 
 export type CollapsiblePagerNativeTabBarStyle = Readonly<{
-  variant?: "underline" | "segmented";
+  variant?: "underline" | "segmented" | "text";
   height?: number;
   trailingReservedWidth?: number;
   contentPaddingHorizontal?: number;
@@ -40,6 +40,7 @@ export type CollapsiblePagerNativeTabBarStyle = Readonly<{
   itemSpacing?: number;
   fontSize?: number;
   fontFamily?: string;
+  activeFontFamily?: string;
   backgroundColor?: ReactNative.ColorValue;
   activeTextColor?: ReactNative.ColorValue;
   inactiveTextColor?: ReactNative.ColorValue;
@@ -48,7 +49,30 @@ export type CollapsiblePagerNativeTabBarStyle = Readonly<{
   indicatorBottom?: number;
 }>;
 
+export type CollapsiblePagerToolbarItem = Readonly<{
+  iconName: string;
+  selected?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+  iconColor?: string;
+  selectedBackgroundColor?: string;
+  hoverBackgroundColor?: string;
+  pressedBackgroundColor?: string;
+  size?: number;
+  iconSize?: number;
+  contentWidth?: number;
+  trailingInset?: number;
+}>;
+
+export type CollapsiblePagerToolbarPress = Readonly<{
+  key: string;
+  anchorRect: Readonly<{ x: number; y: number; width: number; height: number }>;
+}>;
+
 export type CollapsiblePagerNativeTabBarConfig = Readonly<{
+  controlled?: boolean;
+  selectedKey?: string;
+  toolbar?: Readonly<Record<string, CollapsiblePagerToolbarItem>>;
   items: readonly CollapsiblePagerNativeTabBarItem[];
   style?: CollapsiblePagerNativeTabBarStyle;
 }>;
@@ -95,6 +119,8 @@ export interface CollapsiblePagerViewProps
     | "externalTopOverlayTag"
     | "pageKeys"
     | "retainedPages"
+    | "nativeTabBarConfig"
+    | "onNativeToolbarPress"
     | "nativeTabBarItems"
     | "nativeTabBarHeight"
     | "nativeTabBarVariant"
@@ -148,6 +174,7 @@ export interface CollapsiblePagerViewProps
   layoutDirection?: "ltr" | "rtl" | "locale";
   /** Optional native tab bar for iOS and Android. */
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
+  onNativeToolbarPress?: (event: ReactNative.NativeSyntheticEvent<CollapsiblePagerToolbarPress>) => void;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
   /**
    * Defaults to animating adjacent native tab presses and jumping directly to
@@ -169,6 +196,20 @@ type State = {
   topOverlayHeight: number | null;
 };
 
+const nativeToolbar = (toolbar: CollapsiblePagerNativeTabBarConfig["toolbar"]) => {
+  if (!toolbar) return undefined;
+  return Object.fromEntries(Object.entries(toolbar).map(([key, item]) => {
+    const color = processColor(item.iconColor ?? "#000000");
+    const argb = typeof color === "number" ? color >>> 0 : 0xff000000;
+    return [key, { ...item,
+      iconColor: `rgba(${(argb >>> 16) & 255},${(argb >>> 8) & 255},${argb & 255},${Math.round(((argb >>> 24) / 255) * 1000000) / 1000000})`,
+      selectedBackgroundColor: processColor(item.selectedBackgroundColor ?? "transparent"),
+      hoverBackgroundColor: processColor(item.hoverBackgroundColor ?? "transparent"),
+      pressedBackgroundColor: processColor(item.pressedBackgroundColor ?? "transparent"),
+    }];
+  }));
+};
+
 const pageIndex = (value: number) => {
   const index = Math.trunc(value);
   return Number.isFinite(index) ? index : null;
@@ -260,7 +301,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       position >= 0 &&
       position < this.pages().length
     ) {
-      if (this.nativeTabBarEnabled()) {
+      if (this.nativeTabBarEnabled() && !this.props.nativeTabBar?.controlled) {
         this.dispatchNativeTabPageCommand(position, true);
       } else {
         CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
@@ -276,7 +317,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       position >= 0 &&
       position < this.pages().length
     ) {
-      if (this.nativeTabBarEnabled()) {
+      if (this.nativeTabBarEnabled() && !this.props.nativeTabBar?.controlled) {
         this.dispatchNativeTabPageCommand(position, false);
       } else {
         CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(
@@ -497,6 +538,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       return;
     }
     if (
+      !this.props.nativeTabBar?.controlled &&
       position >= 0 &&
       position < this.pages().length &&
       (position !== this.state.selectedPage ||
@@ -515,6 +557,13 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.props.onNativeTabPress?.(event);
   };
 
+  private onNativeToolbarPress = (
+    event: ReactNative.NativeSyntheticEvent<CollapsiblePagerToolbarPress>
+  ) => {
+    if (!this.props.nativeTabBar?.toolbar?.[event.nativeEvent.key]?.iconName) return;
+    this.props.onNativeToolbarPress?.(event);
+  };
+
   private onNativeSubHeaderPress = (
     event: ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>
   ) => {
@@ -635,6 +684,20 @@ export class CollapsiblePagerView extends React.PureComponent<
         retainedPages={JSON.stringify([...retained])}
         onPageSelected={this.onPageSelected}
         onPageScrollStateChanged={this.onPageScrollStateChanged}
+        nativeTabBarConfig={nativeTabBarEnabled ? JSON.stringify({
+          controlled: nativeTabBar.controlled,
+          selectedKey: nativeTabBar.selectedKey,
+          pageKeys: (() => {
+            const keys: string[] = [];
+            React.Children.forEach(this.props.children, (child) => {
+              if (child !== null && child !== undefined && typeof child !== "boolean") keys.push(pageKey(child, keys.length));
+            });
+            return keys;
+          })(),
+          toolbar: nativeToolbar(nativeTabBar.toolbar),
+          activeFontFamily: nativeTabBar.style?.activeFontFamily,
+        }) : undefined}
+        onNativeToolbarPress={this.onNativeToolbarPress}
         nativeTabBarItems={
           nativeTabBarEnabled ? JSON.stringify(nativeTabBar.items) : undefined
         }
@@ -659,7 +722,7 @@ export class CollapsiblePagerView extends React.PureComponent<
           nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined
         }
         nativeTabBarFontSize={
-          nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? 16 : undefined
+          nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? (nativeTabBarStyle?.variant === "text" ? 18 : 16) : undefined
         }
         nativeTabBarFontFamily={
           nativeTabBarEnabled ? nativeTabBarStyle?.fontFamily : undefined