react-native-collapsible-header-tab-view 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -0,0 +1,443 @@
+// src/index.tsx
+import React3, {
+  forwardRef as forwardRef3,
+  useCallback as useCallback3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import {
+  Animated as Animated3,
+  InteractionManager,
+  StyleSheet,
+  View as View2
+} from "react-native";
+import PagerView from "react-native-pager-view";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var CollapsibleContext = createContext(null);
+var TabIndexContext = createContext(0);
+var useCollapsible = () => {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error("useCollapsible must be used within CollapsibleTabView");
+  }
+  return ctx;
+};
+var useTabIndex = () => useContext(TabIndexContext);
+
+// src/TabFlatList.tsx
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Animated,
+  FlatList,
+  View
+} from "react-native";
+var AnimatedFlatListComponent = Animated.createAnimatedComponent(FlatList);
+var AnimatedFlatList = AnimatedFlatListComponent;
+var TabFlatListInner = ({
+  contentContainerStyle,
+  onScroll,
+  ListHeaderComponent,
+  ...props
+}, ref) => {
+  const index = useTabIndex();
+  const {
+    scrollY,
+    activeIndex,
+    stickyEnabled,
+    headerHeight,
+    tabBarHeight,
+    renderHeader,
+    renderTabBar,
+    registerRef,
+    syncScrollY
+  } = useCollapsible();
+  const innerRef = useRef(null);
+  const isActive = activeIndex === index;
+  useEffect(() => {
+    registerRef(index, innerRef.current);
+    return () => registerRef(index, null);
+  }, [index]);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const handleScroll = useCallback(
+    (e) => {
+      const y = e.nativeEvent.contentOffset.y;
+      syncScrollY(index, y);
+      onScroll?.(e);
+    },
+    [index, onScroll, syncScrollY]
+  );
+  const mergedHeader = useMemo(() => {
+    if (stickyEnabled) return ListHeaderComponent;
+    const OriginalHeader = typeof ListHeaderComponent === "function" ? /* @__PURE__ */ React.createElement(ListHeaderComponent, null) : ListHeaderComponent ?? null;
+    return /* @__PURE__ */ React.createElement(View, null, renderHeader?.(), renderTabBar?.(), OriginalHeader);
+  }, [stickyEnabled, ListHeaderComponent, renderHeader, renderTabBar]);
+  const paddingTop = stickyEnabled ? headerHeight + tabBarHeight : 0;
+  const collapseRange = stickyEnabled ? headerHeight : 0;
+  const [containerHeight, setContainerHeight] = useState(0);
+  const handleLayout = useCallback((e) => {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
+  const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+  return /* @__PURE__ */ React.createElement(
+    AnimatedFlatList,
+    {
+      ...props,
+      ref: innerRef,
+      onLayout: handleLayout,
+      ListHeaderComponent: mergedHeader,
+      contentContainerStyle: [
+        paddingTop > 0 && { paddingTop },
+        minHeight > 0 && { minHeight },
+        contentContainerStyle
+      ],
+      onScroll: isActive && stickyEnabled ? Animated.event(
+        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+        {
+          useNativeDriver: true,
+          listener: handleScroll
+        }
+      ) : handleScroll,
+      scrollEventThrottle: 16,
+      showsVerticalScrollIndicator: false
+    }
+  );
+};
+var TabFlatList = forwardRef(TabFlatListInner);
+
+// src/TabScrollView.tsx
+import React2, {
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  Animated as Animated2
+} from "react-native";
+var TabScrollView = forwardRef2(
+  ({ contentContainerStyle, onScroll, children, ...props }, ref) => {
+    const index = useTabIndex();
+    const { scrollY, activeIndex, headerHeight, tabBarHeight, registerRef, syncScrollY } = useCollapsible();
+    const innerRef = useRef2(null);
+    const isActive = activeIndex === index;
+    useEffect2(() => {
+      registerRef(index, innerRef.current);
+      return () => registerRef(index, null);
+    }, [index]);
+    useImperativeHandle2(ref, () => innerRef.current, []);
+    const handleScroll = useCallback2(
+      (e) => {
+        const y = e.nativeEvent.contentOffset.y;
+        syncScrollY(index, y);
+        onScroll?.(e);
+      },
+      [index, onScroll, syncScrollY]
+    );
+    const paddingTop = headerHeight + tabBarHeight;
+    const collapseRange = headerHeight;
+    const [containerHeight, setContainerHeight] = useState2(0);
+    const handleLayout = useCallback2((e) => {
+      setContainerHeight(e.nativeEvent.layout.height);
+    }, []);
+    const minHeight = containerHeight > 0 ? containerHeight + collapseRange : 0;
+    return /* @__PURE__ */ React2.createElement(
+      Animated2.ScrollView,
+      {
+        ref: innerRef,
+        ...props,
+        onLayout: handleLayout,
+        contentContainerStyle: [
+          { paddingTop },
+          minHeight > 0 && { minHeight },
+          contentContainerStyle
+        ],
+        onScroll: isActive ? Animated2.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: handleScroll
+        }) : handleScroll,
+        scrollEventThrottle: 16,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    );
+  }
+);
+
+// src/index.tsx
+var CollapsibleTabView = forwardRef3(
+  ({
+    children,
+    renderHeader,
+    estimatedHeaderHeight = 0,
+    estimatedTabBarHeight = 0,
+    stickyEnabled = true,
+    stickyTop = 0,
+    renderTabBar,
+    initialTabIndex = 0,
+    onTabChange,
+    onScroll: onScrollProp,
+    swipeEnabled = true,
+    style
+  }, ref) => {
+    const [activeIndex, setActiveIndex] = useState3(initialTabIndex);
+    const pagerRef = useRef3(null);
+    const pages = useMemo2(
+      () => React3.Children.toArray(children).filter(React3.isValidElement),
+      [children]
+    );
+    useImperativeHandle3(ref, () => ({
+      scrollToTab: (index, animated = true) => {
+        if (index === activeIndex || index < 0 || index >= pages.length) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        if (animated) {
+          pagerRef.current?.setPage(index);
+        } else {
+          pagerRef.current?.setPageWithoutAnimation(index);
+        }
+        onTabChange?.(index);
+      },
+      getActiveIndex: () => activeIndex
+    }));
+    const hasEstimate = estimatedHeaderHeight > 0;
+    const headerHeightRef = useRef3(0);
+    const tabBarHeightRef = useRef3(0);
+    const [layout, setLayout] = useState3({
+      headerHeight: estimatedHeaderHeight,
+      tabBarHeight: estimatedTabBarHeight,
+      ready: hasEstimate
+    });
+    const { headerHeight, tabBarHeight } = layout;
+    const visible = layout.ready;
+    const adjustY = useRef3(new Animated3.Value(0)).current;
+    const tryCommitLayout = useCallback3(() => {
+      const h = headerHeightRef.current;
+      const t = tabBarHeightRef.current;
+      if (h > 0 && t > 0) {
+        setLayout((prev) => {
+          if (Math.abs(prev.headerHeight - h) <= 1 && Math.abs(prev.tabBarHeight - t) <= 1) {
+            return prev;
+          }
+          const diff = h + t - (prev.headerHeight + prev.tabBarHeight);
+          if (prev.ready && Math.abs(diff) > 1) {
+            adjustY.setValue(-diff);
+            Animated3.timing(adjustY, {
+              toValue: 0,
+              duration: 200,
+              useNativeDriver: true
+            }).start();
+          }
+          return { headerHeight: h, tabBarHeight: t, ready: true };
+        });
+      }
+    }, []);
+    const handleHeaderLayout = useCallback3(
+      (e) => {
+        headerHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const handleTabBarLayout = useCallback3(
+      (e) => {
+        tabBarHeightRef.current = e.nativeEvent.layout.height;
+        tryCommitLayout();
+      },
+      [tryCommitLayout]
+    );
+    const scrollY = useRef3(new Animated3.Value(0)).current;
+    const tabScrollYMap = useRef3(/* @__PURE__ */ new Map());
+    const tabRefs = useRef3(
+      /* @__PURE__ */ new Map()
+    );
+    const collapseRange = stickyEnabled ? Math.max(headerHeight - stickyTop, 0) : 0;
+    const headerTranslateY = useMemo2(
+      () => collapseRange > 0 ? scrollY.interpolate({
+        inputRange: [0, collapseRange],
+        outputRange: [0, -collapseRange],
+        extrapolate: "clamp"
+      }) : new Animated3.Value(0),
+      [scrollY, collapseRange]
+    );
+    const registerRef = useCallback3(
+      (index, ref2) => {
+        if (ref2) {
+          tabRefs.current.set(index, ref2);
+        } else {
+          tabRefs.current.delete(index);
+        }
+      },
+      []
+    );
+    const syncScrollY = useCallback3(
+      (index, y) => {
+        tabScrollYMap.current.set(index, y);
+        onScrollProp?.(y);
+      },
+      [onScrollProp]
+    );
+    const scrollTabTo = useCallback3((index, offset) => {
+      const ref2 = tabRefs.current.get(index);
+      if (!ref2) return;
+      if (ref2.scrollToOffset) {
+        ref2.scrollToOffset({ offset, animated: false });
+      } else if (ref2.scrollTo) {
+        ref2.scrollTo({ y: offset, animated: false });
+      } else if (ref2.getNode) {
+        const node = ref2.getNode();
+        if (node?.scrollToOffset) {
+          node.scrollToOffset({ offset, animated: false });
+        } else if (node?.scrollTo) {
+          node.scrollTo({ y: offset, animated: false });
+        }
+      }
+    }, []);
+    const syncTabOnSwitch = useCallback3(
+      (newIndex) => {
+        const currentY = tabScrollYMap.current.get(activeIndex) ?? 0;
+        const newTabSavedY = tabScrollYMap.current.get(newIndex) ?? 0;
+        const isCollapsed = currentY >= collapseRange - 1;
+        let targetY;
+        if (isCollapsed) {
+          targetY = Math.max(newTabSavedY, collapseRange);
+        } else {
+          targetY = Math.min(currentY, collapseRange);
+        }
+        InteractionManager.runAfterInteractions(() => {
+          scrollTabTo(newIndex, targetY);
+          tabScrollYMap.current.set(newIndex, targetY);
+          scrollY.setValue(Math.min(targetY, collapseRange));
+        });
+      },
+      [activeIndex, collapseRange, scrollTabTo, scrollY]
+    );
+    const handleTabPress = useCallback3(
+      (index) => {
+        if (index === activeIndex) return;
+        syncTabOnSwitch(index);
+        setActiveIndex(index);
+        pagerRef.current?.setPageWithoutAnimation(index);
+        onTabChange?.(index);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const handlePageSelected = useCallback3(
+      (e) => {
+        const newIndex = e.nativeEvent.position;
+        if (newIndex === activeIndex) return;
+        syncTabOnSwitch(newIndex);
+        setActiveIndex(newIndex);
+        onTabChange?.(newIndex);
+      },
+      [activeIndex, onTabChange, syncTabOnSwitch]
+    );
+    const tabBarProps = useMemo2(
+      () => ({
+        activeIndex,
+        onTabPress: handleTabPress
+      }),
+      [activeIndex, handleTabPress]
+    );
+    const renderTabBarNode = useCallback3(
+      () => renderTabBar(tabBarProps),
+      [renderTabBar, tabBarProps]
+    );
+    const contextValue = useMemo2(
+      () => ({
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader: stickyEnabled ? void 0 : renderHeader,
+        renderTabBar: stickyEnabled ? void 0 : renderTabBarNode,
+        registerRef,
+        syncScrollY
+      }),
+      [
+        scrollY,
+        activeIndex,
+        stickyEnabled,
+        headerHeight,
+        tabBarHeight,
+        renderHeader,
+        renderTabBarNode,
+        registerRef,
+        syncScrollY
+      ]
+    );
+    return /* @__PURE__ */ React3.createElement(CollapsibleContext.Provider, { value: contextValue }, /* @__PURE__ */ React3.createElement(View2, { style: [styles.container, style] }, /* @__PURE__ */ React3.createElement(
+      Animated3.View,
+      {
+        style: [
+          styles.pager,
+          !visible && styles.hidden,
+          { transform: [{ translateY: adjustY }] }
+        ]
+      },
+      /* @__PURE__ */ React3.createElement(
+        PagerView,
+        {
+          ref: pagerRef,
+          style: styles.pager,
+          initialPage: initialTabIndex,
+          onPageSelected: handlePageSelected,
+          scrollEnabled: swipeEnabled
+        },
+        pages.map((page, i) => /* @__PURE__ */ React3.createElement(View2, { key: page?.key ?? i, style: styles.page }, /* @__PURE__ */ React3.createElement(TabIndexContext.Provider, { value: i }, page)))
+      )
+    ), stickyEnabled && /* @__PURE__ */ React3.createElement(
+      Animated3.View,
+      {
+        style: [
+          styles.overlay,
+          { transform: [{ translateY: headerTranslateY }] }
+        ],
+        pointerEvents: "box-none"
+      },
+      /* @__PURE__ */ React3.createElement(View2, { pointerEvents: "box-none", onLayout: handleHeaderLayout }, renderHeader()),
+      /* @__PURE__ */ React3.createElement(View2, { onLayout: handleTabBarLayout }, renderTabBarNode())
+    )));
+  }
+);
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  pager: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  page: {
+    flex: 1
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10
+  }
+});
+var index_default = CollapsibleTabView;
+export {
+  TabFlatList,
+  TabScrollView,
+  index_default as default
+};

package/dist/types.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { Animated, FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+export interface TabBarProps {
+    activeIndex: number;
+    onTabPress: (index: number) => void;
+}
+export interface CollapsibleTabViewProps {
+    children: React.ReactNode;
+    renderHeader: () => React.ReactNode;
+    estimatedHeaderHeight?: number;
+    estimatedTabBarHeight?: number;
+    stickyEnabled?: boolean;
+    stickyTop?: number;
+    renderTabBar: (props: TabBarProps) => React.ReactNode;
+    initialTabIndex?: number;
+    onTabChange?: (index: number) => void;
+    onScroll?: (scrollY: number) => void;
+    swipeEnabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export interface CollapsibleTabViewRef {
+    scrollToTab: (index: number, animated?: boolean) => void;
+    getActiveIndex: () => number;
+}
+export interface CollapsibleContextValue {
+    scrollY: Animated.Value;
+    activeIndex: number;
+    stickyEnabled: boolean;
+    headerHeight: number;
+    tabBarHeight: number;
+    renderHeader?: () => React.ReactNode;
+    renderTabBar?: () => React.ReactNode;
+    registerRef: (index: number, ref: FlatList<any> | ScrollView | null) => void;
+    syncScrollY: (index: number, y: number) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnF,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACxD,cAAc,EAAE,MAAM,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChD"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-native-collapsible-header-tab-view",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "不依赖 react-native-reanimated ，可吸顶的tab view",
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/MasterZuom/react-native-collapsible-header-tab-view.git"
@@ -20,14 +21,20 @@
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.61.0",
-    "react-native-pager-view": "^6.0.0"
+    "react-native-pager-view": "*"
   },
   "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8",
     "react": "^18.0.0",
     "react-native": "^0.71.0",
     "react-native-pager-view": "^6.7.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.0.0"
   },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --clean && tsc --emitDeclarationOnly --outDir dist --skipLibCheck"
+  },
   "files": [
     "dist"
   ]