verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Try it on RoomsListView

This commit is contained in:
Diego Mello 2022-09-19 17:08:25 -03:00
parent b20c9b1632
commit 7bd4182bf7
2 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/containers/RoomItem/index.tsx
View File

@ -12,7 +12,7 @@ import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED }; export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
const attrs = ['width', 'isFocused', 'showLastMessage', 'autoJoin', 'showAvatar', 'displayMode']; // const attrs = ['width', 'isFocused', 'showLastMessage', 'autoJoin', 'showAvatar', 'displayMode'];
const RoomItemContainer = React.memo( const RoomItemContainer = React.memo(
({ ({
@ -129,8 +129,8 @@ const RoomItemContainer = React.memo(
sourceType={item.source} sourceType={item.source}
/> />
); );
}, }
(props, nextProps) => attrs.every(key => props[key] === nextProps[key]) // (props, nextProps) => attrs.every(key => props[key] === nextProps[key])
); );
export default RoomItemContainer; export default RoomItemContainer;

45
app/views/RoomsListView/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { BackHandler, FlatList, Keyboard, NativeEventSubscription, RefreshControl, Text, View } from 'react-native'; import { BackHandler, Keyboard, NativeEventSubscription, RefreshControl, Text, View } from 'react-native';
import { batch, connect } from 'react-redux'; import { batch, connect } from 'react-redux';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import Orientation from 'react-native-orientation-locker'; import Orientation from 'react-native-orientation-locker';
@ -8,6 +8,7 @@ import { withSafeAreaInsets } from 'react-native-safe-area-context';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { StackNavigationOptions } from '@react-navigation/stack'; import { StackNavigationOptions } from '@react-navigation/stack';
import { Header } from '@react-navigation/elements'; import { Header } from '@react-navigation/elements';
import { FlashList } from '@shopify/flash-list';
import database from '../../lib/database'; import database from '../../lib/database';
import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../containers/RoomItem'; import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../containers/RoomItem';
@ -986,22 +987,23 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
} }
return ( return (
<FlatList <FlashList
ref={this.getScrollRef} ref={this.getScrollRef}
data={searching ? search : chats} data={searching ? search : chats}
extraData={searching ? search : chats} // extraData={searching ? search : chats}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} // style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
renderItem={this.renderItem} renderItem={this.renderItem}
ListHeaderComponent={this.renderListHeader} ListHeaderComponent={this.renderListHeader}
getItemLayout={(data, index) => getItemLayout(data, index, height)} estimatedItemSize={height}
removeClippedSubviews={isIOS} // getItemLayout={(data, index) => getItemLayout(data, index, height)}
// removeClippedSubviews={isIOS}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
initialNumToRender={INITIAL_NUM_TO_RENDER} // initialNumToRender={INITIAL_NUM_TO_RENDER}
refreshControl={ refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} /> <RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
} }
windowSize={9} // windowSize={9}
onEndReached={this.onEndReached} onEndReached={this.onEndReached}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
/> />
@ -1010,13 +1012,36 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
render = () => { render = () => {
console.count(`${this.constructor.name}.render calls`); console.count(`${this.constructor.name}.render calls`);
const { showServerDropdown, theme, navigation } = this.props; const { loading, chats, search, searching } = this.state;
const { showServerDropdown, theme, navigation, displayMode, refreshing } = this.props;
const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
return ( return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar /> <StatusBar />
{this.renderHeader()} {this.renderHeader()}
{this.renderScroll()} {/* {this.renderScroll()} */}
<FlashList
ref={this.getScrollRef}
data={searching ? search : chats}
// extraData={searching ? search : chats}
keyExtractor={keyExtractor}
// style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
renderItem={this.renderItem}
ListHeaderComponent={this.renderListHeader}
estimatedItemSize={height}
// getItemLayout={(data, index) => getItemLayout(data, index, height)}
// removeClippedSubviews={isIOS}
keyboardShouldPersistTaps='always'
// initialNumToRender={INITIAL_NUM_TO_RENDER}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
}
// windowSize={9}
onEndReached={this.onEndReached}
onEndReachedThreshold={0.5}
/>
{/* 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}