mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
[MOB-89] Separate headers (#2408)
* separate headers improvements to headers cleanup missed cleanup documentation * Update SearchStack.tsx
This commit is contained in:
parent
a61a7bee65
commit
9126332df1
|
@ -1,8 +1,8 @@
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { useCache, useLibraryQuery, useNodes } from '@sd/client';
|
||||||
import { DotsThreeOutline, Plus } from 'phosphor-react-native';
|
import { DotsThreeOutline, Plus } from 'phosphor-react-native';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Text, View } from 'react-native';
|
import { Text, View } from 'react-native';
|
||||||
import { useCache, useLibraryQuery, useNodes } from '@sd/client';
|
|
||||||
import { ModalRef } from '~/components/layout/Modal';
|
import { ModalRef } from '~/components/layout/Modal';
|
||||||
import { tw } from '~/lib/tailwind';
|
import { tw } from '~/lib/tailwind';
|
||||||
import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
|
import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { useCache, useLibraryQuery, useNodes } from '@sd/client';
|
||||||
import { DotsThreeOutline, Plus } from 'phosphor-react-native';
|
import { DotsThreeOutline, Plus } from 'phosphor-react-native';
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import { Text, View } from 'react-native';
|
import { Text, View } from 'react-native';
|
||||||
import { useCache, useLibraryQuery, useNodes } from '@sd/client';
|
|
||||||
import { ModalRef } from '~/components/layout/Modal';
|
import { ModalRef } from '~/components/layout/Modal';
|
||||||
import { tw } from '~/lib/tailwind';
|
import { tw } from '~/lib/tailwind';
|
||||||
import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
|
import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
|
||||||
|
|
110
apps/mobile/src/components/header/DynamicHeader.tsx
Normal file
110
apps/mobile/src/components/header/DynamicHeader.tsx
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
|
||||||
|
import { RouteProp, useNavigation } from '@react-navigation/native';
|
||||||
|
import { NativeStackHeaderProps } from '@react-navigation/native-stack';
|
||||||
|
import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
|
||||||
|
import { Platform, Pressable, Text, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
|
import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
|
||||||
|
import { Icon } from '../icons/Icon';
|
||||||
|
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
headerRoute?: NativeStackHeaderProps; //supporting title from the options object of navigation
|
||||||
|
optionsRoute?: RouteProp<any, any>; //supporting params passed
|
||||||
|
kind: 'tag' | 'location'; //the kind of icon to display
|
||||||
|
explorerMenu?: boolean; //whether to show the explorer menu
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DynamicHeader({
|
||||||
|
headerRoute,
|
||||||
|
optionsRoute,
|
||||||
|
kind,
|
||||||
|
explorerMenu = true
|
||||||
|
}: Props) {
|
||||||
|
const navigation = useNavigation<DrawerNavigationHelpers>();
|
||||||
|
const headerHeight = useSafeAreaInsets().top;
|
||||||
|
const isAndroid = Platform.OS === 'android';
|
||||||
|
const explorerStore = useExplorerStore();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={twStyle('relative h-auto w-full border-b border-app-cardborder bg-app-header', {
|
||||||
|
paddingTop: headerHeight + (isAndroid ? 15 : 0)
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
|
||||||
|
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||||
|
<View style={tw`flex-row items-center gap-3`}>
|
||||||
|
<Pressable
|
||||||
|
hitSlop={24}
|
||||||
|
onPress={() => navigation.goBack()}
|
||||||
|
>
|
||||||
|
<ArrowLeft size={23} color={tw.color('ink')} />
|
||||||
|
</Pressable>
|
||||||
|
<View style={tw`flex-row items-center gap-1.5`}>
|
||||||
|
<HeaderIconKind routeParams={optionsRoute?.params} kind={kind} />
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={tw`max-w-[200px] text-xl font-bold text-white`}
|
||||||
|
>
|
||||||
|
{headerRoute?.options.title}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={tw`flex-row gap-3`}>
|
||||||
|
{explorerMenu && <Pressable
|
||||||
|
hitSlop={12}
|
||||||
|
onPress={() => {
|
||||||
|
getExplorerStore().toggleMenu = !explorerStore.toggleMenu;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DotsThreeOutline
|
||||||
|
size={24}
|
||||||
|
color={tw.color(
|
||||||
|
explorerStore.toggleMenu ? 'text-accent' : 'text-zinc-300'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Pressable>}
|
||||||
|
<Pressable
|
||||||
|
hitSlop={12}
|
||||||
|
onPress={() => {
|
||||||
|
navigation.navigate('SearchStack', {
|
||||||
|
screen: 'Search'
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MagnifyingGlass
|
||||||
|
size={24}
|
||||||
|
weight="bold"
|
||||||
|
color={tw.color('text-zinc-300')}
|
||||||
|
/>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HeaderIconKindProps {
|
||||||
|
routeParams?: any;
|
||||||
|
kind: Props['kind'];
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderIconKind = ({routeParams, kind }: HeaderIconKindProps) => {
|
||||||
|
switch (kind) {
|
||||||
|
case 'location':
|
||||||
|
return <Icon size={30} name="Folder" />;
|
||||||
|
case 'tag':
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={twStyle('h-[24px] w-[24px] rounded-full', {
|
||||||
|
backgroundColor: routeParams.color
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
|
@ -1,48 +1,25 @@
|
||||||
import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
|
import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { RouteProp, useNavigation } from '@react-navigation/native';
|
||||||
import { NativeStackHeaderProps } from '@react-navigation/native-stack';
|
import { ArrowLeft, List, MagnifyingGlass } from 'phosphor-react-native';
|
||||||
import { ArrowLeft, DotsThreeOutline, List, MagnifyingGlass } from 'phosphor-react-native';
|
|
||||||
import { Platform, Pressable, Text, View } from 'react-native';
|
import { Platform, Pressable, Text, View } from 'react-native';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
import { tw, twStyle } from '~/lib/tailwind';
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
|
|
||||||
|
|
||||||
import { Icon } from '../icons/Icon';
|
type Props = {
|
||||||
import Search from '../search/Search';
|
route?: RouteProp<any, any>; // supporting title from the options object of navigation
|
||||||
|
navBack?: boolean; // whether to show the back icon
|
||||||
type HeaderProps = {
|
search?: boolean; // whether to show the search icon
|
||||||
title?: string; //title of the page
|
title?: string; // in some cases - we want to override the route title
|
||||||
showSearch?: boolean; //show the search button
|
|
||||||
showDrawer?: boolean; //show the drawer button
|
|
||||||
searchType?: 'explorer' | 'location' | 'categories' | 'tags'; //Temporary
|
|
||||||
navBack?: boolean; //navigate back to the previous screen
|
|
||||||
headerKind?: 'default' | 'location' | 'tag'; //kind of header
|
|
||||||
route?: never;
|
|
||||||
routeTitle?: never;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//you can pass in a routeTitle only if route is passed in
|
|
||||||
type Props =
|
|
||||||
| HeaderProps
|
|
||||||
| ({
|
|
||||||
route: NativeStackHeaderProps;
|
|
||||||
routeTitle?: boolean;
|
|
||||||
} & Omit<HeaderProps, 'route' | 'routeTitle'>);
|
|
||||||
|
|
||||||
// Default header with search bar and button to open drawer
|
// Default header with search bar and button to open drawer
|
||||||
export default function Header({
|
export default function Header({
|
||||||
title,
|
|
||||||
searchType,
|
|
||||||
navBack,
|
|
||||||
route,
|
route,
|
||||||
routeTitle,
|
navBack,
|
||||||
headerKind = 'default',
|
title,
|
||||||
showDrawer = false,
|
search = false
|
||||||
showSearch = false,
|
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const navigation = useNavigation<DrawerNavigationHelpers>();
|
const navigation = useNavigation<DrawerNavigationHelpers>();
|
||||||
const explorerStore = useExplorerStore();
|
|
||||||
const routeParams = route?.route.params as any;
|
|
||||||
const headerHeight = useSafeAreaInsets().top;
|
const headerHeight = useSafeAreaInsets().top;
|
||||||
const isAndroid = Platform.OS === 'android';
|
const isAndroid = Platform.OS === 'android';
|
||||||
|
|
||||||
|
@ -55,35 +32,22 @@ export default function Header({
|
||||||
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
|
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
|
||||||
<View style={tw`w-full flex-row items-center justify-between`}>
|
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||||
<View style={tw`flex-row items-center gap-3`}>
|
<View style={tw`flex-row items-center gap-3`}>
|
||||||
{navBack && (
|
{navBack ? (
|
||||||
<Pressable
|
<Pressable
|
||||||
hitSlop={24}
|
hitSlop={24}
|
||||||
onPress={() => {
|
onPress={() => navigation.goBack()}
|
||||||
navigation.goBack();
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<ArrowLeft size={23} color={tw.color('ink')} />
|
<ArrowLeft size={24} color={tw.color('ink')} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
)}
|
|
||||||
<View style={tw`flex-row items-center gap-2`}>
|
) : (
|
||||||
<HeaderIconKind headerKind={headerKind} routeParams={routeParams} />
|
|
||||||
{showDrawer && (
|
|
||||||
<Pressable onPress={() => navigation.openDrawer()}>
|
<Pressable onPress={() => navigation.openDrawer()}>
|
||||||
<List size={24} color={tw.color('text-zinc-300')} />
|
<List size={24} color={tw.color('ink')} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
)}
|
)}
|
||||||
<Text
|
<Text style={tw`text-xl font-bold text-ink`}>{title || route?.name}</Text>
|
||||||
numberOfLines={1}
|
|
||||||
style={tw`max-w-[200px] text-xl font-bold text-white`}
|
|
||||||
>
|
|
||||||
{title || (routeTitle && route?.options.title)}
|
|
||||||
</Text>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
{search && <Pressable
|
||||||
<View style={tw`relative flex-row items-center gap-3`}>
|
|
||||||
{showSearch && (
|
|
||||||
<View style={tw`flex-row items-center gap-2`}>
|
|
||||||
<Pressable
|
|
||||||
hitSlop={24}
|
hitSlop={24}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
navigation.navigate('SearchStack', {
|
navigation.navigate('SearchStack', {
|
||||||
|
@ -96,69 +60,9 @@ export default function Header({
|
||||||
weight="bold"
|
weight="bold"
|
||||||
color={tw.color('text-zinc-300')}
|
color={tw.color('text-zinc-300')}
|
||||||
/>
|
/>
|
||||||
</Pressable>
|
</Pressable>}
|
||||||
</View>
|
</View>
|
||||||
)}
|
|
||||||
{(headerKind === 'location' || headerKind === 'tag') && (
|
|
||||||
<Pressable
|
|
||||||
hitSlop={24}
|
|
||||||
onPress={() => {
|
|
||||||
getExplorerStore().toggleMenu = !explorerStore.toggleMenu;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DotsThreeOutline
|
|
||||||
size={24}
|
|
||||||
color={tw.color(
|
|
||||||
explorerStore.toggleMenu ? 'text-accent' : 'text-zinc-300'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Pressable>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
{searchType && <HeaderSearchType searchType={searchType} />}
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface HeaderSearchTypeProps {
|
|
||||||
searchType: HeaderProps['searchType'];
|
|
||||||
}
|
|
||||||
|
|
||||||
const HeaderSearchType = ({ searchType }: HeaderSearchTypeProps) => {
|
|
||||||
switch (searchType) {
|
|
||||||
case 'explorer':
|
|
||||||
return 'Explorer'; //TODO
|
|
||||||
case 'location':
|
|
||||||
return <Search placeholder="Location name..." />;
|
|
||||||
case 'tags':
|
|
||||||
return <Search placeholder="Tag name..." />;
|
|
||||||
case 'categories':
|
|
||||||
return <Search placeholder="Category name..." />;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HeaderIconKindProps {
|
|
||||||
headerKind: HeaderProps['headerKind'];
|
|
||||||
routeParams?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => {
|
|
||||||
switch (headerKind) {
|
|
||||||
case 'location':
|
|
||||||
return <Icon size={30} name="Folder" />;
|
|
||||||
case 'tag':
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={twStyle('h-[24px] w-[24px] rounded-full', {
|
|
||||||
backgroundColor: routeParams.color
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
53
apps/mobile/src/components/header/SearchHeader.tsx
Normal file
53
apps/mobile/src/components/header/SearchHeader.tsx
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
|
||||||
|
import { RouteProp, useNavigation } from '@react-navigation/native';
|
||||||
|
import { ArrowLeft } from 'phosphor-react-native';
|
||||||
|
import { Platform, Pressable, Text, View } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
|
import Search from '../search/Search';
|
||||||
|
|
||||||
|
|
||||||
|
const searchPlaceholder = {
|
||||||
|
locations: 'Search location name...',
|
||||||
|
tags: 'Search tag name...',
|
||||||
|
categories: 'Search category name...',
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
route?: RouteProp<any, any>; // supporting title from the options object of navigation
|
||||||
|
kind: keyof typeof searchPlaceholder; // the kind of search we are doing
|
||||||
|
title?: string; // in some cases - we want to override the route title
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SearchHeader({
|
||||||
|
route,
|
||||||
|
kind,
|
||||||
|
title
|
||||||
|
}: Props) {
|
||||||
|
const navigation = useNavigation<DrawerNavigationHelpers>();
|
||||||
|
const headerHeight = useSafeAreaInsets().top;
|
||||||
|
const isAndroid = Platform.OS === 'android';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={twStyle('relative h-auto w-full border-b border-app-cardborder bg-app-header', {
|
||||||
|
paddingTop: headerHeight + (isAndroid ? 15 : 0)
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
|
||||||
|
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||||
|
<View style={tw`flex-row items-center gap-3`}>
|
||||||
|
<Pressable
|
||||||
|
hitSlop={24}
|
||||||
|
onPress={() => navigation.goBack()}
|
||||||
|
>
|
||||||
|
<ArrowLeft size={24} color={tw.color('ink')} />
|
||||||
|
</Pressable>
|
||||||
|
<Text style={tw`text-xl font-bold text-ink`}>{title || route?.name}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Search placeholder={searchPlaceholder[kind]} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
|
@ -21,7 +21,7 @@ export default function SearchStack() {
|
||||||
component={FiltersScreen}
|
component={FiltersScreen}
|
||||||
options={{
|
options={{
|
||||||
header: () => {
|
header: () => {
|
||||||
return <Header navBack showSearch={false} title="Search filters" />;
|
return <Header navBack title="Search filters" />;
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -8,6 +8,8 @@ import LocationsScreen from '~/screens/browse/Locations';
|
||||||
import TagScreen from '~/screens/browse/Tag';
|
import TagScreen from '~/screens/browse/Tag';
|
||||||
import TagsScreen from '~/screens/browse/Tags';
|
import TagsScreen from '~/screens/browse/Tags';
|
||||||
|
|
||||||
|
import DynamicHeader from '~/components/header/DynamicHeader';
|
||||||
|
import SearchHeader from '~/components/header/SearchHeader';
|
||||||
import { TabScreenProps } from '../TabNavigator';
|
import { TabScreenProps } from '../TabNavigator';
|
||||||
|
|
||||||
const Stack = createNativeStackNavigator<BrowseStackParamList>();
|
const Stack = createNativeStackNavigator<BrowseStackParamList>();
|
||||||
|
@ -18,44 +20,44 @@ export default function BrowseStack() {
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Browse"
|
name="Browse"
|
||||||
component={BrowseScreen}
|
component={BrowseScreen}
|
||||||
options={{ header: () => <Header showSearch showDrawer title="Browse" /> }}
|
options={({route}) => ({
|
||||||
|
header: () => <Header search route={route} />
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Location"
|
name="Location"
|
||||||
component={LocationScreen}
|
component={LocationScreen}
|
||||||
options={{
|
options={({route: optionsRoute}) => ({
|
||||||
header: (route) => (
|
header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="location" />
|
||||||
<Header route={route} showSearch headerKind="location" routeTitle navBack />
|
})}
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Tags"
|
name="Tags"
|
||||||
component={TagsScreen}
|
component={TagsScreen}
|
||||||
options={{
|
options={({route}) => ({
|
||||||
header: () => <Header searchType='tags' navBack title="Tags" />
|
header: () => <SearchHeader kind="tags" route={route} />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Locations"
|
name="Locations"
|
||||||
component={LocationsScreen}
|
component={LocationsScreen}
|
||||||
options={{
|
options={({route}) => ({
|
||||||
header: () => <Header navBack searchType="location" title="Locations" />
|
header: () => <SearchHeader kind="locations" route={route} />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Tag"
|
name="Tag"
|
||||||
component={TagScreen}
|
component={TagScreen}
|
||||||
options={{
|
options={({route: optionsRoute}) => ({
|
||||||
header: (route) => <Header showSearch navBack routeTitle route={route} headerKind="tag" />
|
header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="tag" />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Library"
|
name="Library"
|
||||||
component={LibraryScreen}
|
component={LibraryScreen}
|
||||||
options={{
|
options={({route}) => ({
|
||||||
header: () => <Header navBack title="Library" />
|
header: () => <Header navBack route={route} />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,9 @@ export default function NetworkStack() {
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Network"
|
name="Network"
|
||||||
component={NetworkScreen}
|
component={NetworkScreen}
|
||||||
options={{ header: () => <Header showSearch showDrawer title="Network" /> }}
|
options={({route}) => ({
|
||||||
|
header: () => <Header search route={route} />
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import { CompositeScreenProps } from '@react-navigation/native';
|
import { CompositeScreenProps } from '@react-navigation/native';
|
||||||
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
|
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||||
import Header from '~/components/header/Header';
|
|
||||||
import CategoriesScreen from '~/screens/overview/Categories';
|
import CategoriesScreen from '~/screens/overview/Categories';
|
||||||
import OverviewScreen from '~/screens/overview/Overview';
|
import OverviewScreen from '~/screens/overview/Overview';
|
||||||
|
|
||||||
|
import Header from '~/components/header/Header';
|
||||||
|
import SearchHeader from '~/components/header/SearchHeader';
|
||||||
import { TabScreenProps } from '../TabNavigator';
|
import { TabScreenProps } from '../TabNavigator';
|
||||||
|
|
||||||
const Stack = createNativeStackNavigator<OverviewStackParamList>();
|
const Stack = createNativeStackNavigator<OverviewStackParamList>();
|
||||||
|
@ -14,14 +15,16 @@ export default function OverviewStack() {
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Overview"
|
name="Overview"
|
||||||
component={OverviewScreen}
|
component={OverviewScreen}
|
||||||
options={{ header: () => <Header showSearch showDrawer title="Overview" /> }}
|
options={({route}) => ({
|
||||||
|
header: () => <Header search route={route} />
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Categories"
|
name="Categories"
|
||||||
component={CategoriesScreen}
|
component={CategoriesScreen}
|
||||||
options={{
|
options={({route}) => ({
|
||||||
header: () => <Header searchType="categories" navBack title="Categories" />
|
header: () => <SearchHeader kind="categories" route={route} />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,6 +18,7 @@ import NodesSettingsScreen from '~/screens/settings/library/NodesSettings';
|
||||||
import TagsSettingsScreen from '~/screens/settings/library/TagsSettings';
|
import TagsSettingsScreen from '~/screens/settings/library/TagsSettings';
|
||||||
import SettingsScreen from '~/screens/settings/Settings';
|
import SettingsScreen from '~/screens/settings/Settings';
|
||||||
|
|
||||||
|
import SearchHeader from '~/components/header/SearchHeader';
|
||||||
import { TabScreenProps } from '../TabNavigator';
|
import { TabScreenProps } from '../TabNavigator';
|
||||||
|
|
||||||
const Stack = createNativeStackNavigator<SettingsStackParamList>();
|
const Stack = createNativeStackNavigator<SettingsStackParamList>();
|
||||||
|
@ -28,7 +29,9 @@ export default function SettingsStack() {
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="Settings"
|
name="Settings"
|
||||||
component={SettingsScreen}
|
component={SettingsScreen}
|
||||||
options={{ header: () => <Header showSearch showDrawer title="Settings" /> }}
|
options={({route}) => ({
|
||||||
|
header: () => <Header search route={route} />
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
{/* Client */}
|
{/* Client */}
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
|
@ -65,9 +68,9 @@ export default function SettingsStack() {
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="LocationSettings"
|
name="LocationSettings"
|
||||||
component={LocationSettingsScreen}
|
component={LocationSettingsScreen}
|
||||||
options={{
|
options={() => ({
|
||||||
header: () => <Header searchType="location" navBack title="Locations" />
|
header: () => <SearchHeader title="Locations" kind="locations" />
|
||||||
}}
|
})}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
name="EditLocationSettings"
|
name="EditLocationSettings"
|
||||||
|
|
Loading…
Reference in a new issue