@onekeyfe/react-native-pager-view 3.0.117 → 3.0.118

package/lib/module/CollapsiblePagerView.js

@@ -112,6 +112,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       onMountedPagesChanged: _onMountedPagesChanged,
       onPageSelected: _onPageSelected,
       layoutDirection,
+      initialPage: _initialPage,
       offscreenPageLimit,
       ...nativeProps
     } = this.props;
@@ -125,6 +126,7 @@ export class CollapsiblePagerView extends React.PureComponent {
         this.nativeRef = ref;
       },
       layoutDirection: deducedLayoutDirection,
+      initialPage: clampedPageIndex(this.props.initialPage ?? 0, pages.length),
       offscreenPageLimit: Math.max(1, offscreenPageLimit ?? 1),
       headerHeight: Math.max(0, Math.round(headerHeight)),
       stickyHeaderHeight: Math.max(0, Math.round(stickyHeaderHeight)),

package/lib/module/PagerView.web.js

@@ -3,13 +3,19 @@
 import React from "react";
 import { I18nManager, Keyboard, StyleSheet, View } from "react-native";
 import { jsx as _jsx } from "react/jsx-runtime";
+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));
+
 /**
  * Web fallback for the ordinary PagerView API. All pages stay mounted, matching
  * the package's pre-existing PagerView lifetime contract.
  */
 export class PagerView extends React.Component {
   state = {
-    selectedPage: Math.max(0, Math.trunc(this.props.initialPage ?? 0)),
+    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length),
     animateTransition: true
   };
   pointerStart = null;
@@ -18,7 +24,7 @@ export class PagerView extends React.Component {
     if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
       this.scrollEnabled = this.props.scrollEnabled ?? true;
     }
-    const pageCount = React.Children.count(this.props.children);
+    const pageCount = this.pages().length;
     if (pageCount > 0 && this.state.selectedPage >= pageCount) {
       this.setState({
         selectedPage: pageCount - 1,
@@ -40,10 +46,13 @@ export class PagerView extends React.Component {
       nativeEvent
     };
   }
+  pages() {
+    return React.Children.toArray(this.props.children);
+  }
   selectPage(selectedPage, animated) {
-    const pageCount = React.Children.count(this.props.children);
-    const position = Math.trunc(selectedPage);
-    if (position < 0 || position >= pageCount || position === this.state.selectedPage) {
+    const pageCount = this.pages().length;
+    const position = pageIndex(selectedPage);
+    if (position === null || position < 0 || position >= pageCount || position === this.state.selectedPage) {
       return;
     }
     this.props.onPageScrollStateChanged?.(this.nativeEvent({
@@ -87,7 +96,7 @@ export class PagerView extends React.Component {
     const isRTL = !vertical && (this.props.layoutDirection === "rtl" || (!this.props.layoutDirection || this.props.layoutDirection === "locale") && I18nManager.isRTL);
     const direction = Math.abs(delta) >= 40 ? delta < 0 ? 1 : -1 : 0;
     const next = this.state.selectedPage + (isRTL ? -direction : direction);
-    if (direction === 0 || next < 0 || next >= React.Children.count(this.props.children)) {
+    if (direction === 0 || next < 0 || next >= this.pages().length) {
       this.props.onPageScrollStateChanged?.(this.nativeEvent({
         pageScrollState: "idle"
       }));
@@ -97,7 +106,7 @@ export class PagerView extends React.Component {
   };
   render() {
     const {
-      children,
+      children: _children,
       style,
       orientation = "horizontal",
       pageMargin = 0,
@@ -115,7 +124,7 @@ export class PagerView extends React.Component {
       onPageScrollStateChanged: _onPageScrollStateChanged,
       ...viewProps
     } = this.props;
-    const pages = React.Children.toArray(children);
+    const pages = this.pages();
     const vertical = orientation === "vertical";
     const pageExtent = pages.length > 0 ? `${100 / pages.length}%` : "100%";
     const transform = vertical ? [{

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

@@ -43,6 +43,7 @@ export declare class PagerView extends React.Component<PagerViewProps, State> {
     setPageWithoutAnimation: (selectedPage: number) => void;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private nativeEvent;
+    private pages;
     private selectPage;
     private onTouchStart;
     private onTouchEnd;

package/package.json

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

package/src/CollapsiblePagerView.tsx

@@ -210,6 +210,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       onMountedPagesChanged: _onMountedPagesChanged,
       onPageSelected: _onPageSelected,
       layoutDirection,
+      initialPage: _initialPage,
       offscreenPageLimit,
       ...nativeProps
     } = this.props;
@@ -230,6 +231,10 @@ export class CollapsiblePagerView extends React.PureComponent<
           this.nativeRef = ref;
         }}
         layoutDirection={deducedLayoutDirection}
+        initialPage={clampedPageIndex(
+          this.props.initialPage ?? 0,
+          pages.length
+        )}
         offscreenPageLimit={Math.max(1, offscreenPageLimit ?? 1)}
         headerHeight={Math.max(0, Math.round(headerHeight))}
         stickyHeaderHeight={Math.max(0, Math.round(stickyHeaderHeight))}

package/src/PagerView.web.tsx

@@ -43,13 +43,27 @@ type State = Readonly<{
   animateTransition: boolean;
 }>;
 
+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)
+  );
+
 /**
  * Web fallback for the ordinary PagerView API. All pages stay mounted, matching
  * the package's pre-existing PagerView lifetime contract.
  */
 export class PagerView extends React.Component<PagerViewProps, State> {
   state: State = {
-    selectedPage: Math.max(0, Math.trunc(this.props.initialPage ?? 0)),
+    selectedPage: clampedPageIndex(
+      this.props.initialPage ?? 0,
+      React.Children.toArray(this.props.children).length
+    ),
     animateTransition: true,
   };
 
@@ -61,7 +75,7 @@ export class PagerView extends React.Component<PagerViewProps, State> {
       this.scrollEnabled = this.props.scrollEnabled ?? true;
     }
 
-    const pageCount = React.Children.count(this.props.children);
+    const pageCount = this.pages().length;
     if (pageCount > 0 && this.state.selectedPage >= pageCount) {
       this.setState({
         selectedPage: pageCount - 1,
@@ -86,10 +100,15 @@ export class PagerView extends React.Component<PagerViewProps, State> {
     return { nativeEvent } as ReactNative.NativeSyntheticEvent<T>;
   }
 
+  private pages() {
+    return React.Children.toArray(this.props.children);
+  }
+
   private selectPage(selectedPage: number, animated: boolean) {
-    const pageCount = React.Children.count(this.props.children);
-    const position = Math.trunc(selectedPage);
+    const pageCount = this.pages().length;
+    const position = pageIndex(selectedPage);
     if (
+      position === null ||
       position < 0 ||
       position >= pageCount ||
       position === this.state.selectedPage
@@ -159,7 +178,7 @@ export class PagerView extends React.Component<PagerViewProps, State> {
     if (
       direction === 0 ||
       next < 0 ||
-      next >= React.Children.count(this.props.children)
+      next >= this.pages().length
     ) {
       this.props.onPageScrollStateChanged?.(
         this.nativeEvent<PageScrollStateChangedNativeEventData>({
@@ -173,7 +192,7 @@ export class PagerView extends React.Component<PagerViewProps, State> {
 
   render() {
     const {
-      children,
+      children: _children,
       style,
       orientation = "horizontal",
       pageMargin = 0,
@@ -191,7 +210,7 @@ export class PagerView extends React.Component<PagerViewProps, State> {
       onPageScrollStateChanged: _onPageScrollStateChanged,
       ...viewProps
     } = this.props;
-    const pages = React.Children.toArray(children);
+    const pages = this.pages();
     const vertical = orientation === "vertical";
     const pageExtent = pages.length > 0 ? `${100 / pages.length}%` : "100%";
     const transform = vertical