2019-06-29 13:37:21 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2020-03-05 21:48:37 +01:00
|
|
|
import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
|
|
|
|
import {Container, Left, ListItem, Text} from "native-base";
|
2019-06-25 22:20:24 +02:00
|
|
|
import i18n from "i18n-js";
|
2020-03-05 21:48:37 +01:00
|
|
|
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
2019-08-08 19:45:21 +02:00
|
|
|
import ThemeManager from "../utils/ThemeManager";
|
2020-03-05 10:40:25 +01:00
|
|
|
import * as WebBrowser from 'expo-web-browser';
|
2019-06-25 22:20:24 +02:00
|
|
|
|
2020-01-29 14:05:41 +01:00
|
|
|
const deviceWidth = Dimensions.get("window").width;
|
2019-06-25 22:20:24 +02:00
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
type Props = {
|
|
|
|
navigation: Object,
|
|
|
|
};
|
|
|
|
|
|
|
|
type State = {
|
|
|
|
active: string,
|
|
|
|
};
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
* Class used to define a navigation drawer
|
|
|
|
*/
|
2019-06-29 13:37:21 +02:00
|
|
|
export default class SideBar extends React.Component<Props, State> {
|
|
|
|
|
|
|
|
dataSet: Array<Object>;
|
2019-06-25 22:20:24 +02:00
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
state = {
|
|
|
|
active: 'Home',
|
|
|
|
};
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
getRenderItem: Function;
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
* Generate the datasets
|
|
|
|
*
|
|
|
|
* @param props
|
|
|
|
*/
|
2019-06-29 13:37:21 +02:00
|
|
|
constructor(props: Props) {
|
2019-06-25 22:20:24 +02:00
|
|
|
super(props);
|
2019-08-06 13:28:11 +02:00
|
|
|
// Dataset used to render the drawer
|
2019-06-25 22:20:24 +02:00
|
|
|
this.dataSet = [
|
2020-03-06 09:12:56 +01:00
|
|
|
{
|
|
|
|
name: "Home",
|
|
|
|
route: "Main",
|
|
|
|
icon: "home",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('sidenav.divider2'),
|
|
|
|
route: "Divider2"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('screens.menuSelf'),
|
|
|
|
route: "SelfMenuScreen",
|
|
|
|
icon: "silverware-fork-knife",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('screens.availableRooms'),
|
|
|
|
route: "AvailableRoomScreen",
|
|
|
|
icon: "calendar-check",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Bib',
|
|
|
|
route: "BibScreen",
|
|
|
|
icon: "book",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('screens.bluemind'),
|
|
|
|
route: "BlueMindScreen",
|
|
|
|
link: "https://etud-mel.insa-toulouse.fr/webmail/",
|
|
|
|
icon: "email",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('screens.ent'),
|
|
|
|
route: "EntScreen",
|
|
|
|
link: "https://ent.insa-toulouse.fr/",
|
|
|
|
icon: "notebook",
|
|
|
|
},
|
2020-01-30 17:42:11 +01:00
|
|
|
{
|
|
|
|
name: i18n.t('sidenav.divider1'),
|
|
|
|
route: "Divider1"
|
|
|
|
},
|
2019-07-31 14:43:19 +02:00
|
|
|
{
|
|
|
|
name: "Amicale",
|
2019-11-02 15:44:19 +01:00
|
|
|
route: "AmicaleScreen",
|
2020-03-05 10:40:25 +01:00
|
|
|
link: "https://amicale-insat.fr/",
|
2020-01-31 16:00:22 +01:00
|
|
|
icon: "alpha-a-box",
|
2019-08-05 22:55:45 +02:00
|
|
|
},
|
2020-01-29 13:53:05 +01:00
|
|
|
{
|
|
|
|
name: "Élus Étudiants",
|
|
|
|
route: "ElusEtudScreen",
|
2020-03-05 10:40:25 +01:00
|
|
|
link: "https://etud.insa-toulouse.fr/~eeinsat/",
|
2020-01-29 13:53:05 +01:00
|
|
|
icon: "alpha-e-box",
|
|
|
|
},
|
2019-06-27 10:45:16 +02:00
|
|
|
{
|
|
|
|
name: "Wiketud",
|
2019-11-02 15:44:19 +01:00
|
|
|
route: "WiketudScreen",
|
2020-03-05 10:40:25 +01:00
|
|
|
link: "https://wiki.etud.insa-toulouse.fr",
|
2019-08-05 22:55:45 +02:00
|
|
|
icon: "wikipedia",
|
2019-06-27 10:45:16 +02:00
|
|
|
},
|
2019-09-19 22:33:28 +02:00
|
|
|
{
|
|
|
|
name: "Tutor'INSA",
|
2019-11-02 15:44:19 +01:00
|
|
|
route: "TutorInsaScreen",
|
2020-03-05 10:40:25 +01:00
|
|
|
link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
|
2019-09-19 22:33:28 +02:00
|
|
|
icon: "school",
|
2019-11-02 15:44:19 +01:00
|
|
|
},
|
2020-01-30 17:42:11 +01:00
|
|
|
{
|
|
|
|
name: i18n.t('sidenav.divider3'),
|
|
|
|
route: "Divider3"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: i18n.t('screens.settings'),
|
|
|
|
route: "SettingsScreen",
|
|
|
|
icon: "settings",
|
|
|
|
},
|
2020-01-30 18:58:23 +01:00
|
|
|
{
|
|
|
|
name: i18n.t('screens.about'),
|
|
|
|
route: "AboutScreen",
|
|
|
|
icon: "information",
|
|
|
|
},
|
2019-06-25 22:20:24 +02:00
|
|
|
];
|
2020-02-11 01:05:24 +01:00
|
|
|
this.getRenderItem = this.getRenderItem.bind(this);
|
2019-06-25 22:20:24 +02:00
|
|
|
}
|
|
|
|
|
2020-02-11 01:05:24 +01:00
|
|
|
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
|
|
|
|
return nextState.active !== this.state.active;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-03-05 10:40:25 +01:00
|
|
|
onListItemPress(item: Object) {
|
|
|
|
if (item.link === undefined)
|
|
|
|
this.props.navigation.navigate(item.route);
|
|
|
|
else
|
|
|
|
WebBrowser.openBrowserAsync(item.link);
|
2020-02-11 01:05:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
listKeyExtractor(item: Object) {
|
2020-02-11 01:05:24 +01:00
|
|
|
return item.route;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
getRenderItem({item}: Object) {
|
2020-03-05 10:40:25 +01:00
|
|
|
const onListItemPress = this.onListItemPress.bind(this, item);
|
2020-03-05 21:48:37 +01:00
|
|
|
// return <View/>;
|
2020-01-30 17:42:11 +01:00
|
|
|
if (item.icon !== undefined) {
|
|
|
|
return (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
noBorder
|
|
|
|
selected={this.state.active === item.route}
|
2020-02-23 21:47:36 +01:00
|
|
|
onPress={onListItemPress}
|
2020-01-30 17:42:11 +01:00
|
|
|
>
|
|
|
|
<Left>
|
2020-03-05 21:48:37 +01:00
|
|
|
<MaterialCommunityIcons
|
|
|
|
name={item.icon}
|
|
|
|
size={26}
|
|
|
|
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
|
2020-01-30 17:42:11 +01:00
|
|
|
/>
|
|
|
|
<Text style={styles.text}>
|
|
|
|
{item.name}
|
|
|
|
</Text>
|
|
|
|
</Left>
|
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<ListItem itemDivider>
|
|
|
|
<Text>{item.name}</Text>
|
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2019-06-25 22:20:24 +02:00
|
|
|
render() {
|
2020-03-05 21:48:37 +01:00
|
|
|
console.log("rendering SideBar");
|
2019-06-25 22:20:24 +02:00
|
|
|
return (
|
2020-01-29 09:30:27 +01:00
|
|
|
<Container style={{
|
|
|
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
|
|
}}>
|
2020-03-05 21:48:37 +01:00
|
|
|
<Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
|
2020-01-29 09:30:27 +01:00
|
|
|
<FlatList
|
|
|
|
data={this.dataSet}
|
|
|
|
extraData={this.state}
|
2020-02-11 01:05:24 +01:00
|
|
|
keyExtractor={this.listKeyExtractor}
|
|
|
|
renderItem={this.getRenderItem}
|
2020-01-29 09:30:27 +01:00
|
|
|
/>
|
2019-06-25 22:20:24 +02:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
drawerCover: {
|
2020-01-29 14:05:41 +01:00
|
|
|
height: deviceWidth / 3,
|
|
|
|
width: 2 * deviceWidth / 3,
|
2019-06-25 22:20:24 +02:00
|
|
|
position: "relative",
|
|
|
|
marginBottom: 10,
|
|
|
|
marginTop: 20
|
|
|
|
},
|
|
|
|
text: {
|
|
|
|
fontWeight: Platform.OS === "ios" ? "500" : "400",
|
|
|
|
fontSize: 16,
|
|
|
|
marginLeft: 20
|
|
|
|
},
|
|
|
|
badgeText: {
|
|
|
|
fontSize: Platform.OS === "ios" ? 13 : 11,
|
|
|
|
fontWeight: "400",
|
|
|
|
textAlign: "center",
|
|
|
|
marginTop: Platform.OS === "android" ? -3 : undefined
|
|
|
|
}
|
|
|
|
});
|