74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { View } from "react-native";
|
|
import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
|
|
import Navbar from "@/components/layout/navbar";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { Slot, useRouter, usePathname } from "expo-router";
|
|
import { useMemo, useRef } from "react";
|
|
|
|
export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
|
|
const router = useRouter();
|
|
const insets = useSafeAreaInsets();
|
|
const pathname = usePathname();
|
|
|
|
const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
|
|
const activeTabItem = useMemo(() => {
|
|
const found = tabs.find((t) => t.id === pathname);
|
|
|
|
if (found?.isCenter) {
|
|
return lastValidTabRef.current;
|
|
}
|
|
|
|
if (found) {
|
|
lastValidTabRef.current = found;
|
|
return found;
|
|
}
|
|
|
|
return lastValidTabRef.current;
|
|
}, [pathname, tabs]);
|
|
|
|
function handleClose() {
|
|
router.dismissTo("/tools");
|
|
}
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flex: 1, zIndex: 0 }}>
|
|
<Slot />
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<View style={{ paddingTop: insets.top }}>
|
|
<Navbar
|
|
title={activeTabItem?.title}
|
|
titleIcon={activeTabItem?.icon}
|
|
showBack={false}
|
|
onClose={handleClose}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<View style={{ paddingBottom: insets.bottom + 16 }}>
|
|
<Tabbar tabs={tabs} value={activeTabItem?.id} onChange={(id) => router.push(id as any)} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|