toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-34585 Use removeClippedSubviews from Lists to improve scroll perf (#5199) (#5298)

Browse source 
(cherry picked from commit 9c043f1b9f)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
This commit is contained in:
Mattermost Build 2021-04-10 17:56:37 +02:00 committed by GitHub
parent c6df27e51b
commit 95e0e45fc7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 60 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/components/autocomplete/at_mention/at_mention.js
View file

@ -251,15 +251,16 @@ export default class AtMention extends PureComponent {
return (
<SectionList
testID='at_mention_suggestion.list'
keyboardShouldPersistTaps='always'
keyExtractor={this.keyExtractor}
style={[style.listView, {maxHeight: maxListHeight}]}
sections={sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
initialNumToRender={10}
nestedScrollEnabled={nestedScrollEnabled}
removeClippedSubviews={true}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
style={[style.listView, {maxHeight: maxListHeight}]}
sections={sections}
testID='at_mention_suggestion.list'
/>
);
}

11
app/components/autocomplete/channel_mention/channel_mention.js
View file

@ -225,15 +225,16 @@ export default class ChannelMention extends PureComponent {
return (
<SectionList
testID='channel_mention_suggestion.list'
keyboardShouldPersistTaps='always'
keyExtractor={this.keyExtractor}
style={[style.listView, {maxHeight: maxListHeight}]}
sections={sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
initialNumToRender={10}
nestedScrollEnabled={nestedScrollEnabled}
removeClippedSubviews={true}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
style={[style.listView, {maxHeight: maxListHeight}]}
sections={sections}
testID='channel_mention_suggestion.list'
/>
);
}

2
app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap
View file

@ -3036,7 +3036,7 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
numColumns={1}
onEndReachedThreshold={2}
pageSize={10}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={50}
style={

1
app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
View file

@ -230,6 +230,7 @@ export default class EmojiSuggestion extends PureComponent {
extraData={this.state}
data={this.state.dataSource}
keyExtractor={this.keyExtractor}
removeClippedSubviews={true}
renderItem={this.renderItem}
pageSize={10}
initialListSize={10}

2
app/components/autocomplete/slash_suggestion/__snapshots__/slash_suggestion.test.tsx.snap
View file

@ -37,7 +37,7 @@ exports[`components/autocomplete/slash_suggestion should match snapshot 1`] = `
nestedScrollEnabled={false}
numColumns={1}
onEndReachedThreshold={2}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={50}
style={

1
app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
View file

@ -266,6 +266,7 @@ export default class SlashSuggestion extends PureComponent<Props, State> {
extraData={this.state}
data={this.state.dataSource}
keyExtractor={this.keyExtractor}
removeClippedSubviews={true}
renderItem={this.renderItem}
nestedScrollEnabled={nestedScrollEnabled}
/>

2
app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
View file

@ -103,7 +103,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
onScroll={[Function]}
onScrollToIndexFailed={[Function]}
pageSize={50}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
renderSectionHeader={[Function]}
scrollEventThrottle={50}

9
app/components/emoji_picker/emoji_picker_base.js
View file

@ -264,15 +264,16 @@ export default class EmojiPicker extends PureComponent {
listComponent = (
<FlatList
contentContainerStyle={contentContainerStyle}
data={filteredEmojis}
initialListSize={10}
keyboardShouldPersistTaps='always'
keyExtractor={this.flatListKeyExtractor}
initialListSize={10}
ListEmptyComponent={this.renderEmptyList}
nativeID={SCROLLVIEW_NATIVE_ID}
pageSize={10}
renderItem={this.flatListRenderItem}
ListEmptyComponent={this.renderEmptyList}
contentContainerStyle={contentContainerStyle}
removeClippedSubviews={true}
style={styles.flatList}
/>
);
@ -292,7 +293,7 @@ export default class EmojiPicker extends PureComponent {
onScroll={this.onScroll}
onScrollToIndexFailed={this.handleScrollToSectionFailed}
pageSize={50}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
sections={emojis}

6
app/components/post_list/__snapshots__/post_list.test.js.snap
View file

@ -57,7 +57,7 @@ exports[`PostList setting channel deep link 1`] = `
tintColor="#3d3c40"
/>
}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}
style={
@ -134,7 +134,7 @@ exports[`PostList setting permalink deep link 1`] = `
tintColor="#3d3c40"
/>
}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}
style={
@ -211,7 +211,7 @@ exports[`PostList should match snapshot 1`] = `
tintColor="#3d3c40"
/>
}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}
style={

2
app/components/post_list/post_list.js
View file

@ -516,7 +516,7 @@ export default class PostList extends PureComponent {
onScrollToIndexFailed={this.handleScrollToIndexFailed}
ref={this.flatListRef}
refreshControl={refreshControl}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={this.renderItem}
scrollEventThrottle={60}
style={styles.flex}

1
app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
View file

@ -383,6 +383,7 @@ class FilteredList extends Component {
<View style={styles.container}>
<SectionList
sections={dataSource}
removeClippedSubviews={true}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
keyExtractor={this.keyExtractor}

1
app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap
View file

@ -21,6 +21,7 @@ exports[`ChannelsList List should match snapshot 1`] = `
onEndReachedThreshold={2}
onScrollBeginDrag={[Function]}
onViewableItemsChanged={[Function]}
removeClippedSubviews={true}
renderItem={[Function]}
renderSectionHeader={[Function]}
scrollEventThrottle={50}

1
app/components/sidebars/main/channels_list/list/list.js
View file

@ -411,6 +411,7 @@ export default class List extends PureComponent {
ref={this.setListRef}
sections={sections}
contentContainerStyle={{paddingBottom}}
removeClippedSubviews={true}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
keyboardShouldPersistTaps={'always'}

1
app/components/sidebars/main/teams_list/teams_list.js
View file

@ -179,6 +179,7 @@ export default class TeamsList extends PureComponent {
extraData={this.state.serverUrl}
contentContainerStyle={this.listContentPadding()}
data={teamIds}
removeClippedSubviews={true}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
viewabilityConfig={VIEWABILITY_CONFIG}

1
app/screens/pinned_posts/pinned_posts.js
View file

@ -214,6 +214,7 @@ export default class PinnedPosts extends PureComponent {
keyExtractor={this.keyExtractor}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
removeClippedSubviews={true}
renderItem={this.renderPost}
onViewableItemsChanged={this.onViewableItemsChanged}
/>

1
app/screens/recent_mentions/recent_mentions.js
View file

@ -214,6 +214,7 @@ export default class RecentMentions extends PureComponent {
keyExtractor={this.keyExtractor}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
removeClippedSubviews={true}
renderItem={this.renderPost}
onViewableItemsChanged={this.onViewableItemsChanged}
/>

1
app/screens/saved_posts/saved_posts.js
View file

@ -219,6 +219,7 @@ export default class SavedPosts extends PureComponent {
keyExtractor={this.keyExtractor}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
removeClippedSubviews={true}
renderItem={this.renderPost}
onViewableItemsChanged={this.onViewableItemsChanged}
/>

1
app/screens/search/__snapshots__/search.test.js.snap
View file

@ -98,6 +98,7 @@ exports[`Search should match snapshot 1`] = `
onLayout={[Function]}
onScroll={[Function]}
onViewableItemsChanged={[Function]}
removeClippedSubviews={true}
renderSectionHeader={[Function]}
scrollEventThrottle={60}
sections={

1
app/screens/search/search.js
View file

@ -747,6 +747,7 @@ export default class Search extends PureComponent {
<SectionList
ref={this.setListRef}
style={style.sectionList}
removeClippedSubviews={true}
renderSectionHeader={this.renderSectionHeader}
sections={sections}
keyboardShouldPersistTaps='always'

2
app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
View file

@ -78,7 +78,7 @@ exports[`Settings SelectTimezone should match snapshot 1`] = `
maxToRenderPerBatch={15}
numColumns={1}
onEndReachedThreshold={2}
removeClippedSubviews={false}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={50}
updateCellsBatchingPeriod={50}

1
app/screens/settings/timezone/select_timezone/select_timezone.js
View file

@ -137,6 +137,7 @@ export default class Timezone extends PureComponent {
</View>
<FlatList
data={this.filteredTimezones(value)}
removeClippedSubviews={true}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
getItemLayout={this.getItemLayout}

27
app/utils/images.js
View file

@ -141,16 +141,31 @@ export function openGalleryAtIndex(index, files) {
push: {
waitForRender: true,
sharedElementTransitions,
...Platform.select({ios: {
content: contentPush,
}}),
},
pop: {
content: contentPop,
},
},
};
if (Object.keys(contentPush).length) {
options.animations.push = {
...options.animations.push,
...Platform.select({
android: contentPush,
ios: {
content: contentPush,
},
}),
};
}
if (Object.keys(contentPop).length) {
options.animations.pop = Platform.select({
android: contentPop,
ios: {
content: contentPop,
},
});
}
goToScreen(screen, '', passProps, options);
});
}

1
share_extension/screens/channel_list.tsx
View file

@ -172,6 +172,7 @@ const ChannelList = ({intl}: ChannnelListProps) => {
style={styles.flex}
sections={sections}
ItemSeparatorComponent={renderItemSeparator}
removeClippedSubviews={true}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
keyExtractor={keyExtractor}

1
share_extension/screens/team_list.tsx
View file

@ -76,6 +76,7 @@ const TeamList = () => {
testID='share_extension.team_list.screen'
data={teams}
ItemSeparatorComponent={renderItemSeparator}
removeClippedSubviews={true}
renderItem={renderItem}
keyExtractor={keyExtractor}
keyboardShouldPersistTaps='always'