2021-06-16 12:10:06 +00:00
|
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
|
2021-03-26 08:38:15 +00:00
|
|
|
import {
|
2021-06-16 12:10:06 +00:00
|
|
|
getFocusedRouteNameFromRoute,
|
|
|
|
RouteProp,
|
2021-09-01 08:47:05 +00:00
|
|
|
useNavigation,
|
2021-06-16 12:10:06 +00:00
|
|
|
useRoute,
|
|
|
|
} from '@react-navigation/native'
|
2021-03-29 09:11:33 +00:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { Icon } from '@ui-kitten/components'
|
2021-02-15 12:33:47 +00:00
|
|
|
import React from 'react'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { StyleProp, TextProps } from 'react-native'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
|
|
|
|
import { defaultStackStyling } from '../design/navigationThemes'
|
2021-09-01 08:47:05 +00:00
|
|
|
import { studentName } from '../utils/peopleHelpers'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { translate } from '../utils/translation'
|
2021-02-12 14:13:07 +00:00
|
|
|
import { Calendar } from './calendar.component'
|
2021-02-20 08:38:08 +00:00
|
|
|
import { ChildProvider } from './childContext.component'
|
2021-04-03 07:36:26 +00:00
|
|
|
import { Menu } from './menu.component'
|
2021-03-26 08:38:15 +00:00
|
|
|
import { RootStackParamList } from './navigation.component'
|
2021-09-01 07:18:58 +00:00
|
|
|
import { NavigationTitle } from './navigationTitle.component'
|
2021-02-15 12:33:47 +00:00
|
|
|
import { NewsList } from './newsList.component'
|
2021-02-12 14:13:07 +00:00
|
|
|
import { NotificationsList } from './notificationsList.component'
|
2020-12-07 20:59:14 +00:00
|
|
|
|
2021-03-29 09:11:33 +00:00
|
|
|
type ChildNavigationProp = StackNavigationProp<RootStackParamList, 'Child'>
|
|
|
|
type ChildRouteProps = RouteProp<RootStackParamList, 'Child'>
|
2021-03-26 08:38:15 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
export type ChildTabParamList = {
|
|
|
|
News: undefined
|
|
|
|
Notifications: undefined
|
|
|
|
Calendar: undefined
|
|
|
|
Menu: undefined
|
|
|
|
}
|
|
|
|
|
2021-03-26 08:38:15 +00:00
|
|
|
interface TabTitleProps {
|
|
|
|
children: string
|
|
|
|
style?: StyleProp<TextProps>
|
|
|
|
}
|
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const { Navigator, Screen } = createBottomTabNavigator<ChildTabParamList>()
|
2021-02-10 10:08:17 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const NewsScreen = () => <NewsList />
|
|
|
|
const NotificationsScreen = () => <NotificationsList />
|
|
|
|
const CalendarScreen = () => <Calendar />
|
|
|
|
const MenuScreen = () => <Menu />
|
2020-12-30 15:11:42 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const TabNavigator = ({
|
|
|
|
initialRouteName = 'News',
|
|
|
|
}: {
|
2021-09-01 07:45:40 +00:00
|
|
|
initialRouteName?: keyof ChildTabParamList
|
2021-06-16 12:10:06 +00:00
|
|
|
}) => (
|
|
|
|
<Navigator
|
|
|
|
initialRouteName={initialRouteName}
|
|
|
|
screenOptions={({ route }) => {
|
|
|
|
return {
|
|
|
|
tabBarIcon: ({ focused, color }) => {
|
|
|
|
let iconName = 'news'
|
2021-02-08 20:13:13 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
if (route.name === 'News')
|
|
|
|
iconName = focused ? 'book-open' : 'book-open-outline'
|
|
|
|
else if (route.name === 'Notifications')
|
|
|
|
iconName = focused ? 'alert-circle' : 'alert-circle-outline'
|
|
|
|
else if (route.name === 'Calendar')
|
|
|
|
iconName = focused ? 'calendar' : 'calendar-outline'
|
|
|
|
else if (route.name === 'Menu')
|
|
|
|
iconName = focused ? 'clipboard' : 'clipboard-outline'
|
|
|
|
return <Icon name={iconName} fill={color} height={24} width={24} />
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}}
|
2021-02-15 12:33:47 +00:00
|
|
|
>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Screen
|
|
|
|
name="News"
|
|
|
|
component={NewsScreen}
|
|
|
|
options={{ title: translate('navigation.news') }}
|
2021-02-10 10:08:17 +00:00
|
|
|
/>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Screen
|
|
|
|
name="Notifications"
|
|
|
|
component={NotificationsScreen}
|
|
|
|
options={{ title: translate('navigation.notifications') }}
|
2021-02-10 10:08:17 +00:00
|
|
|
/>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Screen
|
|
|
|
name="Calendar"
|
|
|
|
component={CalendarScreen}
|
|
|
|
options={{ title: translate('navigation.calender') }}
|
2021-02-10 10:08:17 +00:00
|
|
|
/>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Screen
|
|
|
|
name="Menu"
|
|
|
|
component={MenuScreen}
|
|
|
|
options={{ title: translate('navigation.menu') }}
|
2021-02-10 10:08:17 +00:00
|
|
|
/>
|
|
|
|
</Navigator>
|
|
|
|
)
|
2020-12-22 01:12:08 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const getHeaderTitle = (route: any) => {
|
|
|
|
const routeName = getFocusedRouteNameFromRoute(route) ?? 'News'
|
2021-01-30 13:07:44 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
switch (routeName) {
|
|
|
|
case 'News':
|
|
|
|
return translate('navigation.news')
|
|
|
|
case 'Notifications':
|
|
|
|
return translate('navigation.notifications')
|
|
|
|
case 'Calendar':
|
|
|
|
return translate('navigation.calender')
|
|
|
|
case 'Menu':
|
|
|
|
return translate('navigation.menu')
|
|
|
|
}
|
|
|
|
}
|
2020-12-22 01:12:08 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
export const childRouteOptions = ({
|
|
|
|
route,
|
|
|
|
}: {
|
|
|
|
route: RouteProp<RootStackParamList, 'Child'>
|
|
|
|
}): NativeStackNavigationOptions => {
|
2021-09-01 07:18:58 +00:00
|
|
|
const { child } = route.params
|
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
return {
|
|
|
|
...defaultStackStyling,
|
2021-09-01 07:18:58 +00:00
|
|
|
headerCenter: () => (
|
2021-09-01 08:47:05 +00:00
|
|
|
<NavigationTitle
|
|
|
|
title={getHeaderTitle(route)}
|
|
|
|
subtitle={studentName(child?.name)}
|
|
|
|
/>
|
2021-09-01 07:18:58 +00:00
|
|
|
),
|
2021-02-10 10:08:17 +00:00
|
|
|
}
|
2021-06-16 12:10:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Child = () => {
|
|
|
|
const route = useRoute<ChildRouteProps>()
|
|
|
|
const { child, initialRouteName } = route.params
|
2021-02-10 10:08:17 +00:00
|
|
|
|
2021-09-01 08:47:05 +00:00
|
|
|
const navigation = useNavigation()
|
|
|
|
navigation.setOptions({ title: getHeaderTitle(route) })
|
|
|
|
|
2020-12-16 15:39:22 +00:00
|
|
|
return (
|
2021-06-16 12:10:06 +00:00
|
|
|
<ChildProvider child={child}>
|
2021-09-01 07:45:40 +00:00
|
|
|
<TabNavigator
|
|
|
|
initialRouteName={initialRouteName as keyof ChildTabParamList}
|
|
|
|
/>
|
2021-06-16 12:10:06 +00:00
|
|
|
</ChildProvider>
|
2020-12-16 15:39:22 +00:00
|
|
|
)
|
|
|
|
}
|