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