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

package/ios/tests/RNCCollapsiblePagerFirstFrameTests.mm

@@ -36,6 +36,13 @@ using namespace facebook::react;
 - (void)scrollToEnd:(BOOL)animated;
 @end
 
+@interface RNCCollapsiblePagerNativeTabBarView : UIView
+- (void)updateItemsJSON:(NSString *)json;
+- (void)updateConfigJSON:(NSString *)json;
+- (void)updateToolbarPagerIndex:(NSInteger)index busy:(BOOL)busy;
+- (BOOL)toolbarCanCommit;
+@end
+
 @interface RNCCollapsiblePagerFirstFrameTests : XCTestCase
 @end
 
@@ -903,4 +910,58 @@ using namespace facebook::react;
   XCTAssertEqual([outer verticalScrollViewForPageAtIndex:0], scroller.scrollView);
 }
 
+- (void)testControlledToolbarRetainsSnapshotAndRestoresLegacyHitAndAccessibility
+{
+  RNCCollapsiblePagerNativeTabBarView *bar = [NSClassFromString(@"RNCCollapsiblePagerNativeTabBarView") new];
+  bar.frame = CGRectMake(0, 0, 320, 44);
+  UIWindow *window = [[UIWindow alloc] initWithFrame:CGRectMake(0, 0, 320, 600)];
+  UIViewController *root = [UIViewController new];
+  window.rootViewController = root;
+  [root.view addSubview:bar];
+  window.hidden = NO;
+  [self addTeardownBlock:^{ [bar removeFromSuperview]; window.hidden = YES; window.rootViewController = nil; }];
+  [bar updateItemsJSON:@"[{\"key\":\"a\",\"title\":\"A\"},{\"key\":\"b\",\"title\":\"B\"}]"];
+  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(1, 1)];
+  UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext *context) {
+    [UIColor.blackColor setFill]; UIRectFill(CGRectMake(0, 0, 1, 1));
+  }];
+  NSString *identity = [NSString stringWithFormat:@"SliderHorOutline|#000000|%g|24", window.screen.scale];
+  [bar setValue:image forKey:@"loadedToolbarImage"];
+  [bar setValue:identity forKey:@"loadedIconIdentity"];
+  NSString *owned = @"{\"controlled\":true,\"selectedKey\":\"a\",\"pageKeys\":[\"a\",\"b\"],\"toolbar\":{\"a\":{\"iconName\":\"SliderHorOutline\",\"accessibilityLabel\":\"A action\"}}}";
+  [bar updateConfigJSON:owned];
+  [bar updateToolbarPagerIndex:0 busy:NO];
+  UIButton *button = [bar valueForKey:@"toolbarButton"];
+  XCTAssertTrue(button.enabled);
+  XCTAssertTrue(button.isAccessibilityElement);
+  XCTAssertFalse(button.adjustsImageWhenDisabled);
+  [bar updateToolbarPagerIndex:-1 busy:YES];
+  XCTAssertFalse(button.enabled);
+  XCTAssertFalse(button.isAccessibilityElement);
+  XCTAssertEqual([button imageForState:UIControlStateNormal], image);
+  XCTAssertEqualObjects(button.accessibilityLabel, @"A action");
+  XCTAssertFalse([bar toolbarCanCommit]);
+  [bar updateConfigJSON:@"{\"controlled\":false,\"toolbar\":{\"a\":{\"iconName\":\"SliderHorOutline\",\"accessibilityLabel\":\"A action\"}}}"];
+  XCTAssertTrue(button.enabled);
+  XCTAssertTrue(button.userInteractionEnabled);
+  XCTAssertTrue(button.isAccessibilityElement);
+  XCTAssertFalse(button.accessibilityElementsHidden);
+  XCTAssertTrue(button.adjustsImageWhenDisabled);
+  [bar updateConfigJSON:owned];
+  [bar updateToolbarPagerIndex:0 busy:NO];
+  [bar updateConfigJSON:[owned stringByReplacingOccurrencesOfString:@"\"selectedKey\":\"a\"" withString:@"\"selectedKey\":\"b\""]];
+  XCTAssertFalse(button.enabled);
+  XCTAssertEqualObjects(button.accessibilityLabel, @"A action");
+  XCTAssertFalse([bar toolbarCanCommit]);
+  [bar updateToolbarPagerIndex:1 busy:NO];
+  XCTAssertTrue([bar toolbarCanCommit]);
+  XCTAssertFalse(button.enabled); // B has no action; the fixed slot remains.
+  [bar removeFromSuperview];
+  [root.view addSubview:bar];
+  XCTAssertFalse([bar toolbarCanCommit]);
+  [bar updateToolbarPagerIndex:1 busy:NO];
+  XCTAssertTrue([bar toolbarCanCommit]);
+  XCTAssertFalse(button.enabled);
+}
+
 @end

package/ios/tests/RNCCollapsiblePagerHitTestTests.mm

@@ -1013,6 +1013,20 @@ using namespace facebook::react;
     for (id owner in owners) {
       XCTAssertNotNil([owner valueForKey:@"topInteraction"]);
       XCTAssertNotNil([[owner valueForKey:@"topInteraction"] scrollView]);
+      if (owner == sourceOwner) continue;
+      XCTAssertTrue([[owner valueForKey:@"ownsTransitionHosts"] boolValue]);
+      UIView *page = [owner valueForKey:@"page"];
+      UIScrollView *list = [owner valueForKey:@"scrollView"];
+      UIView *incomingTop = [owner valueForKey:@"ownedTopHost"];
+      UIView *incomingSticky = [owner valueForKey:@"ownedStickyHost"];
+      XCTAssertEqual(incomingTop.superview, page);
+      XCTAssertEqual(incomingSticky.superview, page);
+      XCTAssertNotEqual(incomingTop, topHost);
+      XCTAssertNotEqual(incomingSticky, pinnedHost);
+      XCTAssertFalse(incomingTop.userInteractionEnabled);
+      XCTAssertFalse(incomingSticky.userInteractionEnabled);
+      XCTAssertEqualWithAccuracy(incomingTop.frame.origin.x,
+        CGRectGetMinX([list convertRect:list.bounds toView:page]), 0.001);
     }
   } else {
     XCTSkip(@"Direct local Hard drag handoff requires iOS 27 or newer");
@@ -1046,11 +1060,19 @@ using namespace facebook::react;
     XCTAssertEqual([[self.pager valueForKey:@"programmaticScrollEdgeOwners"] count], 3);
     [self.pager scrollViewDidEndDragging:horizontal willDecelerate:YES];
     XCTAssertEqual([[self.pager valueForKey:@"programmaticScrollEdgeOwners"] count], 3);
+    NSMutableArray<UIView *> *incomingHosts = [NSMutableArray new];
+    for (id owner in [self.pager valueForKey:@"programmaticScrollEdgeOwners"]) {
+      if (![[owner valueForKey:@"ownsTransitionHosts"] boolValue]) continue;
+      [incomingHosts addObject:[owner valueForKey:@"ownedTopHost"]];
+      [incomingHosts addObject:[owner valueForKey:@"ownedStickyHost"]];
+    }
     [self.pager scrollViewDidEndDecelerating:horizontal];
     XCTestExpectation *settled = [self expectationWithDescription:@"drag settled"];
     dispatch_async(dispatch_get_main_queue(), ^{ [settled fulfill]; });
     [self waitForExpectations:@[settled] timeout:2];
     XCTAssertEqual([[self.pager valueForKey:@"programmaticScrollEdgeOwners"] count], 0);
+    XCTAssertEqual(incomingHosts.count, 4);
+    for (UIView *host in incomingHosts) XCTAssertNil(host.superview);
     XCTAssertFalse([topHost.interactions containsObject:top]);
     XCTAssertNil(top.scrollView);
     XCTAssertEqual([[self.pager valueForKey:@"currentIndex"] integerValue], 1);

package/lib/module/CollapsiblePagerView.js

@@ -1,9 +1,23 @@
 "use strict";
 
 import React from "react";
-import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import { I18nManager, Platform, StyleSheet, View, processColor } from "react-native";
 import CollapsiblePagerViewNativeComponent, { Commands as CollapsiblePagerViewNativeCommands } from "./CollapsiblePagerViewNativeComponent";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const nativeToolbar = 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 => {
   const index = Math.trunc(value);
   return Number.isFinite(index) ? index : null;
@@ -62,7 +76,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   setPage = selectedPage => {
     const position = pageIndex(selectedPage);
     if (this.nativeRef && position !== null && 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);
@@ -72,7 +86,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   setPageWithoutAnimation = selectedPage => {
     const position = pageIndex(selectedPage);
     if (this.nativeRef && position !== null && position >= 0 && position < this.pages().length) {
-      if (this.nativeTabBarEnabled()) {
+      if (this.nativeTabBarEnabled() && !this.props.nativeTabBar?.controlled) {
         this.dispatchNativeTabPageCommand(position, false);
       } else {
         CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, position);
@@ -195,13 +209,17 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (!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 || this.latestNativeTabTarget !== null)) {
+    if (!this.props.nativeTabBar?.controlled && position >= 0 && position < this.pages().length && (position !== this.state.selectedPage || this.latestNativeTabTarget !== null)) {
       // Selection state lags an in-flight transition until native reports it.
       const currentPage = this.dispatchedNativeTabTarget ?? this.state.selectedPage;
       this.dispatchNativeTabPageCommand(position, this.props.nativeTabPressAnimationEnabled ?? Math.abs(position - currentPage) <= 1, event.nativeEvent.key);
     }
     this.props.onNativeTabPress?.(event);
   };
+  onNativeToolbarPress = event => {
+    if (!this.props.nativeTabBar?.toolbar?.[event.nativeEvent.key]?.iconName) return;
+    this.props.onNativeToolbarPress?.(event);
+  };
   onNativeSubHeaderPress = event => {
     this.props.onNativeSubHeaderPress?.(event);
   };
@@ -274,6 +292,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 = [];
+          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,
       nativeTabBarHeight: nativeTabBarEnabled ? nativeTabBarStyle?.height ?? 44 : undefined,
       nativeTabBarVariant: nativeTabBarEnabled ? nativeTabBarStyle?.variant ?? "underline" : undefined,
@@ -281,7 +313,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       nativeTabBarContentPaddingHorizontal: nativeTabBarEnabled ? nativeTabBarStyle?.contentPaddingHorizontal ?? 20 : undefined,
       nativeTabBarContentPaddingVertical: nativeTabBarEnabled ? nativeTabBarContentPaddingVertical : undefined,
       nativeTabBarItemSpacing: nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined,
-      nativeTabBarFontSize: nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? 16 : undefined,
+      nativeTabBarFontSize: nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? (nativeTabBarStyle?.variant === "text" ? 18 : 16) : undefined,
       nativeTabBarFontFamily: nativeTabBarEnabled ? nativeTabBarStyle?.fontFamily : undefined,
       nativeTabBarBackgroundColor: nativeTabBarEnabled ? nativeTabBarStyle?.backgroundColor : undefined,
       nativeTabBarActiveTextColor: nativeTabBarEnabled ? nativeTabBarStyle?.activeTextColor : undefined,