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

package/src/PagerView.web.tsx

@@ -1,280 +0,0 @@
-import React from "react";
-import { I18nManager, Keyboard, StyleSheet, View } from "react-native";
-import type * as ReactNative from "react-native";
-
-export type PagerViewOnPageScrollEventData = Readonly<{
-  position: number;
-  offset: number;
-}>;
-
-export type PagerViewOnPageSelectedEventData = Readonly<{
-  position: number;
-}>;
-
-export type PageScrollStateChangedNativeEventData = Readonly<{
-  pageScrollState: "idle" | "dragging" | "settling";
-}>;
-
-export interface PagerViewProps extends ReactNative.ViewProps {
-  scrollEnabled?: boolean;
-  layoutDirection?: "ltr" | "rtl" | "locale";
-  initialPage?: number;
-  orientation?: "horizontal" | "vertical";
-  offscreenPageLimit?: number;
-  pageMargin?: number;
-  overScrollMode?: "auto" | "always" | "never";
-  overdrag?: boolean;
-  keyboardDismissMode?: "none" | "on-drag";
-  scrollSensitivity?: number;
-  nestedScrollEnabled?: boolean;
-  onPageScroll?: (
-    event: ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>
-  ) => void;
-  onPageSelected?: (
-    event: ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>
-  ) => void;
-  onPageScrollStateChanged?: (
-    event: ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>
-  ) => void;
-}
-
-type State = Readonly<{
-  selectedPage: number;
-  animateTransition: boolean;
-}>;
-
-/**
- * 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)),
-    animateTransition: true,
-  };
-
-  private pointerStart: Readonly<{ x: number; y: number }> | null = null;
-  private scrollEnabled = this.props.scrollEnabled ?? true;
-
-  componentDidUpdate(previousProps: PagerViewProps) {
-    if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
-      this.scrollEnabled = this.props.scrollEnabled ?? true;
-    }
-
-    const pageCount = React.Children.count(this.props.children);
-    if (pageCount > 0 && this.state.selectedPage >= pageCount) {
-      this.setState({
-        selectedPage: pageCount - 1,
-        animateTransition: false,
-      });
-    }
-  }
-
-  public setPage = (selectedPage: number) => {
-    this.selectPage(selectedPage, true);
-  };
-
-  public setPageWithoutAnimation = (selectedPage: number) => {
-    this.selectPage(selectedPage, false);
-  };
-
-  public setScrollEnabled = (scrollEnabled: boolean) => {
-    this.scrollEnabled = scrollEnabled;
-  };
-
-  private nativeEvent<T>(nativeEvent: T) {
-    return { nativeEvent } as ReactNative.NativeSyntheticEvent<T>;
-  }
-
-  private selectPage(selectedPage: number, animated: boolean) {
-    const pageCount = React.Children.count(this.props.children);
-    const position = Math.trunc(selectedPage);
-    if (
-      position < 0 ||
-      position >= pageCount ||
-      position === this.state.selectedPage
-    ) {
-      return;
-    }
-
-    this.props.onPageScrollStateChanged?.(
-      this.nativeEvent<PageScrollStateChangedNativeEventData>({
-        pageScrollState: animated ? "settling" : "idle",
-      })
-    );
-    this.setState(
-      { selectedPage: position, animateTransition: animated },
-      () => {
-        this.props.onPageScroll?.(
-          this.nativeEvent<PagerViewOnPageScrollEventData>({
-            position,
-            offset: 0,
-          })
-        );
-        this.props.onPageSelected?.(
-          this.nativeEvent<PagerViewOnPageSelectedEventData>({ position })
-        );
-        if (animated) {
-          this.props.onPageScrollStateChanged?.(
-            this.nativeEvent<PageScrollStateChangedNativeEventData>({
-              pageScrollState: "idle",
-            })
-          );
-        }
-      }
-    );
-  }
-
-  private onTouchStart = (event: ReactNative.GestureResponderEvent) => {
-    if (!this.scrollEnabled) return;
-    this.pointerStart = {
-      x: event.nativeEvent.pageX,
-      y: event.nativeEvent.pageY,
-    };
-    if (this.props.keyboardDismissMode === "on-drag") Keyboard.dismiss();
-    this.props.onPageScrollStateChanged?.(
-      this.nativeEvent<PageScrollStateChangedNativeEventData>({
-        pageScrollState: "dragging",
-      })
-    );
-  };
-
-  private onTouchEnd = (event: ReactNative.GestureResponderEvent) => {
-    const start = this.pointerStart;
-    this.pointerStart = null;
-    if (!start || !this.scrollEnabled) return;
-
-    const vertical = this.props.orientation === "vertical";
-    const delta = vertical
-      ? event.nativeEvent.pageY - start.y
-      : event.nativeEvent.pageX - start.x;
-    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)
-    ) {
-      this.props.onPageScrollStateChanged?.(
-        this.nativeEvent<PageScrollStateChangedNativeEventData>({
-          pageScrollState: "idle",
-        })
-      );
-      return;
-    }
-    this.selectPage(next, true);
-  };
-
-  render() {
-    const {
-      children,
-      style,
-      orientation = "horizontal",
-      pageMargin = 0,
-      scrollEnabled: _scrollEnabled,
-      initialPage: _initialPage,
-      layoutDirection: _layoutDirection,
-      offscreenPageLimit: _offscreenPageLimit,
-      overScrollMode: _overScrollMode,
-      overdrag: _overdrag,
-      keyboardDismissMode: _keyboardDismissMode,
-      scrollSensitivity: _scrollSensitivity,
-      nestedScrollEnabled: _nestedScrollEnabled,
-      onPageScroll: _onPageScroll,
-      onPageSelected: _onPageSelected,
-      onPageScrollStateChanged: _onPageScrollStateChanged,
-      ...viewProps
-    } = this.props;
-    const pages = React.Children.toArray(children);
-    const vertical = orientation === "vertical";
-    const pageExtent = pages.length > 0 ? `${100 / pages.length}%` : "100%";
-    const transform = vertical
-      ? [
-          {
-            translateY: `${
-              (-this.state.selectedPage * 100) / Math.max(1, pages.length)
-            }%`,
-          },
-        ]
-      : [
-          {
-            translateX: `${
-              (-this.state.selectedPage * 100) / Math.max(1, pages.length)
-            }%`,
-          },
-        ];
-
-    return (
-      <View {...viewProps} style={[styles.root, style]}>
-        <View
-          style={[
-            styles.track,
-            vertical ? styles.verticalTrack : styles.horizontalTrack,
-            vertical
-              ? { height: `${Math.max(1, pages.length) * 100}%` }
-              : { width: `${Math.max(1, pages.length) * 100}%` },
-            {
-              transform,
-              transitionProperty: "transform",
-              transitionDuration: this.state.animateTransition
-                ? "240ms"
-                : "0ms",
-            } as never,
-          ]}
-          onTouchStart={this.onTouchStart}
-          onTouchEnd={this.onTouchEnd}
-        >
-          {pages.map((page, index) => (
-            <View
-              key={React.isValidElement(page) ? page.key ?? index : index}
-              style={[
-                styles.page,
-                vertical
-                  ? { height: pageExtent, paddingVertical: pageMargin / 2 }
-                  : { width: pageExtent, paddingHorizontal: pageMargin / 2 },
-              ]}
-            >
-              {page}
-            </View>
-          ))}
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  root: {
-    overflow: "hidden",
-  },
-  track: {
-    flex: 1,
-  },
-  horizontalTrack: {
-    flexDirection: "row",
-    height: "100%",
-  },
-  verticalTrack: {
-    flexDirection: "column",
-    width: "100%",
-  },
-  page: {
-    flexShrink: 0,
-    minWidth: 0,
-    minHeight: 0,
-    overflow: "hidden",
-  },
-});
-
-export type PagerViewOnPageScrollEvent =
-  ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
-export type PagerViewOnPageSelectedEvent =
-  ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
-export type PageScrollStateChangedNativeEvent =
-  ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;

package/src/index.web.tsx

@@ -1,12 +0,0 @@
-export { PagerView as default, PagerView } from "./PagerView.web";
-export type {
-  PagerViewProps,
-  PagerViewOnPageScrollEvent,
-  PagerViewOnPageScrollEventData,
-  PagerViewOnPageSelectedEvent,
-  PagerViewOnPageSelectedEventData,
-  PageScrollStateChangedNativeEvent,
-  PageScrollStateChangedNativeEventData,
-} from "./PagerView.web";
-export * from "./usePagerView";
-export * from "./CollapsiblePagerView.web";