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
src/components/Sidebar
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
|
// @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;
|
||||||
|
|
Loading…
Reference in a new issue