@onekeyfe/react-native-pager-view 3.0.113 → 3.0.115

package/lib/module/CollapsiblePagerView.web.js

@@ -5,7 +5,18 @@ import { I18nManager, StyleSheet, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COLLAPSE_ANIMATION_NAME = "ok-collapsible-pager-collapse";
 const COLLAPSE_STYLE_ID = "ok-collapsible-pager-styles";
+const PAGER_HEADER_INSET = "--ok-collapsible-pager-header-inset";
+const PAGER_STICKY_INSET = "--ok-collapsible-pager-sticky-inset";
 let collapsiblePagerWebInstance = 0;
+const pageIndex = value => {
+  const index = Math.trunc(value);
+  return Number.isFinite(index) ? index : null;
+};
+const clampedPageIndex = (value, pageCount) => Math.min(Math.max(0, pageIndex(value) ?? 0), Math.max(0, pageCount - 1));
+const webElement = node => {
+  const element = node;
+  return element && typeof element.querySelector === "function" && typeof element.addEventListener === "function" ? element : null;
+};
 const timelineStyle = element => element.style;
 function ensureCollapseAnimation(document) {
   if (document.getElementById(COLLAPSE_STYLE_ID)) return;
@@ -22,18 +33,22 @@ const pageKey = (child, index) => {
 /** Web counterpart of the native collapsible pager contract. */
 export class CollapsiblePagerView extends React.PureComponent {
   state = {
-    selectedPage: Math.max(0, this.props.initialPage ?? 0),
+    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length),
     animateTransition: true
   };
   root = null;
+  track = null;
   touchStartX = null;
   touchStartY = null;
+  horizontalTouch = false;
   pageOffsets = new Map();
   pageHosts = new Map();
   sharedHeaderOffset = 0;
   scrollEnabled = this.props.scrollEnabled ?? true;
   lastMountSignature = null;
   configureFrame = null;
+  transitionTimer = null;
+  pageScrollState = "idle";
   configuredScrollElement = null;
   timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
   componentDidMount() {
@@ -45,6 +60,22 @@ export class CollapsiblePagerView extends React.PureComponent {
   componentDidUpdate(previousProps) {
     if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
       this.scrollEnabled = this.props.scrollEnabled ?? true;
+      if (!this.scrollEnabled) {
+        this.touchStartX = null;
+        this.touchStartY = null;
+        this.horizontalTouch = false;
+        this.finishPageTransition();
+      }
+    }
+    const pageCount = this.pages().length;
+    const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
+    if (selectedPage !== this.state.selectedPage) {
+      this.finishPageTransition();
+      this.setState({
+        selectedPage,
+        animateTransition: false
+      });
+      return;
     }
     this.scheduleScrollConfiguration();
     this.notifyMountedPagesChanged();
@@ -55,6 +86,11 @@ export class CollapsiblePagerView extends React.PureComponent {
       cancelAnimationFrame(this.configureFrame);
       this.configureFrame = null;
     }
+    if (this.transitionTimer !== null) {
+      clearTimeout(this.transitionTimer);
+      this.transitionTimer = null;
+    }
+    this.setTrack(null);
     this.restoreConfiguredScrollElement();
   }
   setPage = selectedPage => {
@@ -85,10 +121,47 @@ export class CollapsiblePagerView extends React.PureComponent {
       nativeEvent
     };
   }
+  emitPageScrollState(pageScrollState) {
+    if (pageScrollState === this.pageScrollState) return;
+    this.pageScrollState = pageScrollState;
+    this.props.onPageScrollStateChanged?.(this.nativeEvent({
+      pageScrollState
+    }));
+  }
+  finishPageTransition = () => {
+    if (this.transitionTimer !== null) {
+      clearTimeout(this.transitionTimer);
+      this.transitionTimer = null;
+    }
+    this.emitPageScrollState("idle");
+  };
+  beginPageTransition() {
+    if (this.transitionTimer !== null) clearTimeout(this.transitionTimer);
+    this.emitPageScrollState("settling");
+    this.transitionTimer = setTimeout(this.finishPageTransition, 320);
+  }
+  onTrackTransitionEnd = event => {
+    if (event.target === this.track && event.propertyName === "transform") {
+      this.finishPageTransition();
+    }
+  };
+  setTrack = node => {
+    const track = webElement(node);
+    if (track === this.track) return;
+    this.track?.removeEventListener("transitionend", this.onTrackTransitionEnd);
+    this.track = track;
+    this.track?.addEventListener("transitionend", this.onTrackTransitionEnd);
+  };
   pageScrollElement(index) {
     const pageHost = this.pageHosts.get(index);
     return pageHost?.querySelector(".ok-native-list-viewport, [data-collapsible-pager-scroll]") ?? pageHost;
   }
+  notifyInsetsChanged(element) {
+    const EventConstructor = element.ownerDocument.defaultView?.Event;
+    if (EventConstructor) {
+      element.dispatchEvent(new EventConstructor("ok-collapsible-pager-insets-changed"));
+    }
+  }
   restoreConfiguredScrollElement() {
     const configured = this.configuredScrollElement;
     if (!configured) return;
@@ -98,7 +171,10 @@ export class CollapsiblePagerView extends React.PureComponent {
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
     style.scrollTimelineAxis = configured.scrollTimelineAxis;
+    style.setProperty(PAGER_HEADER_INSET, configured.pagerHeaderInset);
+    style.setProperty(PAGER_STICKY_INSET, configured.pagerStickyInset);
     configured.element.removeAttribute("data-collapsible-pager-active");
+    this.notifyInsetsChanged(configured.element);
     this.configuredScrollElement = null;
   }
   configureActiveScrollElement = () => {
@@ -108,21 +184,35 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (this.configuredScrollElement?.element !== element) {
       this.restoreConfiguredScrollElement();
       const style = timelineStyle(element);
+      const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(element).paddingTop || style.paddingTop || "0px";
       this.configuredScrollElement = {
         element,
         paddingTop: style.paddingTop,
+        basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
         scrollTimelineName: style.scrollTimelineName,
-        scrollTimelineAxis: style.scrollTimelineAxis
+        scrollTimelineAxis: style.scrollTimelineAxis,
+        pagerHeaderInset: style.getPropertyValue(PAGER_HEADER_INSET),
+        pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET)
       };
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
     }
     const style = timelineStyle(element);
-    style.paddingTop = `${Math.max(0, this.props.headerHeight + this.props.stickyHeaderHeight)}px`;
+    const headerInset = Math.max(0, this.props.headerHeight);
+    const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
+    const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
+    const headerInsetValue = `${headerInset}px`;
+    const stickyInsetValue = `${stickyInset}px`;
+    const insetsChanged = style.paddingTop !== paddingTop || style.getPropertyValue(PAGER_HEADER_INSET) !== headerInsetValue || style.getPropertyValue(PAGER_STICKY_INSET) !== stickyInsetValue;
+    style.paddingTop = paddingTop;
     style.boxSizing = "border-box";
     style.scrollTimelineName = this.timelineName;
     style.scrollTimelineAxis = "block";
+    style.setProperty(PAGER_HEADER_INSET, headerInsetValue);
+    style.setProperty(PAGER_STICKY_INSET, stickyInsetValue);
     element.setAttribute("data-collapsible-pager-active", "true");
+    if (insetsChanged) this.notifyInsetsChanged(element);
   };
   scheduleScrollConfiguration() {
     if (this.configureFrame !== null) return;
@@ -152,21 +242,20 @@ export class CollapsiblePagerView extends React.PureComponent {
   }
   selectPage(selectedPage, animated) {
     const pages = this.pages();
-    if (selectedPage < 0 || selectedPage >= pages.length || selectedPage === this.state.selectedPage) {
+    const position = pageIndex(selectedPage);
+    if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
       return;
     }
     this.savePageOffset(this.state.selectedPage);
-    this.props.onPageScrollStateChanged?.(this.nativeEvent({
-      pageScrollState: animated ? "settling" : "idle"
-    }));
+    if (animated) this.beginPageTransition();else this.finishPageTransition();
     this.setState({
-      selectedPage,
+      selectedPage: position,
       animateTransition: animated
     }, () => {
       this.scheduleScrollConfiguration();
       const restore = () => {
         this.configureActiveScrollElement();
-        this.restorePageOffset(selectedPage);
+        this.restorePageOffset(position);
       };
       if (typeof requestAnimationFrame === "function") {
         requestAnimationFrame(restore);
@@ -174,17 +263,12 @@ export class CollapsiblePagerView extends React.PureComponent {
         setTimeout(restore, 0);
       }
       this.props.onPageSelected?.(this.nativeEvent({
-        position: selectedPage
+        position
       }));
       this.props.onPageScroll?.(this.nativeEvent({
-        position: selectedPage,
+        position,
         offset: 0
       }));
-      if (animated) {
-        this.props.onPageScrollStateChanged?.(this.nativeEvent({
-          pageScrollState: "idle"
-        }));
-      }
       this.notifyMountedPagesChanged();
       this.emitDiagnostics("page-selected");
     });
@@ -221,36 +305,68 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (!touch) return;
     this.touchStartX = touch.pageX;
     this.touchStartY = touch.pageY;
-    this.props.onPageScrollStateChanged?.(this.nativeEvent({
-      pageScrollState: "dragging"
-    }));
+    this.horizontalTouch = false;
+  };
+  onTouchMove = event => {
+    if (this.touchStartX == null || !this.scrollEnabled || this.horizontalTouch) return;
+    const touch = event.nativeEvent.touches[0];
+    if (!touch) return;
+    const deltaX = touch.pageX - this.touchStartX;
+    const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
+    if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+      this.horizontalTouch = true;
+      this.emitPageScrollState("dragging");
+    }
   };
   onTouchEnd = event => {
     if (this.touchStartX == null || !this.scrollEnabled) return;
     const touch = event.nativeEvent.changedTouches[0];
-    if (!touch) return;
+    if (!touch) {
+      this.onTouchCancel();
+      return;
+    }
     const delta = touch.pageX - this.touchStartX;
     const verticalDelta = touch.pageY - (this.touchStartY ?? touch.pageY);
     this.touchStartX = null;
     this.touchStartY = null;
-    const rtl = this.props.layoutDirection === "rtl" || !this.props.layoutDirection && I18nManager.isRTL;
+    const rtl = this.props.layoutDirection === "rtl" || (!this.props.layoutDirection || this.props.layoutDirection === "locale") && I18nManager.isRTL;
     const direction = Math.abs(delta) >= 40 && Math.abs(delta) > Math.abs(verticalDelta) ? delta < 0 ? 1 : -1 : 0;
     const next = this.state.selectedPage + (rtl ? -direction : direction);
     if (direction === 0 || next < 0 || next >= this.pages().length) {
-      this.props.onPageScrollStateChanged?.(this.nativeEvent({
-        pageScrollState: "idle"
-      }));
+      const wasHorizontal = this.horizontalTouch;
+      this.horizontalTouch = false;
+      if (wasHorizontal) this.finishPageTransition();
       return;
     }
+    this.horizontalTouch = false;
     this.selectPage(next, true);
   };
+  onTouchCancel = () => {
+    const wasHorizontal = this.horizontalTouch;
+    this.touchStartX = null;
+    this.touchStartY = null;
+    this.horizontalTouch = false;
+    if (wasHorizontal) this.finishPageTransition();
+  };
   render() {
     const {
+      children: _children,
       header,
       stickyHeader,
+      headerHeight: _headerHeight,
+      stickyHeaderHeight: _stickyHeaderHeight,
+      pageRetentionDistance: _pageRetentionDistance,
+      layoutDirection: _layoutDirection,
+      scrollEnabled: _scrollEnabled,
+      initialPage: _initialPage,
+      offscreenPageLimit: _offscreenPageLimit,
+      onPageScroll: _onPageScroll,
+      onPageSelected: _onPageSelected,
+      onPageScrollStateChanged: _onPageScrollStateChanged,
+      onCollapsibleStateChanged: _onCollapsibleStateChanged,
+      onMountedPagesChanged: _onMountedPagesChanged,
       style,
-      testID,
-      accessibilityLabel
+      ...viewProps
     } = this.props;
     const pages = this.pages();
     const keys = pages.map(pageKey);
@@ -274,14 +390,13 @@ export class CollapsiblePagerView extends React.PureComponent {
       transitionDuration: this.state.animateTransition ? "240ms" : "0ms"
     }];
     return /*#__PURE__*/_jsxs(View, {
+      ...viewProps,
       ref: node => {
-        this.root = node;
+        this.root = webElement(node);
       },
       style: [styles.root, {
         timelineScope: this.timelineName
       }, style],
-      testID: testID,
-      accessibilityLabel: accessibilityLabel,
       children: [/*#__PURE__*/_jsx(View, {
         style: [styles.header, {
           height: Math.max(0, this.props.headerHeight)
@@ -294,17 +409,16 @@ export class CollapsiblePagerView extends React.PureComponent {
         }, collapseAnimation],
         children: stickyHeader
       }), /*#__PURE__*/_jsx(View, {
+        ref: this.setTrack,
         style: trackStyle,
         onTouchStart: this.onTouchStart,
+        onTouchMove: this.onTouchMove,
         onTouchEnd: this.onTouchEnd,
-        onTouchCancel: () => {
-          this.touchStartX = null;
-          this.touchStartY = null;
-        },
+        onTouchCancel: this.onTouchCancel,
         children: pages.map((page, index) => /*#__PURE__*/_jsx(View, {
           ref: node => {
-            if (node) {
-              const host = node;
+            const host = webElement(node);
+            if (host) {
               host.inert = index !== this.state.selectedPage;
               this.pageHosts.set(index, host);
             } else {

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -45,6 +45,8 @@ export interface NativeProps extends ViewProps {
   layoutDirection?: WithDefault<"ltr" | "rtl", "ltr">;
   initialPage?: Int32;
   offscreenPageLimit?: Int32;
+  // OneKey patch: Preserve nested pager gesture coordination for collapsible pages.
+  nestedScrollEnabled?: WithDefault<boolean, false>;
   headerHeight?: Int32;
   stickyHeaderHeight?: Int32;
   pageKeys?: string;

package/lib/module/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { PagerView } from "./PagerView";
+import { PagerView } from './PagerView';
 export default PagerView;
 export * from "./usePagerView.js";
-export * from "./CollapsiblePagerView";
+export * from './CollapsiblePagerView';
 //# sourceMappingURL=index.js.map

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

@@ -52,14 +52,18 @@ type State = {
 export declare class CollapsiblePagerView extends React.PureComponent<CollapsiblePagerViewProps, State> {
     state: State;
     private root;
+    private track;
     private touchStartX;
     private touchStartY;
+    private horizontalTouch;
     private pageOffsets;
     private pageHosts;
     private sharedHeaderOffset;
     private scrollEnabled;
     private lastMountSignature;
     private configureFrame;
+    private transitionTimer;
+    private pageScrollState;
     private configuredScrollElement;
     private readonly timelineName;
     componentDidMount(): void;
@@ -72,7 +76,13 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private retentionDistance;
     private mountedPages;
     private nativeEvent;
+    private emitPageScrollState;
+    private finishPageTransition;
+    private beginPageTransition;
+    private onTrackTransitionEnd;
+    private setTrack;
     private pageScrollElement;
+    private notifyInsetsChanged;
     private restoreConfiguredScrollElement;
     private configureActiveScrollElement;
     private scheduleScrollConfiguration;
@@ -83,7 +93,9 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private notifyMountedPagesChanged;
     private emitDiagnostics;
     private onTouchStart;
+    private onTouchMove;
     private onTouchEnd;
+    private onTouchCancel;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export type CollapsiblePagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<OnPageScrollEventData>;

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

@@ -29,6 +29,7 @@ export interface NativeProps extends ViewProps {
     layoutDirection?: WithDefault<"ltr" | "rtl", "ltr">;
     initialPage?: Int32;
     offscreenPageLimit?: Int32;
+    nestedScrollEnabled?: WithDefault<boolean, false>;
     headerHeight?: Int32;
     stickyHeaderHeight?: Int32;
     pageKeys?: string;

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

@@ -1,9 +1,9 @@
-import type * as ReactNative from "react-native";
-import { PagerView } from "./PagerView";
+import type * as ReactNative from 'react-native';
+import { PagerView } from './PagerView';
 export default PagerView;
-export * from "./usePagerView";
-export * from "./CollapsiblePagerView";
-import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from "./PagerViewNativeComponent";
+export * from './usePagerView';
+export * from './CollapsiblePagerView';
+import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from './PagerViewNativeComponent';
 export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
 export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
 export type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.113",
+  "version": "3.0.115",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",

package/src/CollapsiblePagerView.tsx

@@ -55,6 +55,17 @@ type State = {
   selectedPage: number;
 };
 
+const pageIndex = (value: number) => {
+  const index = Math.trunc(value);
+  return Number.isFinite(index) ? index : null;
+};
+
+const clampedPageIndex = (value: number, pageCount: number) =>
+  Math.min(
+    Math.max(0, pageIndex(value) ?? 0),
+    Math.max(0, pageCount - 1)
+  );
+
 const pageKey = (child: React.ReactNode, index: number) => {
   if (React.isValidElement(child) && child.key != null) {
     return String(child.key);
@@ -72,7 +83,10 @@ export class CollapsiblePagerView extends React.PureComponent<
   State
 > {
   state: State = {
-    selectedPage: Math.max(0, this.props.initialPage ?? 0),
+    selectedPage: clampedPageIndex(
+      this.props.initialPage ?? 0,
+      React.Children.toArray(this.props.children).length
+    ),
   };
 
   private nativeRef: React.ElementRef<
@@ -86,20 +100,38 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   componentDidUpdate() {
+    const pageCount = this.pages().length;
+    const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
+    if (selectedPage !== this.state.selectedPage) {
+      this.setState({ selectedPage });
+      return;
+    }
     this.notifyMountedPagesChanged();
   }
 
   public setPage = (selectedPage: number) => {
-    if (this.nativeRef) {
-      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, selectedPage);
+    const position = pageIndex(selectedPage);
+    if (
+      this.nativeRef &&
+      position !== null &&
+      position >= 0 &&
+      position < this.pages().length
+    ) {
+      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
     }
   };
 
   public setPageWithoutAnimation = (selectedPage: number) => {
-    if (this.nativeRef) {
+    const position = pageIndex(selectedPage);
+    if (
+      this.nativeRef &&
+      position !== null &&
+      position >= 0 &&
+      position < this.pages().length
+    ) {
       CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(
         this.nativeRef,
-        selectedPage
+        position
       );
     }
   };
@@ -157,7 +189,10 @@ export class CollapsiblePagerView extends React.PureComponent<
   private onPageSelected = (
     event: ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>
   ) => {
-    const position = Math.max(0, Math.trunc(event.nativeEvent.position));
+    const position = clampedPageIndex(
+      event.nativeEvent.position,
+      this.pages().length
+    );
     if (position !== this.state.selectedPage) {
       this.setState({ selectedPage: position }, this.notifyMountedPagesChanged);
     }