@orionarm/react-native-collapse-tabs 1.0.1 → 1.0.3

package/lib/lib/CollapseTabs.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseTabs = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_pager_view_1 = __importDefault(require("react-native-pager-view"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const context_1 = require("./context");
+const TabBar_1 = require("./TabBar");
+const AnimatedPagerView = react_native_reanimated_1.default.createAnimatedComponent(react_native_pager_view_1.default);
+const CollapseTabs = ({ children, initialTabName, headerHeight, tabBarHeight, minHeaderHeight = 0, renderHeader, renderTabBar, containerStyle, headerContainerStyle, pagerProps, onIndexChange, }) => {
+    const tabs = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children).filter((c) => react_1.default.isValidElement(c)), [children]);
+    const tabNames = (0, react_1.useMemo)(() => tabs.map((t) => t.props.name), [tabs]);
+    const initialIndex = Math.max(0, initialTabName ? tabNames.indexOf(initialTabName) : 0);
+    const headerScrollDistance = headerHeight - minHeaderHeight;
+    const index = (0, react_native_reanimated_1.useSharedValue)(initialIndex);
+    const indexDecimal = (0, react_native_reanimated_1.useSharedValue)(initialIndex);
+    const focusedTab = (0, react_native_reanimated_1.useSharedValue)(tabNames[initialIndex] ?? "");
+    const initialScrollY = (0, react_1.useMemo)(() => {
+        const m = {};
+        tabNames.forEach((n) => (m[n] = 0));
+        return m;
+    }, [tabNames]);
+    const scrollY = (0, react_native_reanimated_1.useSharedValue)(initialScrollY);
+    const headerTranslateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        const y = scrollY.value[focusedTab.value] ?? 0;
+        return -Math.min(y, headerScrollDistance);
+    }, (next) => {
+        headerTranslateY.value = next;
+    }, [headerScrollDistance]);
+    const refMap = (0, react_1.useRef)({}).current;
+    const setRef = (0, react_1.useCallback)((key, ref) => {
+        refMap[key] = ref;
+        return ref;
+    }, [refMap]);
+    const containerRef = (0, react_1.useRef)(null);
+    const onTabPress = (0, react_1.useCallback)((name) => {
+        const i = tabNames.indexOf(name);
+        if (i < 0)
+            return;
+        containerRef.current?.setPage(i);
+    }, [tabNames]);
+    const [renderIndex, setRenderIndex] = (0, react_1.useState)(initialIndex);
+    const { doDependenciesDiffer } = (0, react_native_reanimated_1.useHandler)({});
+    const pageScrollHandler = (0, react_native_reanimated_1.useEvent)((e) => {
+        "worklet";
+        indexDecimal.value = e.position + e.offset;
+    }, ["onPageScroll"], doDependenciesDiffer);
+    const onPageSelected = (0, react_1.useCallback)((e) => {
+        const i = e.nativeEvent.position;
+        index.value = i;
+        focusedTab.value = tabNames[i] ?? "";
+        setRenderIndex(i);
+        onIndexChange?.(i);
+    }, [tabNames, index, focusedTab, onIndexChange]);
+    const headerAnimStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateY: headerTranslateY.value }],
+    }));
+    const ctxValue = {
+        headerHeight,
+        tabBarHeight,
+        minHeaderHeight,
+        headerScrollDistance,
+        tabNames,
+        index,
+        indexDecimal,
+        focusedTab,
+        scrollY,
+        headerTranslateY,
+        setRef,
+        refMap,
+        containerRef,
+    };
+    const headerProps = {
+        tabNames,
+        focusedTab,
+        index,
+        indexDecimal,
+        onTabPress,
+    };
+    return (<context_1.Context.Provider value={ctxValue}>
+      <react_native_1.View style={[styles.container, containerStyle]}>
+        <AnimatedPagerView ref={containerRef} style={react_native_1.StyleSheet.absoluteFill} initialPage={initialIndex} onPageScroll={pageScrollHandler} onPageSelected={onPageSelected} {...pagerProps}>
+          {tabs.map((tab, i) => (<react_native_1.View key={tab.props.name} style={styles.page} collapsable={false}>
+              {tab}
+            </react_native_1.View>))}
+        </AnimatedPagerView>
+
+        <react_native_reanimated_1.default.View pointerEvents="box-none" style={[
+            styles.headerContainer,
+            { height: headerHeight + tabBarHeight },
+            headerContainerStyle,
+            headerAnimStyle,
+        ]}>
+          <react_native_1.View pointerEvents="box-none" style={{ height: headerHeight }}>
+            {renderHeader?.(headerProps)}
+          </react_native_1.View>
+          <react_native_1.View style={{ height: tabBarHeight }}>
+            {renderTabBar
+            ? renderTabBar(headerProps)
+            : <TabBar_1.DefaultTabBar {...headerProps}/>}
+          </react_native_1.View>
+        </react_native_reanimated_1.default.View>
+      </react_native_1.View>
+    </context_1.Context.Provider>);
+};
+exports.CollapseTabs = CollapseTabs;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, overflow: "hidden" },
+    page: { flex: 1 },
+    headerContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 10,
+        backgroundColor: "#fff",
+    },
+});

package/lib/lib/CollapseTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseTabs.js","sourceRoot":"","sources":["../src/CollapseTabs.tsx"],"names":[],"mappings":";;;AAAA,iCAA0B;AAC1B,+CAAiE;AAO1D,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,KAAK,GACN,EAAE,EAAE;IACH,OAAO,CAAC,mBAAI,CAAE,CAAA,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAAC,CAAC;AAClC,CAAC,CAAC;AALW,QAAA,YAAY,gBAKvB"}

package/lib/lib/FlatList.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FlatListProps } from "react-native";
+type Props<T> = FlatListProps<T> & {
+    name: string;
+};
+export declare function FlatList<T>({ name, contentContainerStyle, ...rest }: Props<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=FlatList.d.ts.map

package/lib/lib/FlatList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../src/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA0B,aAAa,EAAE,MAAM,cAAc,CAAC;AAOrE,KAAK,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,qBAoC7E"}

package/lib/lib/FlatList.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlatList = FlatList;
+const react_1 = __importStar(require("react"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const hooks_1 = require("./hooks");
+function FlatList({ name, contentContainerStyle, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = (0, hooks_1.useTabsContext)();
+    const ref = (0, react_native_reanimated_1.useAnimatedRef)();
+    (0, react_1.useEffect)(() => {
+        setRef(name, ref);
+    }, [name, ref, setRef]);
+    const handler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            if (focusedTab.value !== name)
+                return;
+            const map = { ...scrollY.value };
+            map[name] = event.contentOffset.y;
+            scrollY.value = map;
+        },
+    });
+    return (<react_native_reanimated_1.default.FlatList {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}/>);
+}

package/lib/lib/ScrollView.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ScrollViewProps } from "react-native";
+type Props = ScrollViewProps & {
+    name: string;
+    children?: React.ReactNode;
+};
+export declare function ScrollView({ name, contentContainerStyle, children, ...rest }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ScrollView.d.ts.map

package/lib/lib/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,eAAe,EAA8B,MAAM,cAAc,CAAC;AAO3E,KAAK,KAAK,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAE5E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,qBAAqB,EACrB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,qBAsCP"}

package/lib/lib/ScrollView.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollView = ScrollView;
+const react_1 = __importStar(require("react"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const hooks_1 = require("./hooks");
+function ScrollView({ name, contentContainerStyle, children, ...rest }) {
+    const { headerHeight, tabBarHeight, scrollY, focusedTab, setRef, } = (0, hooks_1.useTabsContext)();
+    const ref = (0, react_native_reanimated_1.useAnimatedRef)();
+    (0, react_1.useEffect)(() => {
+        setRef(name, ref);
+    }, [name, ref, setRef]);
+    const handler = (0, react_native_reanimated_1.useAnimatedScrollHandler)({
+        onScroll: (event) => {
+            if (focusedTab.value !== name)
+                return;
+            const map = { ...scrollY.value };
+            map[name] = event.contentOffset.y;
+            scrollY.value = map;
+        },
+    });
+    return (<react_native_reanimated_1.default.ScrollView {...rest} ref={ref} onScroll={handler} scrollEventThrottle={16} contentContainerStyle={[
+            { paddingTop: headerHeight + tabBarHeight },
+            contentContainerStyle,
+        ]}>
+      {children}
+    </react_native_reanimated_1.default.ScrollView>);
+}

package/lib/lib/Tab.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TabProps } from "./types/types";
+/**
+ * Container for a single tab's content. Should be a direct child of
+ * <CollapseTabs>. Place a wrapped <FlatList> or <ScrollView> inside.
+ */
+export declare const Tab: <T extends string>({ children }: TabProps<T>) => React.JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/lib/lib/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../src/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,CAAC,SAAS,MAAM,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,sBAE9D,CAAC"}

package/lib/lib/Tab.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Container for a single tab's content. Should be a direct child of
+ * <CollapseTabs>. Place a wrapped <FlatList> or <ScrollView> inside.
+ */
+const Tab = ({ children }) => {
+    return <react_native_1.View style={styles.container}>{children}</react_native_1.View>;
+};
+exports.Tab = Tab;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+});

package/lib/lib/TabBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabBarProps } from "./types/types";
+export declare const DefaultTabBar: React.FC<TabBarProps>;
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/lib/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../src/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmB/C,CAAC"}

package/lib/lib/TabBar.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTabBar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const DefaultTabBar = ({ tabNames, indexDecimal, onTabPress, }) => {
+    return (<react_native_1.View style={styles.container}>
+      {tabNames.map((name, i) => (<TabBarItem key={name} name={name} index={i} indexDecimal={indexDecimal} onPress={() => onTabPress(name)}/>))}
+      <Indicator count={tabNames.length} indexDecimal={indexDecimal}/>
+    </react_native_1.View>);
+};
+exports.DefaultTabBar = DefaultTabBar;
+const TabBarItem = ({ name, index, indexDecimal, onPress }) => {
+    const labelStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: (0, react_native_reanimated_1.interpolate)(indexDecimal.value, [index - 1, index, index + 1], [0.6, 1, 0.6], "clamp"),
+    }));
+    return (<react_native_1.Pressable style={styles.item} onPress={onPress}>
+      <react_native_reanimated_1.default.Text style={[styles.label, labelStyle]}>{name}</react_native_reanimated_1.default.Text>
+    </react_native_1.Pressable>);
+};
+const Indicator = ({ count, indexDecimal }) => {
+    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [
+            { translateX: (indexDecimal.value * 100) / count + "%" },
+        ],
+        width: `${100 / count}%`,
+    }));
+    return <react_native_reanimated_1.default.View style={[styles.indicator, style]}/>;
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        backgroundColor: "#fff",
+    },
+    item: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: "#333",
+    },
+    indicator: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        height: 2,
+        backgroundColor: "#2D8CFF",
+    },
+});

package/lib/lib/context/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ContextType } from "../types/types";
+export type { ContextType, TabName, RefComponent } from "../types/types";
+export declare const Context: React.Context<ContextType<string> | undefined>;
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAW,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzE,eAAO,MAAM,OAAO,gDAEnB,CAAC"}

package/lib/lib/context/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Context = void 0;
+const react_1 = __importDefault(require("react"));
+exports.Context = react_1.default.createContext(undefined);

package/lib/lib/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { ContextType } from "../types/types";
+export declare function useTabsContext(): ContextType<string>;
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wBAAgB,cAAc,IAAI,WAAW,CAAC,MAAM,CAAC,CAIpD"}

package/lib/lib/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = useTabsContext;
+const react_1 = require("react");
+const context_1 = require("../context");
+function useTabsContext() {
+    const c = (0, react_1.useContext)(context_1.Context);
+    if (!c)
+        throw new Error("useTabsContext must be used inside <CollapseTabs>");
+    return c;
+}

package/lib/lib/index.d.ts

@@ -0,0 +1,8 @@
+export { CollapseTabs } from "./CollapseTabs";
+export { Tab } from "./Tab";
+export { FlatList } from "./FlatList";
+export { ScrollView } from "./ScrollView";
+export { DefaultTabBar } from "./TabBar";
+export { useTabsContext } from "./hooks";
+export type { CollapseTabsProps, TabProps, TabBarProps, HeaderProps, TabName, } from "./types/types";
+//# sourceMappingURL=index.d.ts.map

package/lib/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,WAAW,EACX,OAAO,GACR,MAAM,eAAe,CAAC"}

package/lib/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = exports.DefaultTabBar = exports.ScrollView = exports.FlatList = exports.Tab = exports.CollapseTabs = void 0;
+var CollapseTabs_1 = require("./CollapseTabs");
+Object.defineProperty(exports, "CollapseTabs", { enumerable: true, get: function () { return CollapseTabs_1.CollapseTabs; } });
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
+var FlatList_1 = require("./FlatList");
+Object.defineProperty(exports, "FlatList", { enumerable: true, get: function () { return FlatList_1.FlatList; } });
+var ScrollView_1 = require("./ScrollView");
+Object.defineProperty(exports, "ScrollView", { enumerable: true, get: function () { return ScrollView_1.ScrollView; } });
+var TabBar_1 = require("./TabBar");
+Object.defineProperty(exports, "DefaultTabBar", { enumerable: true, get: function () { return TabBar_1.DefaultTabBar; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useTabsContext", { enumerable: true, get: function () { return hooks_1.useTabsContext; } });

package/lib/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}

package/lib/lib/types/types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+import PagerView, { PagerViewProps } from "react-native-pager-view";
+import Animated, { AnimatedRef, SharedValue } from "react-native-reanimated";
+export type TabName = string;
+export type ContainerRef = PagerView;
+export type RefComponent = FlatList<any> | ScrollView | Animated.ScrollView;
+export type TabBarProps<T extends TabName = TabName> = {
+    tabNames: T[];
+    focusedTab: SharedValue<T>;
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    onTabPress: (name: T) => void;
+};
+export type HeaderProps<T extends TabName = TabName> = TabBarProps<T>;
+export type TabProps<T extends TabName = TabName> = {
+    readonly name: T;
+    label?: string;
+    children: React.ReactNode;
+};
+export type TabReactElement<T extends TabName = TabName> = React.ReactElement<TabProps<T>>;
+export type CollapseTabsProps = {
+    children: TabReactElement | TabReactElement[];
+    /** Initial tab name. Defaults to the first child. */
+    initialTabName?: TabName;
+    /** Fixed header height. Required for MVP. */
+    headerHeight: number;
+    /** Fixed tab bar height. Required for MVP. */
+    tabBarHeight: number;
+    /** Minimum header height when fully collapsed. @default 0 */
+    minHeaderHeight?: number;
+    renderHeader?: (props: HeaderProps) => React.ReactElement | null;
+    renderTabBar?: (props: TabBarProps) => React.ReactElement | null;
+    containerStyle?: StyleProp<ViewStyle>;
+    headerContainerStyle?: StyleProp<ViewStyle>;
+    pagerProps?: Omit<PagerViewProps, "onPageScroll" | "initialPage">;
+    onIndexChange?: (index: number) => void;
+};
+/** Internal context shared between CollapseTabs and its children. */
+export type ContextType<T extends TabName = TabName> = {
+    headerHeight: number;
+    tabBarHeight: number;
+    minHeaderHeight: number;
+    headerScrollDistance: number;
+    tabNames: T[];
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    focusedTab: SharedValue<T>;
+    /** Per-tab scroll Y, keyed by tab name. */
+    scrollY: SharedValue<Record<T, number>>;
+    /** Header translateY (clamped to [-headerScrollDistance, 0]). */
+    headerTranslateY: SharedValue<number>;
+    setRef: <R extends RefComponent>(key: T, ref: AnimatedRef<R>) => AnimatedRef<R>;
+    refMap: Record<T, AnimatedRef<RefComponent>>;
+    containerRef: React.RefObject<ContainerRef>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/lib/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"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"}

package/lib/lib/types/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/types/types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { FlatList, ScrollView, StyleProp, ViewStyle } from "react-native";
+import PagerView, { PagerViewProps } from "react-native-pager-view";
+import Animated, { AnimatedRef, SharedValue } from "react-native-reanimated";
+export type TabName = string;
+export type ContainerRef = PagerView;
+export type RefComponent = FlatList<any> | ScrollView | Animated.ScrollView;
+export type TabBarProps<T extends TabName = TabName> = {
+    tabNames: T[];
+    focusedTab: SharedValue<T>;
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    onTabPress: (name: T) => void;
+};
+export type HeaderProps<T extends TabName = TabName> = TabBarProps<T>;
+export type TabProps<T extends TabName = TabName> = {
+    readonly name: T;
+    label?: string;
+    children: React.ReactNode;
+};
+export type TabReactElement<T extends TabName = TabName> = React.ReactElement<TabProps<T>>;
+export type CollapseTabsProps = {
+    children: TabReactElement | TabReactElement[];
+    /** Initial tab name. Defaults to the first child. */
+    initialTabName?: TabName;
+    /** Fixed header height. Required for MVP. */
+    headerHeight: number;
+    /** Fixed tab bar height. Required for MVP. */
+    tabBarHeight: number;
+    /** Minimum header height when fully collapsed. @default 0 */
+    minHeaderHeight?: number;
+    renderHeader?: (props: HeaderProps) => React.ReactElement | null;
+    renderTabBar?: (props: TabBarProps) => React.ReactElement | null;
+    containerStyle?: StyleProp<ViewStyle>;
+    headerContainerStyle?: StyleProp<ViewStyle>;
+    pagerProps?: Omit<PagerViewProps, "onPageScroll" | "initialPage">;
+    onIndexChange?: (index: number) => void;
+};
+/** Internal context shared between CollapseTabs and its children. */
+export type ContextType<T extends TabName = TabName> = {
+    headerHeight: number;
+    tabBarHeight: number;
+    minHeaderHeight: number;
+    headerScrollDistance: number;
+    tabNames: T[];
+    index: SharedValue<number>;
+    indexDecimal: SharedValue<number>;
+    focusedTab: SharedValue<T>;
+    /** Per-tab scroll Y, keyed by tab name. */
+    scrollY: SharedValue<Record<T, number>>;
+    /** Header translateY (clamped to [-headerScrollDistance, 0]). */
+    headerTranslateY: SharedValue<number>;
+    setRef: <R extends RefComponent>(key: T, ref: AnimatedRef<R>) => AnimatedRef<R>;
+    refMap: Record<T, AnimatedRef<RefComponent>>;
+    containerRef: React.RefObject<ContainerRef>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"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"}