feat: hot drawer

Author: funnyzak

src/navigation/Navigator.tsx

@@ -2,57 +2,44 @@
  * Created by leon<[email protected]> on 22/2/21.
  */
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { createDrawerNavigator, DrawerContentComponentProps } from '@react-navigation/drawer'
 import {
+  DefaultTheme,
   getFocusedRouteNameFromRoute,
   NavigationContainer,
   NavigationContainerRefWithCurrent,
+  NavigationProp,
   NavigationState,
   PartialState,
-  DefaultTheme,
-  Route,
-  RouteProp,
-  NavigationProp
+  Route
 } from '@react-navigation/native'
 import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import {
-  createDrawerNavigator,
-  DrawerNavigationProp,
-  getDrawerStatusFromState,
-  useDrawerStatus
-} from '@react-navigation/drawer'
+import { Text } from '@src/components'
 import { ToastProvider } from '@src/components/toast'
 import { useAppSelector } from '@src/hooks'
 import { useUnRead } from '@src/hooks/useUnRead'
 import { changeLocale, LanguageTagType, translate } from '@src/i18n'
 import * as Screens from '@src/screens'
+import { HeaderButton } from '@src/screens/components'
 import { RootState, store } from '@src/store'
 import { ITheme, useTheme } from '@src/theme'
 import { wait } from '@src/utils/utils'
 import dayjs from 'dayjs'
 import enUS from 'dayjs/locale/en'
 import zhCN from 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import React, { ReactNode, useEffect, useState } from 'react'
-import { Image, Platform, StatusBar, TextStyle, View } from 'react-native'
+import React, { ReactNode, useCallback, useEffect, useState } from 'react'
+import { Image, Platform, StatusBar, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { EdgeInsets, SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import SplashScreen from 'react-native-splash-screen'
 import NavigationService from './NavigationService'
-import { MainScreenProps, RootStackParamList, ROUTES } from './routes'
-import { HeaderButton } from '@src/screens/components'
+import { CommonScreenProps, MainScreenProps, RootStackParamList, ROUTES } from './routes'
 
 /**
  * dayjs
  */
 dayjs.extend(relativeTime)
 
-const MainBottomTabNavigator = createBottomTabNavigator()
-const bottomTabBarIconSize = 30
-
-/**
- * Crate Drawer Navigator
- */
-const DrawerNavigator = createDrawerNavigator()
-
 /**
  * header background default style
  * @param borderWidth
@@ -72,31 +59,37 @@ const defaultHeaderBackground = (theme: ITheme, borderWidth?: number): ReactNode
   )
 }
 
-const defaultScreenOptions = (theme: ITheme): NativeStackNavigationOptions => ({
-  animationTypeForReplace: 'push',
-  animation: 'slide_from_right',
-
+const defaultCommonScreenOptions = (theme: ITheme) => ({
   // hide header shadow
   headerShadowVisible: false,
 
   headerStyle: {
     backgroundColor: theme.colors.transparent
   },
-  headerTitleStyle: {
-    fontWeight: 'bold',
-    fontSize: theme.typography.titleText.fontSize
-  },
   headerBackground: () => defaultHeaderBackground(theme),
-  headerBackTitle: undefined,
   headerTintColor: theme.colors.appbarTint,
-  headerBackTitleVisible: false,
 
   // screen main content style
   contentStyle: {
     backgroundColor: theme.colors.background
   }
 })
 
+const defaultScreenOptions = (theme: ITheme): NativeStackNavigationOptions => ({
+  ...defaultCommonScreenOptions(theme),
+
+  animationTypeForReplace: 'push',
+  animation: 'slide_from_right',
+
+  headerTitleStyle: {
+    fontWeight: 'bold',
+    fontSize: theme.typography.titleText.fontSize
+  },
+
+  headerBackTitle: undefined,
+  headerBackTitleVisible: false
+})
+
 const resetLocales = (locale: LanguageTagType) => {
   changeLocale(locale)
   dayjs.locale(locale === 'zh' ? zhCN : enUS)
@@ -111,7 +104,7 @@ const badgeStyles = {
   })
 }
 
-const getHeaderTitle = (
+const getDrawHeaderTitle = (
   route: Partial<Route<string>> & {
     state?: PartialState<NavigationState>
   }
@@ -121,32 +114,23 @@ const getHeaderTitle = (
   // In our case, it's "Feed" as that's the first screen inside the navigator
   const routeName = getFocusedRouteNameFromRoute(route) ?? ROUTES.Hot
   switch (routeName) {
-    case ROUTES.HotDraw:
-      return translate(`router.${ROUTES.Hot}`)
     case ROUTES.Hot:
       return translate(`router.${ROUTES.Hot}`)
     case ROUTES.Latest:
       return translate(`router.${ROUTES.Latest}`)
-    case ROUTES.Nodes:
-      return translate(`router.${ROUTES.Nodes}`)
-    case ROUTES.Notifications:
-      return translate(`router.${ROUTES.Notifications}`)
-    case ROUTES.InterestNodes:
-      return translate(`router.${ROUTES.InterestNodes}`)
-    case ROUTES.My:
-      return translate(`router.${ROUTES.My}`)
   }
 }
 
+const bottomTabBarIconSize = 30
 const renderBottomIcon = (focused: boolean, activeIcon: any, inactiveIcon: any): Element => {
   const icon = focused ? activeIcon : inactiveIcon
   return <Image source={icon} style={{ width: bottomTabBarIconSize, height: bottomTabBarIconSize }} />
 }
 
 const defaultTabBarSetting = (theme: ITheme, insets: EdgeInsets) => {
   return {
-    ...defaultScreenOptions,
-    headerShown: false,
+    ...defaultCommonScreenOptions(theme),
+    headerShown: true,
     tabBarActiveTintColor: theme.colors.tabBarIconActive,
     tabBarInactiveTintColor: theme.colors.tabBarIconInactive,
     tabBarShowLabel: false,
@@ -162,73 +146,121 @@ const defaultTabBarSetting = (theme: ITheme, insets: EdgeInsets) => {
   }
 }
 
-const HotDrawerNavigator = (initialRouteName?: string) => {
+const HotDrawerContent = (props: DrawerContentComponentProps) => {
+  const { theme } = useTheme()
+  const insets = useSafeAreaInsets()
+
+  const isFocus = useCallback(
+    (route_index: number) => {
+      return props.state.index === route_index
+    },
+    [theme, props]
+  )
+
+  const textStyle = useCallback(
+    (route_index: number) => {
+      return {
+        color: isFocus(route_index) ? theme.colors.secondary : theme.colors.captionText
+      }
+    },
+    [theme, props]
+  )
+  return (
+    <View style={[drawContentStyles.drawerContent(theme), { paddingTop: insets.top }]}>
+      <TouchableOpacity
+        style={drawContentStyles.drawItem(theme)}
+        onPress={() => {
+          NavigationService.navigate(ROUTES.Hot)
+        }}>
+        <Image source={theme.assets.images.icons.draw.hot[isFocus(0) ? 'active' : 'inActive']} />
+        <Text type="label" style={textStyle(0)}>
+          {translate(`router.${ROUTES.Hot}`)}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={drawContentStyles.drawItem(theme)}
+        onPress={() => {
+          NavigationService.navigate(ROUTES.Latest)
+        }}>
+        <Image source={theme.assets.images.icons.draw.latest[isFocus(1) ? 'active' : 'inActive']} />
+        <Text type="label" style={textStyle(1)}>
+          {translate(`router.${ROUTES.Latest}`)}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const drawContentStyles = {
+  drawerContent: (theme: ITheme): ViewStyle => ({
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flex: 1,
+    backgroundColor: theme.colors.background
+  }),
+  drawItem: (theme: ITheme): ViewStyle => ({
+    marginBottom: theme.spacing.medium
+  })
+}
+
+/**
+ * Crate Drawer Navigator
+ */
+const HotDraw = createDrawerNavigator()
+const HotDrawerNavigator = ({
+  initialRouteName,
+  navigation
+}: {
+  initialRouteName?: string
+  navigation: NavigationProp<RootStackParamList>
+} & CommonScreenProps) => {
   initialRouteName = initialRouteName ?? ROUTES.Hot
+  const { theme } = useTheme()
 
   return (
-    <DrawerNavigator.Navigator initialRouteName={initialRouteName}>
-      <DrawerNavigator.Screen
+    <HotDraw.Navigator
+      initialRouteName={initialRouteName}
+      drawerContent={(props) => <HotDrawerContent {...props} />}
+      screenOptions={{
+        headerRight: () => (
+          <HeaderButton
+            onPress={() => navigation.navigate(ROUTES.SiteStat)}
+            source={theme.assets.images.icons.header.stat}
+            containerStyle={[{ marginRight: theme.spacing.medium }]}
+          />
+        ),
+        drawerActiveTintColor: theme.colors.secondary,
+        drawerActiveBackgroundColor: theme.colors.secondary,
+        drawerInactiveTintColor: theme.colors.captionText,
+        drawerStyle: { width: 45 }
+      }}>
+      <HotDraw.Screen
+        key={ROUTES.Hot}
         name={ROUTES.Hot}
         component={Screens.HotScreen}
         options={{
-          ...defaultScreenOptions,
-          headerShown: false,
+          ...defaultCommonScreenOptions(theme),
+          headerShown: true,
           title: translate(`router.${ROUTES.Hot}`)
         }}
       />
-      <DrawerNavigator.Screen
+      <HotDraw.Screen
+        key={ROUTES.Latest}
         name={ROUTES.Latest}
         component={Screens.LatestScreen}
         options={{
-          ...defaultScreenOptions,
-          headerShown: false,
+          ...defaultCommonScreenOptions(theme),
+          headerShown: true,
           title: translate(`router.${ROUTES.Latest}`)
         }}
       />
-    </DrawerNavigator.Navigator>
+    </HotDraw.Navigator>
   )
 }
 
-const MainBottomHeaderLeft = ({
-  navigation,
-  route
-}: {
-  route: RouteProp<RootStackParamList>
-  navigation: NavigationProp<RootStackParamList>
-}): ReactNode => {
-  const { theme } = useTheme()
-  const focusRouteName = getFocusedRouteNameFromRoute(route) ?? ROUTES.HotDraw
-  return focusRouteName === ROUTES.HotDraw ? (
-    <HeaderButton
-      source={theme.assets.images.icons.header.more}
-      onPress={() => {
-        console.log(getFocusedRouteNameFromRoute(route))
-      }}
-    />
-  ) : undefined
-}
-
-const MainBottomTabHeaderRight = ({
-  navigation,
-  route
-}: {
-  route: RouteProp<RootStackParamList>
-  navigation: NavigationProp<RootStackParamList>
-}): ReactNode => {
-  const { theme } = useTheme()
-
-  const focusRouteName = getFocusedRouteNameFromRoute(route) ?? ROUTES.HotDraw
-  return focusRouteName === ROUTES.HotDraw ? (
-    <HeaderButton
-      source={theme.assets.images.icons.header.stat}
-      onPress={() => {
-        NavigationService.navigate(ROUTES.SiteStat)
-      }}
-    />
-  ) : undefined
-}
-
-const MainAppNavigator = ({ navigation, route }: MainScreenProps) => {
+const MainBottomTabNavigator = createBottomTabNavigator()
+const MainAppNavigator = () => {
   const insets = useSafeAreaInsets()
   const { unread } = useUnRead()
   const { languageTag } = useAppSelector((state: RootState) => state.setting)
@@ -243,16 +275,17 @@ const MainAppNavigator = ({ navigation, route }: MainScreenProps) => {
       <MainBottomTabNavigator.Screen
         name={ROUTES.HotDraw}
         component={HotDrawerNavigator}
-        options={{
-          title: translate(`router.${ROUTES.HotDraw}`),
+        options={({ route }) => ({
+          title: getDrawHeaderTitle(route),
           ...defaultTabBarSetting(theme, insets),
+          headerShown: false,
           tabBarIcon: ({ focused }) =>
             renderBottomIcon(
               focused,
               theme.assets.images.icons.bottomTab.hot.active,
               theme.assets.images.icons.bottomTab.hot.inActive
             )
-        }}
+        })}
       />
       <MainBottomTabNavigator.Screen
         name={ROUTES.Nodes}
@@ -384,12 +417,8 @@ export const AppNavigationContainer = () => {
               component={MainAppNavigator}
               options={({ route, navigation }) => ({
                 ...defaultScreenOptions(theme),
-                headerShadowVisible: ![ROUTES.HotDraw].includes(
-                  getFocusedRouteNameFromRoute(route) ?? (ROUTES.Nodes as any)
-                ),
-                headerLeft: () => MainBottomHeaderLeft({ route, navigation }),
-                headerRight: () => MainBottomTabHeaderRight({ route, navigation }),
-                headerTitle: getHeaderTitle(route)
+                headerBackground: undefined,
+                headerShown: false
               })}
               initialParams={{
                 initialRouteName: ROUTES.My