From fd3f6393fec2a96c5e16aeed21a9b3e6b7316133 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Sun, 5 Apr 2020 19:44:34 +0200 Subject: [PATCH] Improved performance and used paper drawer items instead of navigation drawer items --- components/Lists/ProximoListItem.js | 11 +++++++- components/Sidebar/Sidebar.js | 42 ++++++++++++++++++---------- components/Sidebar/SidebarDivider.js | 29 ------------------- components/Sidebar/SidebarItem.js | 34 ---------------------- screens/Proximo/ProximoListScreen.js | 9 ++++++ 5 files changed, 47 insertions(+), 78 deletions(-) delete mode 100644 components/Sidebar/SidebarDivider.js delete mode 100644 components/Sidebar/SidebarItem.js diff --git a/components/Lists/ProximoListItem.js b/components/Lists/ProximoListItem.js index 52a6986..230e63f 100644 --- a/components/Lists/ProximoListItem.js +++ b/components/Lists/ProximoListItem.js @@ -8,9 +8,10 @@ type Props = { onPress: Function, color: string, item: Object, + height: number, } -class ProximoListItem extends React.PureComponent { +class ProximoListItem extends React.Component { colors: Object; @@ -19,6 +20,10 @@ class ProximoListItem extends React.PureComponent { this.colors = props.theme.colors; } + shouldComponentUpdate() { + return false; + } + render() { return ( { {this.props.item.price}€ } + style={{ + height: this.props.height, + justifyContent: 'center', + }} /> ); } diff --git a/components/Sidebar/Sidebar.js b/components/Sidebar/Sidebar.js index deaeaff..06406b1 100644 --- a/components/Sidebar/Sidebar.js +++ b/components/Sidebar/Sidebar.js @@ -4,13 +4,12 @@ import * as React from 'react'; import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native'; import i18n from "i18n-js"; import {openBrowser} from "../../utils/WebBrowser"; -import SidebarDivider from "./SidebarDivider"; -import SidebarItem from "./SidebarItem"; -import {TouchableRipple, withTheme} from "react-native-paper"; +import {Drawer, TouchableRipple, withTheme} from "react-native-paper"; import ConnectionManager from "../../managers/ConnectionManager"; import LogoutDialog from "../Amicale/LogoutDialog"; const deviceWidth = Dimensions.get("window").width; +const LIST_ITEM_HEIGHT = 48; type Props = { navigation: Object, @@ -21,16 +20,16 @@ type Props = { type State = { isLoggedIn: boolean, dialogVisible: boolean, + activeRoute: string; }; /** * Component used to render the drawer menu content */ -class SideBar extends React.PureComponent { +class SideBar extends React.Component { dataSet: Array; - getRenderItem: Function; colors: Object; /** @@ -151,12 +150,12 @@ class SideBar extends React.PureComponent { icon: "information", }, ]; - this.getRenderItem = this.getRenderItem.bind(this); this.colors = props.theme.colors; ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value)); this.state = { isLoggedIn: ConnectionManager.getInstance().isLoggedIn(), dialogVisible: false, + activeRoute: 'Main', }; } @@ -180,8 +179,10 @@ class SideBar extends React.PureComponent { openBrowser(item.link, this.colors.primary); else if (item.action !== undefined) item.action(); - else + else { this.props.navigation.navigate(item.route); + this.setState({activeRoute: item.route}); + } } /** @@ -200,7 +201,7 @@ class SideBar extends React.PureComponent { * @param item The item to render * @return {*} */ - getRenderItem({item}: Object) { + 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; @@ -209,20 +210,31 @@ class SideBar extends React.PureComponent { return null; else if (item.icon !== undefined) { return ( - ); } else { return ( - + ); } + }; - } + itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index}); render() { const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'}); @@ -239,9 +251,11 @@ class SideBar extends React.PureComponent { {/*$FlowFixMe*/} - ); -} - -export default withTheme(SidebarDivider); diff --git a/components/Sidebar/SidebarItem.js b/components/Sidebar/SidebarItem.js deleted file mode 100644 index 7e2a909..0000000 --- a/components/Sidebar/SidebarItem.js +++ /dev/null @@ -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 ( - - } - style={{ - marginLeft: 0, - marginRight: 0, - padding: 0, - borderRadius: 0, - }} - labelStyle={{ - color: colors.text, - }} - /> - ); -} - -export default withTheme(SidebarItem); diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index e076270..91e0dc5 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -32,6 +32,8 @@ function sortNameReverse(a, b) { return 0; } +const LIST_ITEM_HEIGHT = 84; + type Props = { navigation: Object, route: Object, @@ -299,6 +301,7 @@ class ProximoListScreen extends React.Component { item={item} onPress={onPress} color={color} + height={LIST_ITEM_HEIGHT} /> ); } else @@ -324,6 +327,8 @@ class ProximoListScreen extends React.Component { this.modalRef = ref; }; + itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index}); + render() { return ( { extraData={this.state.currentSearchString + this.state.currentSortMode} keyExtractor={this.keyExtractor} renderItem={this.renderItem} + // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration + removeClippedSubviews={true} + getItemLayout={this.itemLayout} + initialNumToRender={10} /> );