Improved performance and used paper drawer items instead of navigation drawer items

This commit is contained in:
Arnaud Vergnet 2020-04-05 19:44:34 +02:00
parent 7554fb2854
commit fd3f6393fe
5 changed files with 47 additions and 78 deletions

View file

@ -8,9 +8,10 @@ type Props = {
onPress: Function, onPress: Function,
color: string, color: string,
item: Object, item: Object,
height: number,
} }
class ProximoListItem extends React.PureComponent<Props> { class ProximoListItem extends React.Component<Props> {
colors: Object; colors: Object;
@ -19,6 +20,10 @@ class ProximoListItem extends React.PureComponent<Props> {
this.colors = props.theme.colors; this.colors = props.theme.colors;
} }
shouldComponentUpdate() {
return false;
}
render() { render() {
return ( return (
<List.Item <List.Item
@ -32,6 +37,10 @@ class ProximoListItem extends React.PureComponent<Props> {
<Text style={{fontWeight: "bold"}}> <Text style={{fontWeight: "bold"}}>
{this.props.item.price} {this.props.item.price}
</Text>} </Text>}
style={{
height: this.props.height,
justifyContent: 'center',
}}
/> />
); );
} }

View file

@ -4,13 +4,12 @@ import * as React from 'react';
import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native'; import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {openBrowser} from "../../utils/WebBrowser"; import {openBrowser} from "../../utils/WebBrowser";
import SidebarDivider from "./SidebarDivider"; import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
import SidebarItem from "./SidebarItem";
import {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";
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,
@ -21,16 +20,16 @@ type Props = {
type State = { type State = {
isLoggedIn: boolean, isLoggedIn: boolean,
dialogVisible: boolean, dialogVisible: boolean,
activeRoute: string;
}; };
/** /**
* Component used to render the drawer menu content * Component used to render the drawer menu content
*/ */
class SideBar extends React.PureComponent<Props, State> { class SideBar extends React.Component<Props, State> {
dataSet: Array<Object>; dataSet: Array<Object>;
getRenderItem: Function;
colors: Object; colors: Object;
/** /**
@ -151,12 +150,12 @@ class SideBar extends React.PureComponent<Props, State> {
icon: "information", icon: "information",
}, },
]; ];
this.getRenderItem = this.getRenderItem.bind(this);
this.colors = props.theme.colors; this.colors = props.theme.colors;
ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value)); ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
this.state = { this.state = {
isLoggedIn: ConnectionManager.getInstance().isLoggedIn(), isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
dialogVisible: false, dialogVisible: false,
activeRoute: 'Main',
}; };
} }
@ -180,8 +179,10 @@ class SideBar extends React.PureComponent<Props, State> {
openBrowser(item.link, this.colors.primary); openBrowser(item.link, this.colors.primary);
else if (item.action !== undefined) else if (item.action !== undefined)
item.action(); item.action();
else else {
this.props.navigation.navigate(item.route); this.props.navigation.navigate(item.route);
this.setState({activeRoute: item.route});
}
} }
/** /**
@ -200,7 +201,7 @@ class SideBar extends React.PureComponent<Props, State> {
* @param item The item to render * @param item The item to render
* @return {*} * @return {*}
*/ */
getRenderItem({item}: Object) { getRenderItem = ({item}: Object) => {
const onListItemPress = this.onListItemPress.bind(this, item); const onListItemPress = this.onListItemPress.bind(this, item);
const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true; const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true; const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
@ -209,20 +210,31 @@ class SideBar extends React.PureComponent<Props, State> {
return null; return null;
else if (item.icon !== undefined) { else if (item.icon !== undefined) {
return ( return (
<SidebarItem <Drawer.Item
title={item.name} label={item.name}
active={this.state.activeRoute === item.route}
icon={item.icon} icon={item.icon}
onPress={onListItemPress} onPress={onListItemPress}
shouldEmphasis={shouldEmphasis} style={{
height: LIST_ITEM_HEIGHT,
justifyContent: 'center',
}}
/> />
); );
} else { } else {
return ( return (
<SidebarDivider title={item.name}/> <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'}); const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
@ -239,9 +251,11 @@ class SideBar extends React.PureComponent<Props, State> {
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<FlatList <FlatList
data={this.dataSet} data={this.dataSet}
extraData={this.state.isLoggedIn} extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
keyExtractor={this.listKeyExtractor} 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}

View file

@ -1,29 +0,0 @@
import * as React from 'react';
import {withTheme} from 'react-native-paper';
import {DrawerItem} from "@react-navigation/drawer";
/**
* Component used to render a drawer menu item divider
*
* @param props Props to pass to the component
* @return {*}
*/
function SidebarDivider(props) {
const {colors} = props.theme;
return (
<DrawerItem
label={props.title}
focused={false}
onPress={undefined}
style={{
marginLeft: 0,
marginRight: 0,
padding: 0,
borderRadius: 0,
backgroundColor: colors.dividerBackground
}}
/>
);
}
export default withTheme(SidebarDivider);

View file

@ -1,34 +0,0 @@
import * as React from 'react';
import {withTheme} from 'react-native-paper';
import {DrawerItem} from "@react-navigation/drawer";
import {MaterialCommunityIcons} from "@expo/vector-icons";
/**
* Component used to render a drawer menu item
*
* @param props Props to pass to the component
* @return {*}
*/
function SidebarItem(props) {
const {colors} = props.theme;
return (
<DrawerItem
label={props.title}
focused={false}
onPress={props.onPress}
icon={({color, size}) =>
<MaterialCommunityIcons color={props.shouldEmphasis ? colors.primary : color} size={size} name={props.icon}/>}
style={{
marginLeft: 0,
marginRight: 0,
padding: 0,
borderRadius: 0,
}}
labelStyle={{
color: colors.text,
}}
/>
);
}
export default withTheme(SidebarItem);

View file

@ -32,6 +32,8 @@ function sortNameReverse(a, b) {
return 0; return 0;
} }
const LIST_ITEM_HEIGHT = 84;
type Props = { type Props = {
navigation: Object, navigation: Object,
route: Object, route: Object,
@ -299,6 +301,7 @@ class ProximoListScreen extends React.Component<Props, State> {
item={item} item={item}
onPress={onPress} onPress={onPress}
color={color} color={color}
height={LIST_ITEM_HEIGHT}
/> />
); );
} else } else
@ -324,6 +327,8 @@ class ProximoListScreen extends React.Component<Props, State> {
this.modalRef = ref; this.modalRef = ref;
}; };
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
render() { render() {
return ( return (
<View style={{ <View style={{
@ -338,6 +343,10 @@ class ProximoListScreen extends React.Component<Props, State> {
extraData={this.state.currentSearchString + this.state.currentSortMode} extraData={this.state.currentSearchString + this.state.currentSortMode}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.renderItem} renderItem={this.renderItem}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews={true}
getItemLayout={this.itemLayout}
initialNumToRender={10}
/> />
</View> </View>
); );