forked from vergnet/application-amicale
245 lines
9.2 KiB
JavaScript
245 lines
9.2 KiB
JavaScript
import * as React from 'react';
|
|
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
|
|
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
|
|
import HomeScreen from '../screens/Home/HomeScreen';
|
|
import PlanningScreen from '../screens/Planning/PlanningScreen';
|
|
import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen';
|
|
import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
|
|
import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
|
|
import PlanexScreen from '../screens/Planex/PlanexScreen';
|
|
import AsyncStorageManager from "../managers/AsyncStorageManager";
|
|
import {Title, useTheme} from 'react-native-paper';
|
|
import {Platform} from 'react-native';
|
|
import i18n from "i18n-js";
|
|
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
|
|
import ScannerScreen from "../screens/Home/ScannerScreen";
|
|
import FeedItemScreen from "../screens/Home/FeedItemScreen";
|
|
import {createCollapsibleStack} from "react-navigation-collapsible";
|
|
import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen";
|
|
import CustomTabBar from "../components/Tabbar/CustomTabBar";
|
|
import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
|
|
import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
|
|
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
|
|
import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
|
|
import {View} from "react-native-animatable";
|
|
import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot";
|
|
|
|
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
|
|
|
|
|
|
const defaultScreenOptions = {
|
|
gestureEnabled: true,
|
|
cardOverlayEnabled: true,
|
|
...modalTransition,
|
|
};
|
|
|
|
|
|
const ServicesStack = createStackNavigator();
|
|
|
|
function ServicesStackComponent() {
|
|
return (
|
|
<ServicesStack.Navigator
|
|
initialRouteName="index"
|
|
headerMode={"screen"}
|
|
screenOptions={defaultScreenOptions}
|
|
>
|
|
{createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services.title'))}
|
|
{createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
|
|
{createScreenCollapsibleStack("amicale-contact", ServicesStack, AmicaleContactScreen, i18n.t('screens.amicaleAbout.title'))}
|
|
</ServicesStack.Navigator>
|
|
);
|
|
}
|
|
|
|
const ProxiwashStack = createStackNavigator();
|
|
|
|
function ProxiwashStackComponent() {
|
|
return (
|
|
<ProxiwashStack.Navigator
|
|
initialRouteName="index"
|
|
headerMode={"screen"}
|
|
screenOptions={defaultScreenOptions}
|
|
>
|
|
{createScreenCollapsibleStack("index", ProxiwashStack, ProxiwashScreen, i18n.t('screens.proxiwash.title'))}
|
|
<ProxiwashStack.Screen
|
|
name="proxiwash-about"
|
|
component={ProxiwashAboutScreen}
|
|
options={{title: i18n.t('screens.proxiwash.title'),}}
|
|
/>
|
|
</ProxiwashStack.Navigator>
|
|
);
|
|
}
|
|
|
|
const PlanningStack = createStackNavigator();
|
|
|
|
function PlanningStackComponent() {
|
|
return (
|
|
<PlanningStack.Navigator
|
|
initialRouteName="index"
|
|
headerMode={"screen"}
|
|
screenOptions={defaultScreenOptions}
|
|
>
|
|
<PlanningStack.Screen
|
|
name="index"
|
|
component={PlanningScreen}
|
|
options={{title: i18n.t('screens.planning.title'),}}
|
|
/>
|
|
<PlanningStack.Screen
|
|
name="planning-information"
|
|
component={PlanningDisplayScreen}
|
|
options={{title: i18n.t('screens.planning.eventDetails'),}}
|
|
/>
|
|
</PlanningStack.Navigator>
|
|
);
|
|
}
|
|
|
|
const HomeStack = createStackNavigator();
|
|
|
|
function HomeStackComponent(initialRoute: string | null, defaultData: { [key: string]: any }) {
|
|
let params = undefined;
|
|
if (initialRoute != null)
|
|
params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
|
|
const {colors} = useTheme();
|
|
return (
|
|
<HomeStack.Navigator
|
|
initialRouteName={"index"}
|
|
headerMode={"screen"}
|
|
screenOptions={defaultScreenOptions}
|
|
>
|
|
{createCollapsibleStack(
|
|
<HomeStack.Screen
|
|
name="index"
|
|
component={HomeScreen}
|
|
options={{
|
|
title: i18n.t('screens.home.title'),
|
|
headerStyle: {
|
|
backgroundColor: colors.surface,
|
|
},
|
|
headerTitle: (props) => <View style={{flexDirection: "row"}}>
|
|
<Mascot
|
|
style={{
|
|
width: 50
|
|
}}
|
|
emotion={MASCOT_STYLE.RANDOM}
|
|
animated={true}
|
|
entryAnimation={{
|
|
animation: "bounceIn",
|
|
duration: 1000
|
|
}}
|
|
loopAnimation={{
|
|
animation: "pulse",
|
|
duration: 2000,
|
|
iterationCount: "infinite"
|
|
}}
|
|
/>
|
|
<Title style={{
|
|
marginLeft: 10,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}}>{i18n.t('screens.home.title')}</Title>
|
|
</View>
|
|
}}
|
|
initialParams={params}
|
|
/>,
|
|
{
|
|
collapsedColor: colors.surface,
|
|
useNativeDriver: true,
|
|
}
|
|
)}
|
|
<HomeStack.Screen
|
|
name="scanner"
|
|
component={ScannerScreen}
|
|
options={{title: i18n.t('screens.scanner.title'),}}
|
|
/>
|
|
<HomeStack.Screen
|
|
name="club-information"
|
|
component={ClubDisplayScreen}
|
|
options={{title: i18n.t('screens.clubs.details'),}}
|
|
/>
|
|
<HomeStack.Screen
|
|
name="feed-information"
|
|
component={FeedItemScreen}
|
|
options={{title: i18n.t('screens.home.feed'),}}
|
|
/>
|
|
<HomeStack.Screen
|
|
name="planning-information"
|
|
component={PlanningDisplayScreen}
|
|
options={{title: i18n.t('screens.planning.eventDetails'),}}
|
|
/>
|
|
</HomeStack.Navigator>
|
|
);
|
|
}
|
|
|
|
const PlanexStack = createStackNavigator();
|
|
|
|
function PlanexStackComponent() {
|
|
return (
|
|
<PlanexStack.Navigator
|
|
initialRouteName="index"
|
|
headerMode={"screen"}
|
|
screenOptions={defaultScreenOptions}
|
|
>
|
|
{getWebsiteStack("index", PlanexStack, PlanexScreen, i18n.t("screens.planex.title"))}
|
|
{createScreenCollapsibleStack("group-select", PlanexStack, GroupSelectionScreen, "GROUP SELECT")}
|
|
</PlanexStack.Navigator>
|
|
);
|
|
}
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
type Props = {
|
|
defaultHomeRoute: string | null,
|
|
defaultHomeData: { [key: string]: any }
|
|
}
|
|
|
|
export default class TabNavigator extends React.Component<Props> {
|
|
|
|
createHomeStackComponent: () => HomeStackComponent;
|
|
defaultRoute: string;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
if (props.defaultHomeRoute != null)
|
|
this.defaultRoute = 'home';
|
|
else
|
|
this.defaultRoute = AsyncStorageManager.getInstance().preferences.defaultStartScreen.current.toLowerCase();
|
|
this.createHomeStackComponent = () => HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Tab.Navigator
|
|
initialRouteName={this.defaultRoute}
|
|
tabBar={props => <CustomTabBar {...props} />}
|
|
>
|
|
<Tab.Screen
|
|
name="services"
|
|
option
|
|
component={ServicesStackComponent}
|
|
options={{title: i18n.t('screens.services.title')}}
|
|
/>
|
|
<Tab.Screen
|
|
name="proxiwash"
|
|
component={ProxiwashStackComponent}
|
|
options={{title: i18n.t('screens.proxiwash.title')}}
|
|
/>
|
|
<Tab.Screen
|
|
name="home"
|
|
component={this.createHomeStackComponent}
|
|
options={{title: i18n.t('screens.home.title')}}
|
|
/>
|
|
<Tab.Screen
|
|
name="planning"
|
|
component={PlanningStackComponent}
|
|
options={{title: i18n.t('screens.planning.title')}}
|
|
/>
|
|
|
|
<Tab.Screen
|
|
name="planex"
|
|
component={PlanexStackComponent}
|
|
options={{title: i18n.t("screens.planex.title")}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|
|
}
|