-
-
Notifications
You must be signed in to change notification settings - Fork 931
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main' into remove-normalised-cache
- Loading branch information
Showing
9 changed files
with
228 additions
and
151 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.