Hide side bar items in accordions

This commit is contained in:
Arnaud Vergnet 2020-04-07 17:44:48 +02:00
parent 46dbdb0740
commit f433edf902
2 changed files with 214 additions and 101 deletions
src/components/Sidebar

View 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);

View file

@ -1,15 +1,14 @@
// @flow // @flow
import * as React from 'react'; 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 i18n from "i18n-js";
import {openBrowser} from "../../utils/WebBrowser"; import {TouchableRipple} from "react-native-paper";
import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
import ConnectionManager from "../../managers/ConnectionManager"; import ConnectionManager from "../../managers/ConnectionManager";
import LogoutDialog from "../Amicale/LogoutDialog"; import LogoutDialog from "../Amicale/LogoutDialog";
import SideBarSection from "./SideBarSection";
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get("window").width;
const LIST_ITEM_HEIGHT = 48;
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -30,8 +29,6 @@ class SideBar extends React.Component<Props, State> {
dataSet: Array<Object>; dataSet: Array<Object>;
colors: Object;
/** /**
* Generate the dataset * Generate the dataset
* *
@ -40,16 +37,14 @@ class SideBar extends React.Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
// Dataset used to render the drawer // Dataset used to render the drawer
this.dataSet = [ const mainData = [
{ {
name: i18n.t('screens.home'), name: i18n.t('screens.home'),
route: "Main", route: "Main",
icon: "home", icon: "home",
}, },
{ ];
name: i18n.t('sidenav.divider4'), const amicaleData = [
route: "Divider4"
},
{ {
name: i18n.t('screens.login'), name: i18n.t('screens.login'),
route: "LoginScreen", route: "LoginScreen",
@ -82,10 +77,8 @@ class SideBar extends React.Component<Props, State> {
icon: "logout", icon: "logout",
onlyWhenLoggedIn: true, onlyWhenLoggedIn: true,
}, },
{ ];
name: i18n.t('sidenav.divider2'), const servicesData = [
route: "Divider2"
},
{ {
name: i18n.t('screens.menuSelf'), name: i18n.t('screens.menuSelf'),
route: "SelfMenuScreen", route: "SelfMenuScreen",
@ -113,10 +106,8 @@ class SideBar extends React.Component<Props, State> {
link: "https://ent.insa-toulouse.fr/", link: "https://ent.insa-toulouse.fr/",
icon: "notebook", icon: "notebook",
}, },
{ ];
name: i18n.t('sidenav.divider1'), const websitesData = [
route: "Divider1"
},
{ {
name: "Amicale", name: "Amicale",
route: "AmicaleScreen", route: "AmicaleScreen",
@ -141,10 +132,8 @@ class SideBar extends React.Component<Props, State> {
link: "https://www.etud.insa-toulouse.fr/~tutorinsa/", link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
icon: "school", icon: "school",
}, },
{ ];
name: i18n.t('sidenav.divider3'), const othersData = [
route: "Divider3"
},
{ {
name: i18n.t('screens.settings'), name: i18n.t('screens.settings'),
route: "SettingsScreen", route: "SettingsScreen",
@ -156,7 +145,39 @@ class SideBar extends React.Component<Props, State> {
icon: "information", 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); ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
this.props.navigation.addListener('state', this.onRouteChange); this.props.navigation.addListener('state', this.onRouteChange);
this.state = { this.state = {
@ -166,7 +187,7 @@ class SideBar extends React.Component<Props, State> {
}; };
} }
onRouteChange = (event) => { onRouteChange = (event: Object) => {
try { try {
const state = event.data.state.routes[0].state; // Get the Drawer's state if it exists 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. // Get the current route name. This will only show Drawer routes.
@ -184,34 +205,8 @@ class SideBar extends React.Component<Props, State> {
hideDisconnectDialog = () => this.setState({dialogVisible: false}); hideDisconnectDialog = () => this.setState({dialogVisible: false});
onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn}); 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 * Gets the render item for the given list item
* *
@ -219,46 +214,22 @@ class SideBar extends React.Component<Props, State> {
* @return {*} * @return {*}
*/ */
getRenderItem = ({item}: Object) => { getRenderItem = ({item}: Object) => {
const onListItemPress = this.onListItemPress.bind(this, item); return <SideBarSection
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true; {...this.props}
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true; listKey={item.key}
const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true; activeRoute={this.state.activeRoute}
if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn) isLoggedIn={this.state.isLoggedIn}
return null; sectionName={item.name}
else if (item.icon !== undefined) { startOpen={item.startOpen}
return ( listData={item.data}
<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',
}}
/>
);
}
}; };
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
render() { render() {
const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
return ( return (
<View style={{height: '100%'}}> <View style={{height: '100%'}}>
<TouchableRipple <TouchableRipple
onPress={onPress} onPress={() => this.props.navigation.navigate("TetrisScreen")}
> >
<Image <Image
source={require("../../../assets/drawer-cover.png")} source={require("../../../assets/drawer-cover.png")}
@ -269,10 +240,7 @@ class SideBar extends React.Component<Props, State> {
<FlatList <FlatList
data={this.dataSet} data={this.dataSet}
extraData={this.state.isLoggedIn.toString() + this.state.activeRoute} extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout}
/> />
<LogoutDialog <LogoutDialog
{...this.props} {...this.props}
@ -292,17 +260,6 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
marginTop: 20 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;