Move renderScroll to component based approach.

Declare getItemType.
Add this.props to extraData.
This commit is contained in:
Diego Mello 2022-11-30 17:43:11 -03:00
parent 04e49563f2
commit 53cda7ecb1
1 changed files with 28 additions and 35 deletions

View File

@ -866,48 +866,41 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
);
};
renderScroll = () => {
const { loading, chats, search, searching } = this.state;
const { theme, refreshing, displayMode } = this.props;
const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
if (loading) {
return <ActivityIndicator />;
}
return (
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
<FlashList
ref={this.getScrollRef}
data={searching ? search : chats}
extraData={theme || refreshing || displayMode}
keyExtractor={keyExtractor}
renderItem={this.renderItem}
ListHeaderComponent={this.renderListHeader}
estimatedItemSize={height}
keyboardShouldPersistTaps='always'
refreshControl={
searching ? undefined : (
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
)
}
onEndReached={this.isGrouping ? undefined : this.onEndReached}
onEndReachedThreshold={this.isGrouping ? undefined : 0.5}
/>
</View>
);
};
render = () => {
console.count(`${this.constructor.name}.render calls`);
const { showServerDropdown, theme, navigation } = this.props;
const { showServerDropdown, theme, navigation, refreshing, displayMode } = this.props;
const { loading, chats, search, searching } = this.state;
const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar />
{this.renderHeader()}
{this.renderScroll()}
{loading ? (
<ActivityIndicator />
) : (
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
<FlashList
ref={this.getScrollRef}
data={searching ? search : chats}
extraData={this.props}
keyExtractor={keyExtractor}
renderItem={this.renderItem}
getItemType={item => (item.separator ? 'section' : 'item')}
ListHeaderComponent={this.renderListHeader}
estimatedItemSize={height}
keyboardShouldPersistTaps='always'
refreshControl={
searching ? undefined : (
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
)
}
onEndReached={this.isGrouping ? undefined : this.onEndReached}
onEndReachedThreshold={this.isGrouping ? undefined : 0.5}
/>
</View>
)}
{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
{/* @ts-ignore*/}
{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}