forked from vergnet/application-amicale
Hide side bar items in accordions
This commit is contained in:
parent
46dbdb0740
commit
f433edf902
2 changed files with 214 additions and 101 deletions
156
src/components/Sidebar/SideBarSection.js
Normal file
156
src/components/Sidebar/SideBarSection.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {FlatList} from "react-native";
|
||||
import {Drawer, List, withTheme} from 'react-native-paper';
|
||||
import {openBrowser} from "../../utils/WebBrowser";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
startOpen: boolean,
|
||||
isLoggedIn: boolean,
|
||||
sectionName: string,
|
||||
activeRoute: string,
|
||||
listKey: string,
|
||||
listData: Array<Object>,
|
||||
}
|
||||
|
||||
type State = {
|
||||
expanded: boolean
|
||||
}
|
||||
|
||||
const LIST_ITEM_HEIGHT = 48;
|
||||
|
||||
class SideBarSection extends React.PureComponent<Props, State> {
|
||||
|
||||
state = {
|
||||
expanded: this.props.startOpen,
|
||||
};
|
||||
|
||||
colors: Object;
|
||||
shouldExpand: boolean;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.colors = props.theme.colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Searches if the current route is contained in the given list data.
|
||||
* If this is the case and the list is collapsed, we should expand this list.
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
shouldExpandList() {
|
||||
for (let i = 0; i < this.props.listData.length; i++) {
|
||||
if (this.props.listData[i].route === this.props.activeRoute) {
|
||||
return this.state.expanded === false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback when a drawer item is pressed.
|
||||
* It will either navigate to the associated screen, or open the browser to the associated link
|
||||
*
|
||||
* @param item The item pressed
|
||||
*/
|
||||
onListItemPress(item: Object) {
|
||||
if (item.link !== undefined)
|
||||
openBrowser(item.link, this.colors.primary);
|
||||
else if (item.action !== undefined)
|
||||
item.action();
|
||||
else
|
||||
this.props.navigation.navigate(item.route);
|
||||
}
|
||||
|
||||
/**
|
||||
* Key extractor for list items
|
||||
*
|
||||
* @param item The item to extract the key from
|
||||
* @return {string} The extracted key
|
||||
*/
|
||||
listKeyExtractor = (item: Object) => item.route;
|
||||
|
||||
shouldHideItem(item: Object) {
|
||||
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
|
||||
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
|
||||
return (onlyWhenLoggedIn && !this.props.isLoggedIn || onlyWhenLoggedOut && this.props.isLoggedIn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the render item for the given list item
|
||||
*
|
||||
* @param item The item to render
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderItem = ({item}: Object) => {
|
||||
const onListItemPress = this.onListItemPress.bind(this, item);
|
||||
if (this.shouldHideItem(item))
|
||||
return null;
|
||||
return (
|
||||
<Drawer.Item
|
||||
label={item.name}
|
||||
active={this.props.activeRoute === item.route}
|
||||
icon={item.icon}
|
||||
onPress={onListItemPress}
|
||||
style={{
|
||||
height: LIST_ITEM_HEIGHT,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
toggleAccordion = () => {
|
||||
if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
|
||||
this.setState({expanded: !this.state.expanded})
|
||||
};
|
||||
|
||||
shouldRenderAccordion() {
|
||||
let itemsToRender = 0;
|
||||
for (let i = 0; i < this.props.listData.length; i++) {
|
||||
if (!this.shouldHideItem(this.props.listData[i]))
|
||||
itemsToRender += 1;
|
||||
}
|
||||
return itemsToRender > 1;
|
||||
}
|
||||
|
||||
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||
|
||||
getFlatList() {
|
||||
return (
|
||||
// $FlowFixMe
|
||||
<FlatList
|
||||
data={this.props.listData}
|
||||
extraData={this.props.isLoggedIn.toString() + this.props.activeRoute}
|
||||
renderItem={this.getRenderItem}
|
||||
keyExtractor={this.listKeyExtractor}
|
||||
listKey={this.props.listKey}
|
||||
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
||||
getItemLayout={this.itemLayout}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.shouldRenderAccordion()) {
|
||||
this.shouldExpand = this.shouldExpandList();
|
||||
if (this.shouldExpand)
|
||||
this.toggleAccordion();
|
||||
return (
|
||||
<List.Accordion
|
||||
title={this.props.sectionName}
|
||||
expanded={this.state.expanded}
|
||||
onPress={this.toggleAccordion}
|
||||
>
|
||||
{this.getFlatList()}
|
||||
</List.Accordion>
|
||||
);
|
||||
} else
|
||||
return this.getFlatList();
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(SideBarSection);
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
|
||||
import {Dimensions, FlatList, Image, StyleSheet, View,} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import {openBrowser} from "../../utils/WebBrowser";
|
||||
import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
|
||||
import {TouchableRipple} from "react-native-paper";
|
||||
import ConnectionManager from "../../managers/ConnectionManager";
|
||||
import LogoutDialog from "../Amicale/LogoutDialog";
|
||||
import SideBarSection from "./SideBarSection";
|
||||
|
||||
const deviceWidth = Dimensions.get("window").width;
|
||||
const LIST_ITEM_HEIGHT = 48;
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
|
|
@ -30,8 +29,6 @@ class SideBar extends React.Component<Props, State> {
|
|||
|
||||
dataSet: Array<Object>;
|
||||
|
||||
colors: Object;
|
||||
|
||||
/**
|
||||
* Generate the dataset
|
||||
*
|
||||
|
|
@ -40,16 +37,14 @@ class SideBar extends React.Component<Props, State> {
|
|||
constructor(props: Props) {
|
||||
super(props);
|
||||
// Dataset used to render the drawer
|
||||
this.dataSet = [
|
||||
const mainData = [
|
||||
{
|
||||
name: i18n.t('screens.home'),
|
||||
route: "Main",
|
||||
icon: "home",
|
||||
},
|
||||
{
|
||||
name: i18n.t('sidenav.divider4'),
|
||||
route: "Divider4"
|
||||
},
|
||||
];
|
||||
const amicaleData = [
|
||||
{
|
||||
name: i18n.t('screens.login'),
|
||||
route: "LoginScreen",
|
||||
|
|
@ -82,10 +77,8 @@ class SideBar extends React.Component<Props, State> {
|
|||
icon: "logout",
|
||||
onlyWhenLoggedIn: true,
|
||||
},
|
||||
{
|
||||
name: i18n.t('sidenav.divider2'),
|
||||
route: "Divider2"
|
||||
},
|
||||
];
|
||||
const servicesData = [
|
||||
{
|
||||
name: i18n.t('screens.menuSelf'),
|
||||
route: "SelfMenuScreen",
|
||||
|
|
@ -113,10 +106,8 @@ class SideBar extends React.Component<Props, State> {
|
|||
link: "https://ent.insa-toulouse.fr/",
|
||||
icon: "notebook",
|
||||
},
|
||||
{
|
||||
name: i18n.t('sidenav.divider1'),
|
||||
route: "Divider1"
|
||||
},
|
||||
];
|
||||
const websitesData = [
|
||||
{
|
||||
name: "Amicale",
|
||||
route: "AmicaleScreen",
|
||||
|
|
@ -141,10 +132,8 @@ class SideBar extends React.Component<Props, State> {
|
|||
link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
|
||||
icon: "school",
|
||||
},
|
||||
{
|
||||
name: i18n.t('sidenav.divider3'),
|
||||
route: "Divider3"
|
||||
},
|
||||
];
|
||||
const othersData = [
|
||||
{
|
||||
name: i18n.t('screens.settings'),
|
||||
route: "SettingsScreen",
|
||||
|
|
@ -156,7 +145,39 @@ class SideBar extends React.Component<Props, State> {
|
|||
icon: "information",
|
||||
},
|
||||
];
|
||||
this.colors = props.theme.colors;
|
||||
|
||||
this.dataSet = [
|
||||
{
|
||||
key: '1',
|
||||
name: i18n.t('screens.home'),
|
||||
startOpen: true, // App always starts on Main
|
||||
data: mainData
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: i18n.t('sidenav.divider4'),
|
||||
startOpen: false, // TODO set by user preferences
|
||||
data: amicaleData
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: i18n.t('sidenav.divider2'),
|
||||
startOpen: false,
|
||||
data: servicesData
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: i18n.t('sidenav.divider1'),
|
||||
startOpen: false,
|
||||
data: websitesData
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: i18n.t('sidenav.divider3'),
|
||||
startOpen: false,
|
||||
data: othersData
|
||||
},
|
||||
];
|
||||
ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
|
||||
this.props.navigation.addListener('state', this.onRouteChange);
|
||||
this.state = {
|
||||
|
|
@ -166,7 +187,7 @@ class SideBar extends React.Component<Props, State> {
|
|||
};
|
||||
}
|
||||
|
||||
onRouteChange = (event) => {
|
||||
onRouteChange = (event: Object) => {
|
||||
try {
|
||||
const state = event.data.state.routes[0].state; // Get the Drawer's state if it exists
|
||||
// Get the current route name. This will only show Drawer routes.
|
||||
|
|
@ -174,7 +195,7 @@ class SideBar extends React.Component<Props, State> {
|
|||
const routeName = state.routeNames[state.index];
|
||||
if (this.state.activeRoute !== routeName)
|
||||
this.setState({activeRoute: routeName});
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
this.setState({activeRoute: 'Main'});
|
||||
}
|
||||
|
||||
|
|
@ -184,34 +205,8 @@ class SideBar extends React.Component<Props, State> {
|
|||
|
||||
hideDisconnectDialog = () => this.setState({dialogVisible: false});
|
||||
|
||||
|
||||
onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
|
||||
|
||||
/**
|
||||
* Callback when a drawer item is pressed.
|
||||
* It will either navigate to the associated screen, or open the browser to the associated link
|
||||
*
|
||||
* @param item The item pressed
|
||||
*/
|
||||
onListItemPress(item: Object) {
|
||||
if (item.link !== undefined)
|
||||
openBrowser(item.link, this.colors.primary);
|
||||
else if (item.action !== undefined)
|
||||
item.action();
|
||||
else
|
||||
this.props.navigation.navigate(item.route);
|
||||
}
|
||||
|
||||
/**
|
||||
* Key extractor for list items
|
||||
*
|
||||
* @param item The item to extract the key from
|
||||
* @return {string} The extracted key
|
||||
*/
|
||||
listKeyExtractor(item: Object): string {
|
||||
return item.route;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the render item for the given list item
|
||||
*
|
||||
|
|
@ -219,46 +214,22 @@ class SideBar extends React.Component<Props, State> {
|
|||
* @return {*}
|
||||
*/
|
||||
getRenderItem = ({item}: Object) => {
|
||||
const onListItemPress = this.onListItemPress.bind(this, item);
|
||||
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
|
||||
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
|
||||
const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true;
|
||||
if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
|
||||
return null;
|
||||
else if (item.icon !== undefined) {
|
||||
return (
|
||||
<Drawer.Item
|
||||
label={item.name}
|
||||
active={this.state.activeRoute === item.route}
|
||||
icon={item.icon}
|
||||
onPress={onListItemPress}
|
||||
style={{
|
||||
height: LIST_ITEM_HEIGHT,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Drawer.Item
|
||||
label={item.name}
|
||||
style={{
|
||||
height: LIST_ITEM_HEIGHT,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <SideBarSection
|
||||
{...this.props}
|
||||
listKey={item.key}
|
||||
activeRoute={this.state.activeRoute}
|
||||
isLoggedIn={this.state.isLoggedIn}
|
||||
sectionName={item.name}
|
||||
startOpen={item.startOpen}
|
||||
listData={item.data}
|
||||
/>
|
||||
};
|
||||
|
||||
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||
|
||||
render() {
|
||||
const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
|
||||
return (
|
||||
<View style={{height: '100%'}}>
|
||||
<TouchableRipple
|
||||
onPress={onPress}
|
||||
onPress={() => this.props.navigation.navigate("TetrisScreen")}
|
||||
>
|
||||
<Image
|
||||
source={require("../../../assets/drawer-cover.png")}
|
||||
|
|
@ -269,10 +240,7 @@ class SideBar extends React.Component<Props, State> {
|
|||
<FlatList
|
||||
data={this.dataSet}
|
||||
extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
|
||||
keyExtractor={this.listKeyExtractor}
|
||||
renderItem={this.getRenderItem}
|
||||
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
||||
getItemLayout={this.itemLayout}
|
||||
/>
|
||||
<LogoutDialog
|
||||
{...this.props}
|
||||
|
|
@ -292,17 +260,6 @@ const styles = StyleSheet.create({
|
|||
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
|
||||
}
|
||||
});
|
||||
|
||||
export default withTheme(SideBar);
|
||||
export default SideBar;
|
||||
|
|
|
|||
Loading…
Reference in a new issue