feat: handle header for home stack

cocrafts · Dec 1, 2023 · 4107dd8 · 4107dd8
1 parent 908cf3c
commit 4107dd8
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 48 deletions.
diff --git a/apps/mobile/src/screens/Dashboard/History/index.tsx b/apps/mobile/src/screens/Dashboard/History/index.tsx
@@ -1,12 +1,10 @@
 import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
-import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { FullHistoryFeature, useSafeAreaInsets } from '@walless/app';
-import { Text, View } from '@walless/gui';
-import { ChevronLeft } from '@walless/icons';
+import { View } from '@walless/gui';
 import { tabBarHeight } from 'stacks/Dashboard/TabBar';
-import { type HomeParamList, navigate } from 'utils/navigation';
+import { type HomeParamList } from 'utils/navigation';
 
 type Props = StackScreenProps<HomeParamList, 'History'>;
 
@@ -17,40 +15,11 @@ export const HistoryScreen: FC<Props> = () => {
 		paddingHorizontal: 8,
 	};
 
-	const handleGoBack = () => {
-		navigate('Dashboard', {
-			screen: 'Home',
-			params: {
-				screen: 'Default',
-			},
-		});
-	};
-
 	return (
 		<View style={containerStyle}>
-			<View style={styles.header}>
-				<TouchableOpacity onPress={handleGoBack}>
-					<ChevronLeft />
-				</TouchableOpacity>
-				<Text style={styles.title}>Transaction History</Text>
-			</View>
-
 			<FullHistoryFeature />
 		</View>
 	);
 };
 
 export default HistoryScreen;
-
-const styles = StyleSheet.create({
-	header: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		paddingVertical: 14,
-		gap: 14,
-	},
-	title: {
-		fontSize: 20,
-		color: '#ffffff',
-	},
-});
diff --git a/apps/mobile/src/stacks/Dashboard/index.tsx b/apps/mobile/src/stacks/Dashboard/index.tsx
@@ -35,7 +35,7 @@ export const DashboardStack = () => {
 			tabBar={(props) => <TabBar tabProps={props} />}
 		>
 			<Tab.Screen name="Explore" component={DrawerStack} options={noHeader} />
-			<Tab.Screen name="Home" component={HomeStack} />
+			<Tab.Screen name="Home" component={HomeStack} options={noHeader} />
 			<Tab.Screen name="Setting" component={SettingStack} />
 		</Tab.Navigator>
 	);

diff --git a/apps/mobile/src/stacks/Drawer/index.tsx b/apps/mobile/src/stacks/Drawer/index.tsx
@@ -27,7 +27,7 @@ export const DrawerStack = () => {
 				<Header
 					title={widgetName ?? 'Explore'}
 					topInset={insets.top}
-					showMenu={true}
+					showIcon
 					toggleDrawer={navigation.toggleDrawer}
 				/>
 			);

diff --git a/apps/mobile/src/stacks/Home/index.tsx b/apps/mobile/src/stacks/Home/index.tsx
@@ -1,23 +1,51 @@
 import type { FC } from 'react';
-import type { StackScreenProps } from '@react-navigation/stack';
+import type {
+	StackNavigationOptions,
+	StackScreenProps,
+} from '@react-navigation/stack';
 import { createStackNavigator } from '@react-navigation/stack';
 import HistoryScreen from 'screens/Dashboard/History';
 import ProfileScreen from 'screens/Dashboard/Home';
+import { useSafeAreaInsets } from 'utils/hooks';
 import type { DashboardParamList, HomeParamList } from 'utils/navigation';
 
+import Header from '../components/Header';
+
 type Props = StackScreenProps<DashboardParamList, 'Home'>;
 
 const Stack = createStackNavigator<HomeParamList>();
 
 export const HomeStack: FC<Props> = () => {
-	const screenOptions = {
-		headerShown: false,
-	};
+	const insets = useSafeAreaInsets();
+
+	const getScreenOptions = (
+		screenName: string,
+		canGoBack: boolean = false,
+	): StackNavigationOptions => ({
+		header({ navigation }) {
+			return (
+				<Header
+					title={screenName}
+					topInset={insets.top}
+					showIcon={canGoBack}
+					goBack={navigation.goBack}
+				/>
+			);
+		},
+	});
 
 	return (
-		<Stack.Navigator screenOptions={screenOptions}>
-			<Stack.Screen name="Default" component={ProfileScreen} />
-			<Stack.Screen name="History" component={HistoryScreen} />
+		<Stack.Navigator>
+			<Stack.Screen
+				name="Default"
+				component={ProfileScreen}
+				options={getScreenOptions('Home')}
+			/>
+			<Stack.Screen
+				name="History"
+				component={HistoryScreen}
+				options={getScreenOptions('Transaction History', true)}
+			/>
 		</Stack.Navigator>
 	);
 };

diff --git a/apps/mobile/src/stacks/components/Header.tsx b/apps/mobile/src/stacks/components/Header.tsx
@@ -1,31 +1,36 @@
 import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Hamburger } from '@walless/icons';
+import { ChevronLeft, Hamburger } from '@walless/icons';
 
 interface HeaderProps {
 	topInset: number;
 	title: string;
-	showMenu?: boolean;
+	showIcon?: boolean;
 	toggleDrawer?: () => void;
+	goBack?: () => void;
 }
 
 const Header: FC<HeaderProps> = ({
 	topInset,
 	title,
-	showMenu,
+	showIcon,
 	toggleDrawer,
+	goBack,
 }) => {
 	const offsetStyle: ViewStyle = {
 		paddingTop: topInset,
 	};
 
+	const handlePressIcon = toggleDrawer ? toggleDrawer : goBack;
+	const Icon = toggleDrawer ? Hamburger : ChevronLeft;
+
 	return (
 		<View style={[offsetStyle, styles.container]}>
 			<View style={styles.textContainer}>
-				{showMenu && (
-					<TouchableOpacity onPress={toggleDrawer}>
-						<Hamburger size={20} />
+				{showIcon && (
+					<TouchableOpacity onPress={handlePressIcon}>
+						<Icon size={20} />
 					</TouchableOpacity>
 				)}
 				<Text style={styles.text}>{title}</Text>