ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Rewrote navigation to show back button when navigating away from home

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-20 23:12:58 +02:00
parent b2073747c9
commit 8943dcadcb
4 changed files with 142 additions and 551 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Sidebar/SideBarSection.js
View file

@ -5,6 +5,7 @@ import {FlatList} from "react-native";
import {Drawer, withTheme} from 'react-native-paper'; import {Drawer, withTheme} from 'react-native-paper';
import {Linking} from "expo"; import {Linking} from "expo";
import AnimatedAccordion from "../Animations/AnimatedAccordion"; import AnimatedAccordion from "../Animations/AnimatedAccordion";
import {StackActions} from '@react-navigation/native';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -55,8 +56,14 @@ class SideBarSection extends React.PureComponent<Props> {
Linking.openURL(item.link); Linking.openURL(item.link);
else if (item.action !== undefined) else if (item.action !== undefined)
item.action(); item.action();
else else if (this.props.activeRoute === "main")
this.props.navigation.navigate(item.route); this.props.navigation.navigate(item.route);
else {
this.props.navigation.dispatch(
StackActions.replace(item.route)
);
this.props.navigation.closeDrawer();
}
} }
/** /**

10
src/components/Sidebar/Sidebar.js
View file

@ -188,11 +188,15 @@ class SideBar extends React.Component<Props, State> {
} }
shouldComponentUpdate(nextProps: Props, nextState: State): boolean { shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
const nextNavigationState = nextProps.state; const nextNavigationState = nextProps.state.routes[0].state;
const nextRoute = nextNavigationState.routes[nextNavigationState.index].name; const nextRoute = nextNavigationState.routes[nextNavigationState.index].name;
const currentNavigationState = this.props.state; let currentRoute = "main";
const currentRoute = currentNavigationState.routes[currentNavigationState.index].name; const currentNavigationState = this.props.state.routes[0].state;
if (currentNavigationState != null) {
currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
}
this.activeRoute = nextRoute; this.activeRoute = nextRoute;
return (nextState !== this.state) return (nextState !== this.state)

672
src/navigation/DrawerNavigator.js
View file

@ -2,7 +2,6 @@
import * as React from 'react'; import * as React from 'react';
import {createDrawerNavigator, DrawerNavigationProp} from '@react-navigation/drawer'; import {createDrawerNavigator, DrawerNavigationProp} from '@react-navigation/drawer';
import TabNavigator from './MainTabNavigator';
import SettingsScreen from '../screens/Other/SettingsScreen'; import SettingsScreen from '../screens/Other/SettingsScreen';
import AboutScreen from '../screens/About/AboutScreen'; import AboutScreen from '../screens/About/AboutScreen';
import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
@ -21,13 +20,13 @@ import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen"; import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
import VoteScreen from "../screens/Amicale/VoteScreen"; import VoteScreen from "../screens/Amicale/VoteScreen";
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
import MaterialHeaderButtons, {Item} from "../components/Overrides/CustomHeaderButton";
import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen"; import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen"; import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen"; import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen"; import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
import {createCollapsibleStack} from "react-navigation-collapsible"; import {createCollapsibleStack} from "react-navigation-collapsible";
import {useTheme} from "react-native-paper"; import {useTheme} from "react-native-paper";
import TabNavigator from "./MainTabNavigator";
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
@ -35,496 +34,137 @@ const defaultScreenOptions = {
...TransitionPresets.SlideFromRightIOS, ...TransitionPresets.SlideFromRightIOS,
}; };
function getDrawerButton(navigation: DrawerNavigationProp) { function createScreenCollapsibleStack (name: string, component: any, title: string, useNativeDriver?: boolean) {
return ( const {colors} = useTheme();
<MaterialHeaderButtons left={true}> return createCollapsibleStack(
<Item title="menu" iconName="menu" onPress={navigation.openDrawer}/> <DrawerStack.Screen
</MaterialHeaderButtons> name={name}
); component={component}
options={{
title: title,
headerStyle: {
backgroundColor: colors.surface,
},
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
}
)
} }
const AboutStack = createStackNavigator(); function getWebsiteStack(name: string, component: any, title: string) {
return createScreenCollapsibleStack(name, component, title, false);
function AboutStackComponent() {
return (
<AboutStack.Navigator
initialRouteName="about"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<AboutStack.Screen
name="about"
component={AboutScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.about'),
headerLeft: openDrawer
};
}}
/>
<AboutStack.Screen
name="dependencies"
component={AboutDependenciesScreen}
options={{
title: i18n.t('aboutScreen.libs')
}}
/>
<AboutStack.Screen
name="debug"
component={DebugScreen}
options={{
title: i18n.t('aboutScreen.debug')
}}
/>
</AboutStack.Navigator>
);
} }
const SettingsStack = createStackNavigator(); const DrawerStack = createStackNavigator();
function SettingsStackComponent() { function DrawerStackComponent(props) {
return ( return (
<SettingsStack.Navigator <DrawerStack.Navigator
initialRouteName="settings" initialRouteName={'main'}
headerMode="float" headerMode={'screen'}
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
<SettingsStack.Screen <DrawerStack.Screen
name="settings" name="main"
component={SettingsScreen} component={props.createTabNavigator}
options={({navigation}) => { options={{
const openDrawer = getDrawerButton.bind(this, navigation); headerShown: false,
return { }}
/>
<DrawerStack.Screen
name="settings"
component={SettingsScreen}
options={{
title: i18n.t('screens.settings'), title: i18n.t('screens.settings'),
headerLeft: openDrawer
};
}}
/>
</SettingsStack.Navigator>
);
}
const SelfMenuStack = createStackNavigator();
function SelfMenuStackComponent() {
const {colors} = useTheme();
return (
<SelfMenuStack.Navigator
initialRouteName="self-menu"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<SelfMenuStack.Screen
name="self-menu"
component={SelfMenuScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.menuSelf'),
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}} }}
/>, />
{ <DrawerStack.Screen
collapsedColor: 'transparent', name="about"
useNativeDriver: true, component={AboutScreen}
} options={{
)} title: i18n.t('screens.about'),
</SelfMenuStack.Navigator>
);
}
const AvailableRoomStack = createStackNavigator();
function AvailableRoomStackComponent() {
const {colors} = useTheme();
return (
<AvailableRoomStack.Navigator
initialRouteName="available-rooms"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<AvailableRoomStack.Screen
name="available-rooms"
component={AvailableRoomScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.availableRooms'),
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}} }}
/>, />
{ <DrawerStack.Screen
collapsedColor: 'transparent', name="dependencies"
useNativeDriver: false, // native driver does not work with webview component={AboutDependenciesScreen}
} options={{
)} title: i18n.t('aboutScreen.libs')
</AvailableRoomStack.Navigator>
);
}
const BibStack = createStackNavigator();
function BibStackComponent() {
const {colors} = useTheme();
return (
<BibStack.Navigator
initialRouteName="bib"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<BibStack.Screen
name="bib"
component={BibScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.bib'),
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}} }}
/>, />
{ <DrawerStack.Screen
collapsedColor: 'transparent', name="debug"
useNativeDriver: false, // native driver does not work with webview component={DebugScreen}
} options={{
)} title: i18n.t('aboutScreen.debug')
</BibStack.Navigator>
);
}
const AmicaleWebsiteStack = createStackNavigator();
function AmicaleWebsiteStackComponent() {
const {colors} = useTheme();
return (
<AmicaleWebsiteStack.Navigator
initialRouteName="amicale-website"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<AmicaleWebsiteStack.Screen
name="amicale-website"
component={AmicaleWebsiteScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "Amicale",
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}} }}
/>, />
{ {createScreenCollapsibleStack("self-menu", SelfMenuScreen, i18n.t('screens.menuSelf'))}
collapsedColor: 'transparent', {getWebsiteStack("available-rooms", AvailableRoomScreen, i18n.t('screens.availableRooms'))}
useNativeDriver: false, // native driver does not work with webview {getWebsiteStack("bib", BibScreen, i18n.t('screens.bib'))}
} {getWebsiteStack("amicale-website", AmicaleWebsiteScreen, "Amicale")}
)} {getWebsiteStack("elus-etudiants", ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
</AmicaleWebsiteStack.Navigator> {getWebsiteStack("wiketud", WiketudWebsiteScreen, "Wiketud")}
); {getWebsiteStack("tutorinsa", TutorInsaWebsiteScreen, "Tutor'INSA")}
} <DrawerStack.Screen
name="tetris"
const ElusEtudiantsStack = createStackNavigator(); component={TetrisScreen}
options={{
function ElusEtudiantsStackComponent() {
const {colors} = useTheme();
return (
<ElusEtudiantsStack.Navigator
initialRouteName="elus-etudiants"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<ElusEtudiantsStack.Screen
name="elus-etudiants"
component={ElusEtudiantsWebsiteScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "Élus Étudiants",
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</ElusEtudiantsStack.Navigator>
);
}
const WiketudStack = createStackNavigator();
function WiketudStackComponent() {
const {colors} = useTheme();
return (
<WiketudStack.Navigator
initialRouteName="wiketud"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<WiketudStack.Screen
name="wiketud"
component={WiketudWebsiteScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "Wiketud",
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</WiketudStack.Navigator>
);
}
const TutorInsaStack = createStackNavigator();
function TutorInsaStackComponent() {
const {colors} = useTheme();
return (
<TutorInsaStack.Navigator
initialRouteName="tutorinsa"
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<TutorInsaStack.Screen
name="tutorinsa"
component={TutorInsaWebsiteScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: "Tutor'INSA",
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</TutorInsaStack.Navigator>
);
}
const TetrisStack = createStackNavigator();
function TetrisStackComponent() {
return (
<TetrisStack.Navigator
initialRouteName="tetris"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<TetrisStack.Screen
name="tetris"
component={TetrisScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t("game.title"), title: i18n.t("game.title"),
headerLeft: openDrawer
};
}}
/>
</TetrisStack.Navigator>
);
}
const LoginStack = createStackNavigator();
function LoginStackComponent() {
return (
<LoginStack.Navigator
initialRouteName="login"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<LoginStack.Screen
name="login"
component={LoginScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.login'),
headerLeft: openDrawer
};
}}
/>
</LoginStack.Navigator>
);
}
const ProfileStack = createStackNavigator();
function ProfileStackComponent() {
return (
<ProfileStack.Navigator
initialRouteName="profile"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<ProfileStack.Screen
name="profile"
component={ProfileScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.profile'),
headerLeft: openDrawer
};
}}
/>
<ClubStack.Screen
name="club-information"
component={ClubDisplayScreen}
options={{
title: i18n.t('screens.clubDisplayScreen'),
...TransitionPresets.ModalSlideFromBottomIOS,
}}
/>
</ProfileStack.Navigator>
);
}
const VoteStack = createStackNavigator();
function VoteStackComponent() {
return (
<VoteStack.Navigator
initialRouteName="vote"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<VoteStack.Screen
name="vote"
component={VoteScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.vote'),
headerLeft: openDrawer
};
}}
/>
</VoteStack.Navigator>
);
}
const AmicaleContactStack = createStackNavigator();
function AmicaleContactStackComponent() {
return (
<AmicaleContactStack.Navigator
initialRouteName="amicale-contact"
headerMode="float"
screenOptions={defaultScreenOptions}
>
<AmicaleContactStack.Screen
name="amicale-contact"
component={AmicaleContactScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('screens.amicaleAbout'),
headerLeft: openDrawer
};
}}
/>
</AmicaleContactStack.Navigator>
);
}
const ClubStack = createStackNavigator();
function ClubStackComponent() {
const {colors} = useTheme();
return (
<ClubStack.Navigator
initialRouteName={"club-list"}
headerMode="float"
screenOptions={defaultScreenOptions}
>
{createCollapsibleStack(
<ClubStack.Screen
name="club-list"
component={ClubListScreen}
options={({navigation}) => {
const openDrawer = getDrawerButton.bind(this, navigation);
return {
title: i18n.t('clubs.clubList'),
headerLeft: openDrawer,
headerStyle: {
backgroundColor: colors.surface,
},
};
}} }}
/>, />
{ <DrawerStack.Screen
collapsedColor: 'transparent', name="login"
useNativeDriver: true, component={LoginScreen}
} options={{
)} title: i18n.t('screens.login'),
<ClubStack.Screen }}
name="club-information" />
component={ClubDisplayScreen} <DrawerStack.Screen
options={{ name="profile"
title: i18n.t('screens.clubDisplayScreen'), component={ProfileScreen}
...TransitionPresets.ModalSlideFromBottomIOS, options={{
}} title: i18n.t('screens.profile'),
/> }}
<ClubStack.Screen />
name="club-about" {createScreenCollapsibleStack("club-list", ClubListScreen, i18n.t('clubs.clubList'))}
component={ClubAboutScreen} <DrawerStack.Screen
options={{ name="club-information"
title: i18n.t('screens.clubsAbout'), component={ClubDisplayScreen}
...TransitionPresets.ModalSlideFromBottomIOS, options={{
}} title: i18n.t('screens.clubDisplayScreen'),
/> ...TransitionPresets.ModalSlideFromBottomIOS,
</ClubStack.Navigator> }}
); />
<DrawerStack.Screen
name="club-about"
component={ClubAboutScreen}
options={{
title: i18n.t('screens.clubsAbout'),
...TransitionPresets.ModalSlideFromBottomIOS,
}}
/>
<DrawerStack.Screen
name="vote"
component={VoteScreen}
options={{
title: i18n.t('screens.vote'),
}}
/>
<DrawerStack.Screen
name="amicale-contact"
component={AmicaleContactScreen}
options={{
title: i18n.t('screens.amicaleAbout'),
}}
/>
</DrawerStack.Navigator>
);
} }
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
type Props = { type Props = {
@ -534,92 +174,32 @@ type Props = {
export default class DrawerNavigator extends React.Component<Props> { export default class DrawerNavigator extends React.Component<Props> {
createTabNavigator: () => React.Element<TabNavigator>; createDrawerStackComponent: () => React.Node;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
this.createTabNavigator = () => <TabNavigator {...props}/> const createTabNavigator = () => <TabNavigator {...props}/>
this.createDrawerStackComponent = () => <DrawerStackComponent createTabNavigator={createTabNavigator}/>;
} }
getDrawerContent = (props: { getDrawerContent = (props: {
navigation: DrawerNavigationProp, navigation: DrawerNavigationProp,
state: {[key: string] : any} state: { [key: string]: any }
}) => <Sidebar {...props}/> }) => <Sidebar {...props}/>
render() { render() {
return ( return (
<Drawer.Navigator <Drawer.Navigator
initialRouteName={'Main'} initialRouteName={'stack'}
headerMode={'float'} headerMode={'none'}
backBehavior={'initialRoute'} backBehavior={'initialRoute'}
drawerType={'front'} drawerType={'front'}
drawerContent={this.getDrawerContent} drawerContent={this.getDrawerContent}
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
<Drawer.Screen <Drawer.Screen
name="main" name="stack"
component={this.createTabNavigator} component={this.createDrawerStackComponent}
>
</Drawer.Screen>
<Drawer.Screen
name="settings"
component={SettingsStackComponent}
/>
<Drawer.Screen
name="about"
component={AboutStackComponent}
/>
<Drawer.Screen
name="self-menu"
component={SelfMenuStackComponent}
/>
<Drawer.Screen
name="available-rooms"
component={AvailableRoomStackComponent}
/>
<Drawer.Screen
name="bib"
component={BibStackComponent}
/>
<Drawer.Screen
name="amicale-website"
component={AmicaleWebsiteStackComponent}
/>
<Drawer.Screen
name="elus-etudiants"
component={ElusEtudiantsStackComponent}
/>
<Drawer.Screen
name="wiketud"
component={WiketudStackComponent}
/>
<Drawer.Screen
name="tutorinsa"
component={TutorInsaStackComponent}
/>
<Drawer.Screen
name="tetris"
component={TetrisStackComponent}
/>
<Drawer.Screen
name="login"
component={LoginStackComponent}
/>
<Drawer.Screen
name="profile"
component={ProfileStackComponent}
/>
<Drawer.Screen
name="club-list"
component={ClubStackComponent}
/>
<Drawer.Screen
name="vote"
component={VoteStackComponent}
/>
<Drawer.Screen
name="amicale-contact"
component={AmicaleContactStackComponent}
/> />
</Drawer.Navigator> </Drawer.Navigator>
); );

2
src/screens/Amicale/LoginScreen.js
View file

@ -75,7 +75,7 @@ class LoginScreen extends React.Component<Props, State> {
hideErrorDialog = () => this.setState({dialogVisible: false}); hideErrorDialog = () => this.setState({dialogVisible: false});
handleSuccess = () => this.props.navigation.navigate(this.nextScreen); handleSuccess = () => this.props.navigation.replace(this.nextScreen);
onResetPasswordClick = () => this.props.navigation.navigate('amicale-website', { onResetPasswordClick = () => this.props.navigation.navigate('amicale-website', {
screen: 'amicale-website', screen: 'amicale-website',