application-amicale/components/Sidebar.js

152 lines
5 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-native';
import {Badge, Container, Content, Left, ListItem, Right, Text} from "native-base";
2019-06-25 22:20:24 +02:00
import i18n from "i18n-js";
2019-06-28 11:35:15 +02:00
import CustomMaterialIcon from '../components/CustomMaterialIcon';
import ThemeManager from "../utils/ThemeManager";
2019-06-25 22:20:24 +02:00
const deviceHeight = Dimensions.get("window").height;
const drawerCover = require("../assets/drawer-cover.png");
const WIKETUD_LINK = "https://www.etud.insa-toulouse.fr/wiketud";
2019-07-31 14:43:19 +02:00
const Amicale_LINK = "https://www.etud.insa-toulouse.fr/~amicale";
const RU_LINK = "http://m.insa-toulouse.fr/ru.html";
2019-06-27 10:45:16 +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
*/
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',
};
/**
* Generate the datasets
*
* @param props
*/
constructor(props: Props) {
2019-06-25 22:20:24 +02:00
super(props);
// Dataset used to render the drawer
// If the link field is defined, clicking on the item will open the link
2019-06-25 22:20:24 +02:00
this.dataSet = [
2019-07-31 14:43:19 +02:00
{
name: "Amicale",
route: "amicale",
icon: "web",
link: Amicale_LINK
},
2019-06-27 10:45:16 +02:00
{
name: "Wiketud",
2019-07-31 14:43:19 +02:00
route: "wiketud",
icon: "wikipedia",
link: WIKETUD_LINK
2019-06-27 10:45:16 +02:00
},
{
name: i18n.t('screens.menuSelf'),
route: "SelfMenuScreen",
icon: "silverware-fork-knife",
},
2019-06-25 22:20:24 +02:00
];
}
2019-06-29 15:43:57 +02:00
/**
* Navigate to the selected route, close the drawer, and mark the correct item as selected
* @param route {string} The route name to navigate to
*/
navigateToScreen(route: string) {
2019-06-25 22:20:24 +02:00
this.props.navigation.navigate(route);
};
render() {
return (
<Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
2019-06-25 22:20:24 +02:00
<Content
bounces={false}
2019-06-27 10:45:16 +02:00
style={{flex: 1, top: -1}}
2019-06-25 22:20:24 +02:00
>
2019-06-27 10:45:16 +02:00
<Image source={drawerCover} style={styles.drawerCover}/>
2019-06-25 22:20:24 +02:00
<FlatList
data={this.dataSet}
extraData={this.state}
keyExtractor={(item) => item.route}
2019-06-25 22:20:24 +02:00
renderItem={({item}) =>
<ListItem
button
noBorder
2019-06-25 22:20:24 +02:00
selected={this.state.active === item.route}
2019-06-27 10:45:16 +02:00
onPress={() => {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
2019-06-27 10:45:16 +02:00
this.navigateToScreen(item.route);
}}
2019-06-25 22:20:24 +02:00
>
<Left>
2019-06-28 11:35:15 +02:00
<CustomMaterialIcon
icon={item.icon}
active={this.state.active === item.route}
2019-06-25 22:20:24 +02:00
/>
<Text style={styles.text}>
{item.name}
</Text>
</Left>
{item.types &&
2019-06-27 10:45:16 +02:00
<Right style={{flex: 1}}>
2019-06-25 22:20:24 +02:00
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: item.bg
}}
>
<Text
style={styles.badgeText}
>{`${item.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
drawerCover: {
alignSelf: "stretch",
height: deviceHeight / 4,
width: null,
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
}
});