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

package/src/CollapsiblePagerView.tsx

@@ -1,258 +0,0 @@
-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>;