forked from vergnet/application-amicale
Further FlatList performance improvements
This commit is contained in:
parent
8a1b90a860
commit
04793d057e
4 changed files with 14 additions and 1 deletions
|
@ -36,6 +36,8 @@ function ProxiwashListItem(props) {
|
||||||
<Card
|
<Card
|
||||||
style={{
|
style={{
|
||||||
margin: 5,
|
margin: 5,
|
||||||
|
height: props.height,
|
||||||
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
onPress={props.onPress}
|
onPress={props.onPress}
|
||||||
>
|
>
|
||||||
|
@ -99,7 +101,6 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
height: 64
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,7 @@ type Props = {
|
||||||
stickyHeader: boolean,
|
stickyHeader: boolean,
|
||||||
createDataset: Function,
|
createDataset: Function,
|
||||||
updateData: number,
|
updateData: number,
|
||||||
|
itemHeight: number,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -41,6 +42,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
renderSectionHeader: null,
|
renderSectionHeader: null,
|
||||||
stickyHeader: false,
|
stickyHeader: false,
|
||||||
updateData: 0,
|
updateData: 0,
|
||||||
|
itemHeight: undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
refreshInterval: IntervalID;
|
refreshInterval: IntervalID;
|
||||||
|
@ -162,6 +164,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
*/
|
*/
|
||||||
hideSnackBar = () => this.setState({snackbarVisible: false});
|
hideSnackBar = () => this.setState({snackbarVisible: false});
|
||||||
|
|
||||||
|
itemLayout = (data, index) => ({length: this.props.itemHeight, offset: this.props.itemHeight * index, index});
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let dataset = [];
|
let dataset = [];
|
||||||
if (this.state.fetchedData !== undefined)
|
if (this.state.fetchedData !== undefined)
|
||||||
|
@ -193,6 +197,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
|
||||||
icon={"access-point-network-off"}
|
icon={"access-point-network-off"}
|
||||||
onRefresh={this.onRefresh}/>
|
onRefresh={this.onRefresh}/>
|
||||||
}
|
}
|
||||||
|
getItemLayout={this.props.itemHeight !== undefined ? this.itemLayout : undefined}
|
||||||
/>
|
/>
|
||||||
<Snackbar
|
<Snackbar
|
||||||
visible={this.state.snackbarVisible}
|
visible={this.state.snackbarVisible}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {List, withTheme} from 'react-native-paper';
|
||||||
import HeaderButton from "../../components/Custom/HeaderButton";
|
import HeaderButton from "../../components/Custom/HeaderButton";
|
||||||
|
|
||||||
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
||||||
|
const LIST_ITEM_HEIGHT = 84;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -223,6 +224,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
||||||
icon={item.type.icon}
|
icon={item.type.icon}
|
||||||
color={this.colors.primary}/>}
|
color={this.colors.primary}/>}
|
||||||
right={props => <List.Icon {...props} icon={'chevron-right'}/>}
|
right={props => <List.Icon {...props} icon={'chevron-right'}/>}
|
||||||
|
style={{
|
||||||
|
height: LIST_ITEM_HEIGHT,
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else
|
} else
|
||||||
|
|
|
@ -21,6 +21,7 @@ let modalStateStrings = {};
|
||||||
let stateIcons = {};
|
let stateIcons = {};
|
||||||
|
|
||||||
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
|
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
|
||||||
|
const LIST_ITEM_HEIGHT = 64;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -486,6 +487,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
|
||||||
isDryer={isDryer}
|
isDryer={isDryer}
|
||||||
statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]}
|
statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]}
|
||||||
statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]}
|
statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]}
|
||||||
|
height={LIST_ITEM_HEIGHT}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue