From fbf712dc8e51e30922e8aae6025008ca3feff64a Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Mon, 18 Nov 2019 15:09:09 +0100 Subject: [PATCH] MM-19993 Fix Channel spinner is black on dark theme (#3564) --- .../autocomplete_section_header.js | 7 +++- .../__snapshots__/index.test.js.snap | 10 +++++ app/components/custom_list/index.js | 13 +++++-- .../edit_channel_info/edit_channel_info.js | 2 +- .../emoji_picker/emoji_picker_base.js | 2 +- .../load_more_posts/load_more_posts.js | 2 +- .../__snapshots__/post_list.test.js.snap | 39 +++++++++++++++++-- app/components/post_list/post_list.js | 17 ++++---- app/screens/channel/channel_base.js | 5 ++- .../channel_add_members.js | 2 +- .../channel_members/channel_members.js | 2 +- app/screens/edit_post/edit_post.js | 2 +- app/screens/edit_profile/edit_profile.js | 2 +- .../error_teams_list/error_teams_list.js | 2 +- app/screens/more_channels/more_channels.js | 2 +- app/screens/more_dms/more_dms.js | 2 +- .../__snapshots__/permalink.test.js.snap | 2 +- app/screens/permalink/permalink.js | 2 +- app/screens/search/search.js | 10 +++-- .../__snapshots__/select_team.test.js.snap | 18 ++++++--- app/screens/select_team/select_team.js | 14 ++++++- .../terms_of_service.test.js.snap | 4 +- .../terms_of_service/terms_of_service.js | 2 +- .../__snapshots__/thread.ios.test.js.snap | 8 ++-- app/screens/thread/thread.android.js | 2 +- app/screens/thread/thread.ios.js | 2 +- app/screens/thread/thread_base.js | 10 +++-- 27 files changed, 134 insertions(+), 51 deletions(-) diff --git a/app/components/autocomplete/autocomplete_section_header.js b/app/components/autocomplete/autocomplete_section_header.js index 997a8cf449..0fb6f6d806 100644 --- a/app/components/autocomplete/autocomplete_section_header.js +++ b/app/components/autocomplete/autocomplete_section_header.js @@ -34,7 +34,12 @@ export default class AutocompleteSectionHeader extends PureComponent { defaultMessage={defaultMessage} style={style.sectionText} /> - {loading && } + {loading && + + } ); diff --git a/app/components/custom_list/__snapshots__/index.test.js.snap b/app/components/custom_list/__snapshots__/index.test.js.snap index 38087a1d36..e205d5f3eb 100644 --- a/app/components/custom_list/__snapshots__/index.test.js.snap +++ b/app/components/custom_list/__snapshots__/index.test.js.snap @@ -31,6 +31,16 @@ exports[`CustomList should match snapshot with FlatList 1`] = ` onEndReachedThreshold={2} onLayout={[Function]} onScroll={[Function]} + refreshControl={ + + } removeClippedSubviews={true} renderItem={[Function]} scrollEventThrottle={60} diff --git a/app/components/custom_list/index.js b/app/components/custom_list/index.js index 42ae0461df..5b2acf0bb4 100644 --- a/app/components/custom_list/index.js +++ b/app/components/custom_list/index.js @@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {FlatList, Keyboard, Platform, SectionList, Text, View} from 'react-native'; +import {FlatList, Keyboard, Platform, RefreshControl, SectionList, Text, View} from 'react-native'; import {ListTypes} from 'app/constants'; import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme'; @@ -113,6 +113,14 @@ export default class CustomList extends PureComponent { const {data, extraData, theme, onRefresh, refreshing} = this.props; const style = getStyleFromTheme(theme); + const refreshControl = ( + ); + return ( - + ); } diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js index cafb8788f8..58d6f4e30e 100644 --- a/app/components/emoji_picker/emoji_picker_base.js +++ b/app/components/emoji_picker/emoji_picker_base.js @@ -440,7 +440,7 @@ export default class EmojiPicker extends PureComponent { const styles = getStyleSheetFromTheme(theme); return ( - + ); }; diff --git a/app/components/load_more_posts/load_more_posts.js b/app/components/load_more_posts/load_more_posts.js index 15e7c94b12..6578b44893 100644 --- a/app/components/load_more_posts/load_more_posts.js +++ b/app/components/load_more_posts/load_more_posts.js @@ -46,7 +46,7 @@ export default class LoadMorePosts extends PureComponent { return ( - + ); } diff --git a/app/components/post_list/__snapshots__/post_list.test.js.snap b/app/components/post_list/__snapshots__/post_list.test.js.snap index 82979e601b..0c882c26fe 100644 --- a/app/components/post_list/__snapshots__/post_list.test.js.snap +++ b/app/components/post_list/__snapshots__/post_list.test.js.snap @@ -41,7 +41,18 @@ exports[`PostList setting channel deep link 1`] = ` onLayout={[Function]} onScroll={[Function]} onScrollToIndexFailed={[Function]} - refreshing={false} + refreshControl={ + + } removeClippedSubviews={true} renderItem={[Function]} scrollEventThrottle={60} @@ -91,7 +102,18 @@ exports[`PostList setting permalink deep link 1`] = ` onLayout={[Function]} onScroll={[Function]} onScrollToIndexFailed={[Function]} - refreshing={false} + refreshControl={ + + } removeClippedSubviews={true} renderItem={[Function]} scrollEventThrottle={60} @@ -141,7 +163,18 @@ exports[`PostList should match snapshot 1`] = ` onLayout={[Function]} onScroll={[Function]} onScrollToIndexFailed={[Function]} - refreshing={false} + refreshControl={ + + } removeClippedSubviews={true} renderItem={[Function]} scrollEventThrottle={60} diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js index 87f228c825..d2ed9dcf26 100644 --- a/app/components/post_list/post_list.js +++ b/app/components/post_list/post_list.js @@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {FlatList, StyleSheet} from 'react-native'; +import {FlatList, RefreshControl, StyleSheet} from 'react-native'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; import * as PostListUtils from 'mattermost-redux/utils/post_list'; @@ -366,13 +366,16 @@ export default class PostList extends PureComponent { postIds, refreshing, scrollViewNativeID, + theme, } = this.props; - const refreshControl = {refreshing}; - - if (channelId) { - refreshControl.onRefresh = this.handleRefresh; - } + const refreshControl = ( + ); const hasPostsKey = postIds.length ? 'true' : 'false'; @@ -398,7 +401,7 @@ export default class PostList extends PureComponent { removeClippedSubviews={true} renderItem={this.renderItem} scrollEventThrottle={60} - {...refreshControl} + refreshControl={refreshControl} nativeID={scrollViewNativeID} /> ); diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index eb41aa3c49..9ac5c5054d 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -292,7 +292,10 @@ export default class ChannelBase extends PureComponent { theme={theme} isLandscape={isLandscape} /> - + ); diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js index 114a22ad51..6359d5ec88 100644 --- a/app/screens/channel_add_members/channel_add_members.js +++ b/app/screens/channel_add_members/channel_add_members.js @@ -303,7 +303,7 @@ export default class ChannelAddMembers extends PureComponent { return ( - + ); } diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js index 54e590f0bc..49cf3a4ac7 100644 --- a/app/screens/channel_members/channel_members.js +++ b/app/screens/channel_members/channel_members.js @@ -335,7 +335,7 @@ export default class ChannelMembers extends PureComponent { return ( - + ); } diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js index 4cd3791b6f..888849ea5f 100644 --- a/app/screens/edit_post/edit_post.js +++ b/app/screens/edit_post/edit_post.js @@ -173,7 +173,7 @@ export default class EditPost extends PureComponent { return ( - + ); } diff --git a/app/screens/edit_profile/edit_profile.js b/app/screens/edit_profile/edit_profile.js index 29dc6aa59d..ed623ede3e 100644 --- a/app/screens/edit_profile/edit_profile.js +++ b/app/screens/edit_profile/edit_profile.js @@ -560,7 +560,7 @@ export default class EditProfile extends PureComponent { return ( - + ); } diff --git a/app/screens/error_teams_list/error_teams_list.js b/app/screens/error_teams_list/error_teams_list.js index 2c6d28ee9b..7d401338bb 100644 --- a/app/screens/error_teams_list/error_teams_list.js +++ b/app/screens/error_teams_list/error_teams_list.js @@ -78,7 +78,7 @@ export default class ErrorTeamsList extends PureComponent { const style = getStyleFromTheme(theme); if (this.state.loading) { - return ; + return ; } return ( diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js index 38952d8c8e..de0cfbbbd8 100644 --- a/app/screens/more_channels/more_channels.js +++ b/app/screens/more_channels/more_channels.js @@ -327,7 +327,7 @@ export default class MoreChannels extends PureComponent { let content; if (adding) { - content = (); + content = (); } else { const searchBarInput = { backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js index 327be408fb..0a64765e06 100644 --- a/app/screens/more_dms/more_dms.js +++ b/app/screens/more_dms/more_dms.js @@ -420,7 +420,7 @@ export default class MoreDirectMessages extends PureComponent { return ( - + ); } diff --git a/app/screens/permalink/__snapshots__/permalink.test.js.snap b/app/screens/permalink/__snapshots__/permalink.test.js.snap index 2569bba476..9e7f3cc064 100644 --- a/app/screens/permalink/__snapshots__/permalink.test.js.snap +++ b/app/screens/permalink/__snapshots__/permalink.test.js.snap @@ -124,7 +124,7 @@ exports[`Permalink should match snapshot 1`] = ` } > diff --git a/app/screens/permalink/permalink.js b/app/screens/permalink/permalink.js index 169ee0de8c..9f88523373 100644 --- a/app/screens/permalink/permalink.js +++ b/app/screens/permalink/permalink.js @@ -370,7 +370,7 @@ export default class Permalink extends PureComponent { ); } else if (loading) { - postList = ; + postList = ; } else { postList = ( { - if (this.props.isSearchGettingMore) { - const style = getStyleFromTheme(this.props.theme); + const {isSearchGettingMore, theme} = this.props; + + if (isSearchGettingMore) { + const style = getStyleFromTheme(theme); return ( - + ); } @@ -634,7 +636,7 @@ export default class Search extends PureComponent { id: SEARCHING, component: ( - + ), }]; diff --git a/app/screens/select_team/__snapshots__/select_team.test.js.snap b/app/screens/select_team/__snapshots__/select_team.test.js.snap index 449a83f737..df12413205 100644 --- a/app/screens/select_team/__snapshots__/select_team.test.js.snap +++ b/app/screens/select_team/__snapshots__/select_team.test.js.snap @@ -97,11 +97,19 @@ exports[`SelectTeam should match snapshot for teams 1`] = ` listType="flat" loading={false} loadingComponent={ - + + + } onLoadMore={[Function]} onRefresh={[Function]} diff --git a/app/screens/select_team/select_team.js b/app/screens/select_team/select_team.js index 7d2c297036..9e34ac3955 100644 --- a/app/screens/select_team/select_team.js +++ b/app/screens/select_team/select_team.js @@ -217,7 +217,7 @@ export default class SelectTeam extends PureComponent { const style = getStyleFromTheme(theme); if (this.state.joining) { - return ; + return ; } if (this.props.teamsRequest.status === RequestStatus.FAILURE) { @@ -262,7 +262,14 @@ export default class SelectTeam extends PureComponent { } + loadingComponent={ + + + + } refreshing={this.state.refreshing} onRefresh={this.onRefresh} onLoadMore={this.getTeams} @@ -300,6 +307,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { width: '100%', height: 1, }, + footer: { + marginVertical: 10, + }, teamWrapper: { marginTop: 20, }, diff --git a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap index b02f70ca2a..3ac829734c 100644 --- a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap +++ b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap @@ -272,7 +272,7 @@ exports[`TermsOfService should enable/disable navigator buttons on setNavigatorB exports[`TermsOfService should match snapshot 1`] = ` @@ -329,7 +329,7 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = ` exports[`TermsOfService should match snapshot for get terms 1`] = ` diff --git a/app/screens/terms_of_service/terms_of_service.js b/app/screens/terms_of_service/terms_of_service.js index db72b21922..beed535bb2 100644 --- a/app/screens/terms_of_service/terms_of_service.js +++ b/app/screens/terms_of_service/terms_of_service.js @@ -231,7 +231,7 @@ export default class TermsOfService extends PureComponent { const textStyles = getMarkdownTextStyles(theme); if (this.state.loading) { - return ; + return ; } if (this.state.getTermsError) { diff --git a/app/screens/thread/__snapshots__/thread.ios.test.js.snap b/app/screens/thread/__snapshots__/thread.ios.test.js.snap index 531bff0c73..dc90b29bd9 100644 --- a/app/screens/thread/__snapshots__/thread.ios.test.js.snap +++ b/app/screens/thread/__snapshots__/thread.ios.test.js.snap @@ -32,7 +32,7 @@ exports[`thread should match snapshot, has root post 1`] = ` } renderFooter={ @@ -87,7 +87,7 @@ exports[`thread should match snapshot, no root post, loading 1`] = ` /> @@ -112,7 +112,7 @@ exports[`thread should match snapshot, render footer 1`] = ` } renderFooter={ @@ -157,7 +157,7 @@ exports[`thread should match snapshot, render footer 3`] = ` /> diff --git a/app/screens/thread/thread.android.js b/app/screens/thread/thread.android.js index a2e60c2095..d6f62d6fcf 100644 --- a/app/screens/thread/thread.android.js +++ b/app/screens/thread/thread.android.js @@ -53,7 +53,7 @@ export default class ThreadAndroid extends ThreadBase { ); } else { content = ( - + ); } diff --git a/app/screens/thread/thread.ios.js b/app/screens/thread/thread.ios.js index 0d035bdd91..1470856c13 100644 --- a/app/screens/thread/thread.ios.js +++ b/app/screens/thread/thread.ios.js @@ -85,7 +85,7 @@ export default class ThreadIOS extends ThreadBase { ); } else { content = ( - + ); } diff --git a/app/screens/thread/thread_base.js b/app/screens/thread/thread_base.js index 0aa3c357d7..c99683d5e3 100644 --- a/app/screens/thread/thread_base.js +++ b/app/screens/thread/thread_base.js @@ -106,13 +106,15 @@ export default class ThreadBase extends PureComponent { }; renderFooter = () => { - if (!this.hasRootPost() && this.props.threadLoadingStatus.status !== RequestStatus.STARTED) { + const {theme, threadLoadingStatus} = this.props; + + if (!this.hasRootPost() && threadLoadingStatus.status !== RequestStatus.STARTED) { return ( - + ); - } else if (this.props.threadLoadingStatus.status === RequestStatus.STARTED) { + } else if (threadLoadingStatus.status === RequestStatus.STARTED) { return ( - + ); }