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

package/lib/module/CollapsiblePagerView.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import React from "react";
+import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import CollapsiblePagerViewNativeComponent, { Commands as CollapsiblePagerViewNativeCommands } from "./CollapsiblePagerViewNativeComponent";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pageKey = (child, index) => {
+  if (/*#__PURE__*/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 {
+  state = {
+    selectedPage: Math.max(0, this.props.initialPage ?? 0)
+  };
+  nativeRef = null;
+  lastMountSignature = null;
+  componentDidMount() {
+    this.notifyMountedPagesChanged();
+  }
+  componentDidUpdate() {
+    this.notifyMountedPagesChanged();
+  }
+  setPage = selectedPage => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, selectedPage);
+    }
+  };
+  setPageWithoutAnimation = selectedPage => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, selectedPage);
+    }
+  };
+  setScrollEnabled = scrollEnabled => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(this.nativeRef, scrollEnabled);
+    }
+  };
+  pages() {
+    return React.Children.toArray(this.props.children);
+  }
+  retentionDistance() {
+    return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
+  }
+  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 = [];
+    for (let index = 0; index < pageCount; index += 1) {
+      if (Math.abs(index - selected) <= distance) {
+        mounted.push(index);
+      }
+    }
+    return mounted;
+  }
+  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);
+  };
+  onPageSelected = event => {
+    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 /*#__PURE__*/_jsxs(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,
+      children: [/*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        pointerEvents: "box-none",
+        style: [styles.slot, {
+          bottom: undefined,
+          height: Math.max(0, Math.round(headerHeight))
+        }],
+        children: header
+      }, "collapsible-header"), /*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        pointerEvents: "box-none",
+        style: [styles.slot, {
+          top: Math.max(0, Math.round(headerHeight)),
+          bottom: undefined,
+          height: Math.max(0, Math.round(stickyHeaderHeight))
+        }],
+        children: stickyHeader
+      }, "sticky-header"), pages.map((page, index) => /*#__PURE__*/_jsx(View, {
+        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],
+        children: retained.has(index) ? page : null
+      }, pageKeys[index]))]
+    });
+  }
+}
+const styles = {
+  slot: StyleSheet.absoluteFill
+};
+//# sourceMappingURL=CollapsiblePagerView.js.map

package/lib/module/CollapsiblePagerView.web.js

@@ -0,0 +1,364 @@
+"use strict";
+
+import React from "react";
+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";
+let collapsiblePagerWebInstance = 0;
+const timelineStyle = element => element.style;
+function ensureCollapseAnimation(document) {
+  if (document.getElementById(COLLAPSE_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = COLLAPSE_STYLE_ID;
+  style.textContent = `@keyframes ${COLLAPSE_ANIMATION_NAME}{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--ok-collapsible-header-height)))}}`;
+  document.head.appendChild(style);
+}
+const pageKey = (child, index) => {
+  if (/*#__PURE__*/React.isValidElement(child) && child.key != null) return String(child.key);
+  return `page-${index}`;
+};
+
+/** Web counterpart of the native collapsible pager contract. */
+export class CollapsiblePagerView extends React.PureComponent {
+  state = {
+    selectedPage: Math.max(0, this.props.initialPage ?? 0),
+    animateTransition: true
+  };
+  root = null;
+  touchStartX = null;
+  touchStartY = null;
+  pageOffsets = new Map();
+  pageHosts = new Map();
+  sharedHeaderOffset = 0;
+  scrollEnabled = this.props.scrollEnabled ?? true;
+  lastMountSignature = null;
+  configureFrame = null;
+  configuredScrollElement = null;
+  timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
+  componentDidMount() {
+    if (this.root) ensureCollapseAnimation(this.root.ownerDocument);
+    this.scheduleScrollConfiguration();
+    this.notifyMountedPagesChanged();
+    this.emitDiagnostics("mounted");
+  }
+  componentDidUpdate(previousProps) {
+    if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
+      this.scrollEnabled = this.props.scrollEnabled ?? true;
+    }
+    this.scheduleScrollConfiguration();
+    this.notifyMountedPagesChanged();
+  }
+  componentWillUnmount() {
+    this.savePageOffset(this.state.selectedPage);
+    if (this.configureFrame !== null) {
+      cancelAnimationFrame(this.configureFrame);
+      this.configureFrame = null;
+    }
+    this.restoreConfiguredScrollElement();
+  }
+  setPage = selectedPage => {
+    this.selectPage(selectedPage, true);
+  };
+  setPageWithoutAnimation = selectedPage => {
+    this.selectPage(selectedPage, false);
+  };
+  setScrollEnabled = scrollEnabled => {
+    this.scrollEnabled = scrollEnabled;
+  };
+  pages() {
+    return React.Children.toArray(this.props.children);
+  }
+  retentionDistance() {
+    return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
+  }
+  mountedPages(pageCount = this.pages().length, selected = this.state.selectedPage) {
+    const mounted = [];
+    const distance = this.retentionDistance();
+    for (let index = 0; index < pageCount; index += 1) {
+      if (Math.abs(index - selected) <= distance) mounted.push(index);
+    }
+    return mounted;
+  }
+  nativeEvent(nativeEvent) {
+    return {
+      nativeEvent
+    };
+  }
+  pageScrollElement(index) {
+    const pageHost = this.pageHosts.get(index);
+    return pageHost?.querySelector(".ok-native-list-viewport, [data-collapsible-pager-scroll]") ?? pageHost;
+  }
+  restoreConfiguredScrollElement() {
+    const configured = this.configuredScrollElement;
+    if (!configured) return;
+    configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
+    const style = timelineStyle(configured.element);
+    style.paddingTop = configured.paddingTop;
+    style.boxSizing = configured.boxSizing;
+    style.scrollTimelineName = configured.scrollTimelineName;
+    style.scrollTimelineAxis = configured.scrollTimelineAxis;
+    configured.element.removeAttribute("data-collapsible-pager-active");
+    this.configuredScrollElement = null;
+  }
+  configureActiveScrollElement = () => {
+    this.configureFrame = null;
+    const element = this.pageScrollElement(this.state.selectedPage);
+    if (!element) return;
+    if (this.configuredScrollElement?.element !== element) {
+      this.restoreConfiguredScrollElement();
+      const style = timelineStyle(element);
+      this.configuredScrollElement = {
+        element,
+        paddingTop: style.paddingTop,
+        boxSizing: style.boxSizing,
+        scrollTimelineName: style.scrollTimelineName,
+        scrollTimelineAxis: style.scrollTimelineAxis
+      };
+      element.addEventListener("scrollend", this.onVerticalScrollSettled);
+    }
+    const style = timelineStyle(element);
+    style.paddingTop = `${Math.max(0, this.props.headerHeight + this.props.stickyHeaderHeight)}px`;
+    style.boxSizing = "border-box";
+    style.scrollTimelineName = this.timelineName;
+    style.scrollTimelineAxis = "block";
+    element.setAttribute("data-collapsible-pager-active", "true");
+  };
+  scheduleScrollConfiguration() {
+    if (this.configureFrame !== null) return;
+    if (typeof requestAnimationFrame === "function") {
+      this.configureFrame = requestAnimationFrame(this.configureActiveScrollElement);
+    } else {
+      this.configureActiveScrollElement();
+    }
+  }
+  onVerticalScrollSettled = () => {
+    this.savePageOffset(this.state.selectedPage);
+    this.emitDiagnostics("scroll-settled");
+  };
+  savePageOffset(index) {
+    const key = this.pages().map(pageKey)[index];
+    const scrollElement = this.pageScrollElement(index);
+    if (key && scrollElement) {
+      this.pageOffsets.set(key, scrollElement.scrollTop);
+      this.sharedHeaderOffset = Math.min(Math.max(scrollElement.scrollTop, 0), Math.max(0, this.props.headerHeight));
+    }
+  }
+  restorePageOffset(index) {
+    const key = this.pages().map(pageKey)[index];
+    const scrollElement = this.pageScrollElement(index);
+    if (!key || !scrollElement) return;
+    scrollElement.scrollTop = Math.max(this.pageOffsets.get(key) ?? this.sharedHeaderOffset, this.sharedHeaderOffset);
+  }
+  selectPage(selectedPage, animated) {
+    const pages = this.pages();
+    if (selectedPage < 0 || selectedPage >= pages.length || selectedPage === this.state.selectedPage) {
+      return;
+    }
+    this.savePageOffset(this.state.selectedPage);
+    this.props.onPageScrollStateChanged?.(this.nativeEvent({
+      pageScrollState: animated ? "settling" : "idle"
+    }));
+    this.setState({
+      selectedPage,
+      animateTransition: animated
+    }, () => {
+      this.scheduleScrollConfiguration();
+      const restore = () => {
+        this.configureActiveScrollElement();
+        this.restorePageOffset(selectedPage);
+      };
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(restore);
+      } else {
+        setTimeout(restore, 0);
+      }
+      this.props.onPageSelected?.(this.nativeEvent({
+        position: selectedPage
+      }));
+      this.props.onPageScroll?.(this.nativeEvent({
+        position: selectedPage,
+        offset: 0
+      }));
+      if (animated) {
+        this.props.onPageScrollStateChanged?.(this.nativeEvent({
+          pageScrollState: "idle"
+        }));
+      }
+      this.notifyMountedPagesChanged();
+      this.emitDiagnostics("page-selected");
+    });
+  }
+  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);
+  };
+  emitDiagnostics(reason) {
+    const pages = this.pages();
+    const retainedPages = this.mountedPages(pages.length);
+    this.props.onCollapsibleStateChanged?.(this.nativeEvent({
+      position: this.state.selectedPage,
+      headerOffset: Math.min(Math.max(this.pageScrollElement(this.state.selectedPage)?.scrollTop ?? 0, 0), Math.max(0, this.props.headerHeight)),
+      nativePageCount: pages.length,
+      attachedPageCount: retainedPages.length,
+      observedScrollableCount: retainedPages.reduce((count, index) => count + (this.pageScrollElement(index) ? 1 : 0), 0),
+      retainedPages: JSON.stringify(retainedPages),
+      reason
+    }));
+  }
+  onTouchStart = event => {
+    if (!this.scrollEnabled) return;
+    const touch = event.nativeEvent.touches[0];
+    if (!touch) return;
+    this.touchStartX = touch.pageX;
+    this.touchStartY = touch.pageY;
+    this.props.onPageScrollStateChanged?.(this.nativeEvent({
+      pageScrollState: "dragging"
+    }));
+  };
+  onTouchEnd = event => {
+    if (this.touchStartX == null || !this.scrollEnabled) return;
+    const touch = event.nativeEvent.changedTouches[0];
+    if (!touch) 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 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"
+      }));
+      return;
+    }
+    this.selectPage(next, true);
+  };
+  render() {
+    const {
+      header,
+      stickyHeader,
+      style,
+      testID,
+      accessibilityLabel
+    } = this.props;
+    const pages = this.pages();
+    const keys = pages.map(pageKey);
+    const retained = new Set(this.mountedPages(pages.length));
+    const pageWidth = pages.length > 0 ? `${100 / pages.length}%` : "100%";
+    const collapseAnimation = {
+      "--ok-collapsible-header-height": `${Math.max(0, this.props.headerHeight)}px`,
+      animationName: COLLAPSE_ANIMATION_NAME,
+      animationDuration: "auto",
+      animationFillMode: "both",
+      animationTimingFunction: "linear",
+      animationTimeline: this.timelineName,
+      animationRange: `0px ${Math.max(1, this.props.headerHeight)}px`
+    };
+    const trackStyle = [styles.track, {
+      width: `${Math.max(1, pages.length) * 100}%`,
+      transform: [{
+        translateX: `${-this.state.selectedPage * 100 / Math.max(1, pages.length)}%`
+      }],
+      transitionProperty: "transform",
+      transitionDuration: this.state.animateTransition ? "240ms" : "0ms"
+    }];
+    return /*#__PURE__*/_jsxs(View, {
+      ref: node => {
+        this.root = 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)
+        }, collapseAnimation],
+        children: header
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.sticky, {
+          top: Math.max(0, this.props.headerHeight),
+          height: Math.max(0, this.props.stickyHeaderHeight)
+        }, collapseAnimation],
+        children: stickyHeader
+      }), /*#__PURE__*/_jsx(View, {
+        style: trackStyle,
+        onTouchStart: this.onTouchStart,
+        onTouchEnd: this.onTouchEnd,
+        onTouchCancel: () => {
+          this.touchStartX = null;
+          this.touchStartY = null;
+        },
+        children: pages.map((page, index) => /*#__PURE__*/_jsx(View, {
+          ref: node => {
+            if (node) {
+              const host = node;
+              host.inert = index !== this.state.selectedPage;
+              this.pageHosts.set(index, host);
+            } else {
+              this.pageHosts.delete(index);
+            }
+          },
+          style: [styles.page, {
+            width: pageWidth
+          }],
+          "aria-hidden": index !== this.state.selectedPage,
+          children: retained.has(index) ? page : null
+        }, keys[index]))
+      })]
+    });
+  }
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    overflow: "hidden",
+    position: "relative"
+  },
+  header: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: 3,
+    overflow: "hidden"
+  },
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 4,
+    overflow: "hidden"
+  },
+  track: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    touchAction: "pan-y"
+  },
+  page: {
+    flexShrink: 0,
+    minWidth: 0,
+    minHeight: 0,
+    height: "100%",
+    display: "flex",
+    position: "relative",
+    overflowY: "auto",
+    overflowX: "hidden"
+  }
+});
+//# sourceMappingURL=CollapsiblePagerView.web.js.map

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -0,0 +1,85 @@
+import type * as React from "react";
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+export type OnPageScrollEventData = Readonly<{
+  position: Double;
+  offset: Double;
+}>;
+
+export type OnPageSelectedEventData = Readonly<{
+  position: Double;
+}>;
+
+export type OnPageScrollStateChangedEventData = Readonly<{
+  pageScrollState: "idle" | "dragging" | "settling";
+}>;
+
+export type OnCollapsibleStateChangedEventData = Readonly<{
+  position: Int32;
+  headerOffset: Double;
+  nativePageCount: Int32;
+  attachedPageCount: Int32;
+  observedScrollableCount: Int32;
+  retainedPages: string;
+  reason: string;
+}>;
+
+/**
+ * Internal native props. Consumers should use CollapsiblePagerViewProps from
+ * CollapsiblePagerView instead of mounting this host component directly.
+ */
+export interface NativeProps extends ViewProps {
+  scrollEnabled?: WithDefault<boolean, true>;
+  layoutDirection?: WithDefault<"ltr" | "rtl", "ltr">;
+  initialPage?: Int32;
+  offscreenPageLimit?: Int32;
+  headerHeight?: Int32;
+  stickyHeaderHeight?: Int32;
+  pageKeys?: string;
+  retainedPages?: string;
+  onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
+  onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+  onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
+  onCollapsibleStateChanged?: DirectEventHandler<OnCollapsibleStateChangedEventData>;
+}
+
+type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
+
+export interface NativeCommands {
+  setPage: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    selectedPage: Int32
+  ) => void;
+  setPageWithoutAnimation: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    selectedPage: Int32
+  ) => void;
+  setScrollEnabledImperatively: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    scrollEnabled: boolean
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    "setPage",
+    "setPageWithoutAnimation",
+    "setScrollEnabledImperatively",
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  "RNCCollapsiblePagerView"
+) as HostComponent<NativeProps>;