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

package/src/CollapsiblePagerView.tsx

@@ -0,0 +1,258 @@
+import React from "react";
+import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import type * as ReactNative from "react-native";
+
+import CollapsiblePagerViewNativeComponent, {
+  Commands as CollapsiblePagerViewNativeCommands,
+  type NativeProps,
+  type OnCollapsibleStateChangedEventData,
+} from "./CollapsiblePagerViewNativeComponent";
+import type {
+  OnPageScrollEventData,
+  OnPageScrollStateChangedEventData,
+  OnPageSelectedEventData,
+} from "./PagerViewNativeComponent";
+
+export type CollapsiblePagerDiagnostics =
+  ReactNative.NativeSyntheticEvent<OnCollapsibleStateChangedEventData>;
+
+export type CollapsiblePagerMountState = Readonly<{
+  position: number;
+  mountedPages: readonly number[];
+  pageKeys: readonly string[];
+}>;
+
+export interface CollapsiblePagerViewProps
+  extends Omit<
+    NativeProps,
+    | "children"
+    | "headerHeight"
+    | "stickyHeaderHeight"
+    | "pageKeys"
+    | "retainedPages"
+    | "layoutDirection"
+  > {
+  /** Collapsible content rendered above the sticky bar. */
+  header: React.ReactNode;
+  /** Bar which remains pinned after the header has collapsed. */
+  stickyHeader: React.ReactNode;
+  /** Measured header height. It may be updated after an onLayout measurement. */
+  headerHeight: number;
+  /** Measured sticky bar height. */
+  stickyHeaderHeight: number;
+  /**
+   * Number of pages retained on either side of the selected page. Page slots
+   * remain stable, while distant React/native list subtrees are really
+   * unmounted. Defaults to one adjacent page.
+   */
+  pageRetentionDistance?: number;
+  layoutDirection?: "ltr" | "rtl" | "locale";
+  children?: React.ReactNode;
+  onMountedPagesChanged?: (state: CollapsiblePagerMountState) => void;
+}
+
+type State = {
+  selectedPage: number;
+};
+
+const pageKey = (child: React.ReactNode, index: number) => {
+  if (React.isValidElement(child) && child.key != null) {
+    return String(child.key);
+  }
+  return `page-${index}`;
+};
+
+/**
+ * Pager variant whose vertical header coordination is performed by the native
+ * scrolling containers. React participates only at settled page boundaries to
+ * retain the selected/adjacent heavy page subtrees.
+ */
+export class CollapsiblePagerView extends React.PureComponent<
+  CollapsiblePagerViewProps,
+  State
+> {
+  state: State = {
+    selectedPage: Math.max(0, this.props.initialPage ?? 0),
+  };
+
+  private nativeRef: React.ElementRef<
+    typeof CollapsiblePagerViewNativeComponent
+  > | null = null;
+
+  private lastMountSignature: string | null = null;
+
+  componentDidMount() {
+    this.notifyMountedPagesChanged();
+  }
+
+  componentDidUpdate() {
+    this.notifyMountedPagesChanged();
+  }
+
+  public setPage = (selectedPage: number) => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, selectedPage);
+    }
+  };
+
+  public setPageWithoutAnimation = (selectedPage: number) => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(
+        this.nativeRef,
+        selectedPage
+      );
+    }
+  };
+
+  public setScrollEnabled = (scrollEnabled: boolean) => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(
+        this.nativeRef,
+        scrollEnabled
+      );
+    }
+  };
+
+  private pages() {
+    return React.Children.toArray(this.props.children);
+  }
+
+  private retentionDistance() {
+    return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
+  }
+
+  private mountedPages(pageCount = this.pages().length) {
+    const distance = this.retentionDistance();
+    const selected = Math.min(
+      Math.max(0, this.state.selectedPage),
+      Math.max(0, pageCount - 1)
+    );
+    const mounted: number[] = [];
+    for (let index = 0; index < pageCount; index += 1) {
+      if (Math.abs(index - selected) <= distance) {
+        mounted.push(index);
+      }
+    }
+    return mounted;
+  }
+
+  private notifyMountedPagesChanged = () => {
+    if (!this.props.onMountedPagesChanged) {
+      return;
+    }
+    const pages = this.pages();
+    const state = {
+      position: this.state.selectedPage,
+      mountedPages: this.mountedPages(pages.length),
+      pageKeys: pages.map(pageKey),
+    };
+    const signature = JSON.stringify(state);
+    if (signature === this.lastMountSignature) {
+      return;
+    }
+    this.lastMountSignature = signature;
+    this.props.onMountedPagesChanged(state);
+  };
+
+  private onPageSelected = (
+    event: ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>
+  ) => {
+    const position = Math.max(0, Math.trunc(event.nativeEvent.position));
+    if (position !== this.state.selectedPage) {
+      this.setState({ selectedPage: position }, this.notifyMountedPagesChanged);
+    }
+    this.props.onPageSelected?.(event);
+  };
+
+  render() {
+    const {
+      children: _children,
+      header,
+      stickyHeader,
+      headerHeight,
+      stickyHeaderHeight,
+      pageRetentionDistance: _pageRetentionDistance,
+      onMountedPagesChanged: _onMountedPagesChanged,
+      onPageSelected: _onPageSelected,
+      layoutDirection,
+      offscreenPageLimit,
+      ...nativeProps
+    } = this.props;
+    const pages = this.pages();
+    const pageKeys = pages.map(pageKey);
+    const retained = new Set(this.mountedPages(pages.length));
+    const deducedLayoutDirection =
+      !layoutDirection || layoutDirection === "locale"
+        ? I18nManager.isRTL
+          ? "rtl"
+          : "ltr"
+        : layoutDirection;
+
+    return (
+      <CollapsiblePagerViewNativeComponent
+        {...nativeProps}
+        ref={(ref) => {
+          this.nativeRef = ref;
+        }}
+        layoutDirection={deducedLayoutDirection}
+        offscreenPageLimit={Math.max(1, offscreenPageLimit ?? 1)}
+        headerHeight={Math.max(0, Math.round(headerHeight))}
+        stickyHeaderHeight={Math.max(0, Math.round(stickyHeaderHeight))}
+        pageKeys={JSON.stringify(pageKeys)}
+        retainedPages={JSON.stringify([...retained])}
+        onPageSelected={this.onPageSelected}
+      >
+        <View
+          key="collapsible-header"
+          collapsable={false}
+          pointerEvents="box-none"
+          style={[styles.slot, { bottom: undefined, height: Math.max(0, Math.round(headerHeight)) }]}
+        >
+          {header}
+        </View>
+        <View
+          key="sticky-header"
+          collapsable={false}
+          pointerEvents="box-none"
+          style={[
+            styles.slot,
+            {
+              top: Math.max(0, Math.round(headerHeight)),
+              bottom: undefined,
+              height: Math.max(0, Math.round(stickyHeaderHeight)),
+            },
+          ]}
+        >
+          {stickyHeader}
+        </View>
+        {pages.map((page, index) => (
+          <View
+            key={pageKeys[index]}
+            collapsable={false}
+            style={[
+              styles.slot,
+              // Android translates the expanded pager while consuming header scroll.
+              // Keep Yoga's page bounds aligned with that native viewport.
+              Platform.OS === "android"
+                ? { bottom: -Math.max(0, Math.round(headerHeight)) }
+                : null,
+            ]}
+          >
+            {retained.has(index) ? page : null}
+          </View>
+        ))}
+      </CollapsiblePagerViewNativeComponent>
+    );
+  }
+}
+
+const styles = {
+  slot: StyleSheet.absoluteFill,
+};
+
+export type CollapsiblePagerViewOnPageScrollEvent =
+  ReactNative.NativeSyntheticEvent<OnPageScrollEventData>;
+export type CollapsiblePagerViewOnPageSelectedEvent =
+  ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>;
+export type CollapsiblePagerViewOnPageScrollStateChangedEvent =
+  ReactNative.NativeSyntheticEvent<OnPageScrollStateChangedEventData>;