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

MM-23179 Avoid unnecessary Overdraws (#4025)

Browse source 
* Set navigation based on theme only once

* Remove unnecessary overdraws

* Feedback review
This commit is contained in:
Elias Nahum 2020-03-13 15:22:43 -03:00 committed by GitHub
parent d1add3c743
commit c685690d1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 136 additions and 460 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/actions/navigation/index.js
View file

@ -92,7 +92,6 @@ export function resetToSelectServer(allowOtherServers) {
},
options: {
layout: {
backgroundColor: theme.centerChannelBg,
componentBackgroundColor: theme.centerChannelBg,
},
statusBar: {

1
app/actions/navigation/index.test.js
View file

@ -84,7 +84,6 @@ describe('app/actions/navigation', () => {
},
options: {
layout: {
backgroundColor: theme.centerChannelBg,
componentBackgroundColor: theme.centerChannelBg,
},
statusBar: {

1
app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap
View file

@ -15,7 +15,6 @@ exports[`EditChannelInfo should match snapshot 1`] = `
onKeyboardDidShow={[Function]}
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

1
app/components/edit_channel_info/edit_channel_info.js
View file

@ -370,7 +370,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,

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

@ -143,7 +143,7 @@ export default class PostBody extends PureComponent {
};
const options = {
layout: {
backgroundColor: changeOpacity('#000', 0.2),
componentBackgroundColor: changeOpacity('#000', 0.2),
},
};

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

@ -470,7 +470,7 @@ export default class PostList extends PureComponent {
};
const options = {
layout: {
backgroundColor: changeOpacity('#000', 0.2),
componentBackgroundColor: changeOpacity('#000', 0.2),
},
};

3
app/components/root/root.js
View file

@ -68,7 +68,7 @@ export default class Root extends PureComponent {
const {currentUrl, theme} = this.props;
const {intl} = this.providerRef.getChildContext();
let passProps = {theme};
let passProps = null;
const options = {topBar: {}};
if (Platform.OS === 'android') {
options.topBar.rightButtons = [{
@ -87,7 +87,6 @@ export default class Root extends PureComponent {
if (screen === 'SelectTeam') {
passProps = {
...passProps,
currentUrl,
userWithoutTeams: true,
};

34
app/components/safe_area_view/safe_area_view.android.js
View file

@ -1,34 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View} from 'react-native';
const SafeAreaAndroid = (props) => {
return props.children;
};
export default class SafeAreaAndroid extends PureComponent {
static propTypes = {
backgroundColor: PropTypes.string,
children: PropTypes.node.isRequired,
theme: PropTypes.object.isRequired,
};
render() {
const {backgroundColor, children, theme} = this.props;
let bgColor = theme.centerChannelBg;
if (backgroundColor) {
bgColor = backgroundColor;
}
return (
<View style={[style.container, {backgroundColor: bgColor}]}>
{children}
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
},
});
export default SafeAreaAndroid;

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

@ -86,13 +86,11 @@ export default class TeamsList extends PureComponent {
goToSelectTeam = preventDoubleTap(async () => {
const {intl} = this.context;
const {theme} = this.props;
const {serverUrl} = this.state;
const screen = 'SelectTeam';
const title = intl.formatMessage({id: 'mobile.routes.selectTeam', defaultMessage: 'Select Team'});
const passProps = {
currentUrl: serverUrl,
theme,
};
const options = {
topBar: {

10
app/screens/about/about.js
View file

@ -14,7 +14,7 @@ import DeviceInfo from 'react-native-device-info';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import AppIcon from 'app/components/app_icon';
import Config from 'assets/config';
@ -24,19 +24,12 @@ const MATTERMOST_BUNDLE_IDS = ['com.mattermost.rnbeta', 'com.mattermost.rn'];
export default class About extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
config: PropTypes.object.isRequired,
license: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
handleAboutTeam = () => {
Linking.openURL(Config.AboutTeamURL);
};
@ -351,7 +344,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
wrapper: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,

79
app/screens/add_reaction/add_reaction.js
View file

@ -1,79 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
View,
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import EmojiPicker from 'app/components/emoji_picker';
import {emptyFunction} from 'app/utils/general';
import {setNavigatorStyles} from 'app/utils/theme';
import {dismissModal, setButtons} from 'app/actions/navigation';
export default class AddReaction extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
closeButton: PropTypes.object,
onEmojiPress: PropTypes.func,
theme: PropTypes.object.isRequired,
};
static defaultProps = {
onEmojiPress: emptyFunction,
};
leftButton = {
id: 'close-edit-post',
};
constructor(props) {
super(props);
setButtons(props.componentId, {
leftButtons: [{...this.leftButton, icon: props.closeButton}],
});
}
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
navigationButtonPressed({buttonId}) {
if (buttonId === 'close-edit-post') {
this.close();
}
}
close = () => {
dismissModal();
};
handleEmojiPress = (emoji) => {
this.props.onEmojiPress(emoji);
this.close();
}
render() {
return (
<View style={styles.container}>
<EmojiPicker onEmojiPress={this.handleEmojiPress}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});

71
app/screens/add_reaction/index.js
View file

@ -1,16 +1,71 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {connect} from 'react-redux';
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
View,
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import EmojiPicker from 'app/components/emoji_picker';
import {emptyFunction} from 'app/utils/general';
import {dismissModal, setButtons} from 'app/actions/navigation';
import AddReaction from './add_reaction';
function mapStateToProps(state) {
return {
theme: getTheme(state),
export default class AddReaction extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
closeButton: PropTypes.object,
onEmojiPress: PropTypes.func,
};
static defaultProps = {
onEmojiPress: emptyFunction,
};
leftButton = {
id: 'close-edit-post',
};
constructor(props) {
super(props);
setButtons(props.componentId, {
leftButtons: [{...this.leftButton, icon: props.closeButton}],
});
}
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
navigationButtonPressed({buttonId}) {
if (buttonId === 'close-edit-post') {
this.close();
}
}
close = () => {
dismissModal();
};
handleEmojiPress = (emoji) => {
this.props.onEmojiPress(emoji);
this.close();
}
render() {
return (
<View style={styles.container}>
<EmojiPicker onEmojiPress={this.handleEmojiPress}/>
</View>
);
}
}
export default connect(mapStateToProps)(AddReaction);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});

20
app/screens/channel/channel.android.js
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {View} from 'react-native';
import {StyleSheet, View} from 'react-native';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
@ -12,7 +12,6 @@ import InteractiveDialogController from 'app/components/interactive_dialog_contr
import NetworkIndicator from 'app/components/network_indicator';
import PostTextbox from 'app/components/post_textbox';
import {NavigationTypes} from 'app/constants';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import LocalConfig from 'assets/config';
@ -39,7 +38,6 @@ export default class ChannelAndroid extends ChannelBase {
return channelLoadingOrFailed;
}
const style = getStyleFromTheme(theme);
const drawerContent = (
<>
<NetworkIndicator/>
@ -63,7 +61,7 @@ export default class ChannelAndroid extends ChannelBase {
return (
<>
<View style={style.backdrop}>
<View style={style.flex}>
{drawerContent}
</View>
<InteractiveDialogController
@ -74,14 +72,8 @@ export default class ChannelAndroid extends ChannelBase {
}
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
backdrop: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
flex: {
flex: 1,
},
};
const style = StyleSheet.create({
flex: {
flex: 1,
},
});

14
app/screens/channel/channel.ios.js
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {View} from 'react-native';
import {StyleSheet, View} from 'react-native';
import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view';
import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from 'app/components/autocomplete';
@ -13,7 +13,6 @@ import PostTextbox from 'app/components/post_textbox';
import SafeAreaView from 'app/components/safe_area_view';
import SettingsSidebar from 'app/components/sidebars/settings';
import StatusBar from 'app/components/status_bar';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import LocalConfig from 'assets/config';
@ -58,7 +57,6 @@ export default class ChannelIOS extends ChannelBase {
return channelLoadingOrFailed;
}
const style = getStyle(theme);
const drawerContent = (
<>
<SafeAreaView>
@ -100,7 +98,7 @@ export default class ChannelIOS extends ChannelBase {
return (
<MainSidebar ref={this.mainSidebarRef}>
<SettingsSidebar ref={this.settingsSidebarRef}>
<View style={style.backdrop}>
<View style={style.flex}>
{drawerContent}
</View>
</SettingsSidebar>
@ -112,12 +110,8 @@ export default class ChannelIOS extends ChannelBase {
}
}
export const getStyle = makeStyleSheetFromTheme((theme) => ({
backdrop: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
export const style = StyleSheet.create({
flex: {
flex: 1,
},
}));
});

6
app/screens/channel/channel_base.js
View file

@ -61,8 +61,6 @@ export default class ChannelBase extends PureComponent {
this.postTextbox = React.createRef();
this.keyboardTracker = React.createRef();
setNavigatorStyles(props.componentId, props.theme);
this.state = {
channelsRequestFailed: false,
};
@ -108,8 +106,6 @@ export default class ChannelBase extends PureComponent {
}
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
EphemeralStore.allNavigationComponentIds.forEach((componentId) => {
setNavigatorStyles(componentId, this.props.theme);
});
@ -154,7 +150,7 @@ export default class ChannelBase extends PureComponent {
const passProps = {closeButton};
const options = {
layout: {
backgroundColor: theme.centerChannelBg,
componentBackgroundColor: theme.centerChannelBg,
},
topBar: {
visible: true,

10
app/screens/channel/channel_base.test.js
View file

@ -47,7 +47,7 @@ describe('ChannelBase', () => {
rightButtonColor: theme.sidebarHeaderTextColor,
},
layout: {
backgroundColor: theme.centerChannelBg,
componentBackgroundColor: theme.centerChannelBg,
},
};
};
@ -55,6 +55,7 @@ describe('ChannelBase', () => {
test('should call mergeNavigationOptions on all navigation components when theme changes', () => {
const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions');
EphemeralStore.addNavigationComponentId(channelBaseComponentId);
componentIds.forEach((componentId) => {
EphemeralStore.addNavigationComponentId(componentId);
});
@ -63,20 +64,17 @@ describe('ChannelBase', () => {
<ChannelBase {...baseProps}/>,
);
const themeOptions = optionsForTheme(Preferences.THEMES.default);
expect(mergeNavigationOptions.mock.calls).toEqual([
[baseProps.componentId, themeOptions],
]);
expect(mergeNavigationOptions.mock.calls).toEqual([]);
mergeNavigationOptions.mockClear();
wrapper.setProps({theme: Preferences.THEMES.mattermostDark});
const newThemeOptions = optionsForTheme(Preferences.THEMES.mattermostDark);
expect(mergeNavigationOptions.mock.calls).toEqual([
[baseProps.componentId, newThemeOptions],
[componentIds[2], newThemeOptions],
[componentIds[1], newThemeOptions],
[componentIds[0], newThemeOptions],
[baseProps.componentId, newThemeOptions],
]);
});
});

8
app/screens/channel_add_members/channel_add_members.js
View file

@ -28,7 +28,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {popTopScreen, setButtons} from 'app/actions/navigation';
@ -98,16 +97,11 @@ export default class ChannelAddMembers extends PureComponent {
this.enableAddOption(false);
}
componentDidUpdate(prevProps) {
const {componentId, theme} = this.props;
componentDidUpdate() {
const {adding, selectedIds} = this.state;
const enabled = Object.keys(selectedIds).length > 0 && !adding;
this.enableAddOption(enabled);
if (theme !== prevProps.theme) {
setNavigatorStyles(componentId, theme);
}
}
navigationButtonPressed({buttonId}) {

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

@ -4,7 +4,6 @@ exports[`channel_info should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

9
app/screens/channel_info/channel_info.js
View file

@ -16,7 +16,7 @@ import {General, Users} from 'mattermost-redux/constants';
import StatusBar from 'app/components/status_bar';
import {preventDoubleTap} from 'app/utils/tap';
import {alertErrorWithFallback} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {dismissModal, goToScreen, showModalOverCurrentContext} from 'app/actions/navigation';
@ -116,12 +116,6 @@ export default class ChannelInfo extends PureComponent {
}
}
componentDidUpdate(prevProps) {
if (prevProps.theme !== this.props.theme) {
setNavigatorStyles(prevProps.componentId, this.props.theme);
}
}
close = (redirect = true) => {
const {actions} = this.props;
@ -722,7 +716,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,

8
app/screens/channel_members/channel_members.js
View file

@ -28,7 +28,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {popTopScreen, setButtons} from 'app/actions/navigation';
@ -90,16 +89,11 @@ export default class ChannelMembers extends PureComponent {
this.getProfiles();
}
componentDidUpdate(prevProps) {
const {componentId, theme} = this.props;
componentDidUpdate() {
const {removing, selectedIds} = this.state;
const enabled = Object.keys(selectedIds).length > 0 && !removing;
this.enableRemoveOption(enabled);
if (theme !== prevProps.theme) {
setNavigatorStyles(componentId, theme);
}
}
navigationButtonPressed({buttonId}) {

10
app/screens/client_upgrade/client_upgrade.js
View file

@ -19,7 +19,7 @@ import StatusBar from 'app/components/status_bar';
import {UpgradeTypes} from 'app/constants';
import logo from 'assets/images/logo.png';
import {checkUpgradeType, isUpgradeAvailable} from 'app/utils/client_upgrade';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {popTopScreen, dismissModal} from 'app/actions/navigation';
export default class ClientUpgrade extends PureComponent {
@ -28,7 +28,6 @@ export default class ClientUpgrade extends PureComponent {
logError: PropTypes.func.isRequired,
setLastUpgradeCheck: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string,
currentVersion: PropTypes.string,
closeAction: PropTypes.func,
userCheckedForUpgrade: PropTypes.bool,
@ -59,12 +58,6 @@ export default class ClientUpgrade extends PureComponent {
}
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
navigationButtonPressed({buttonId}) {
if (buttonId === 'close-upgrade') {
dismissModal();
@ -290,7 +283,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
image: {
marginTop: 75,

8
app/screens/code/code.js
View file

@ -17,14 +17,12 @@ import {getCodeFont} from 'app/utils/markdown';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {popTopScreen} from 'app/actions/navigation';
export default class Code extends React.PureComponent {
static propTypes = {
componentId: PropTypes.string,
theme: PropTypes.object.isRequired,
content: PropTypes.string.isRequired,
};
@ -33,12 +31,6 @@ export default class Code extends React.PureComponent {
BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBack);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleAndroidBack);
}

5
app/screens/create_channel/create_channel.js
View file

@ -16,7 +16,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
import {popTopScreen, dismissModal, setButtons} from 'app/actions/navigation';
import EditChannelInfo from 'app/components/edit_channel_info';
import {NavigationTypes} from 'app/constants';
import {setNavigatorStyles} from 'app/utils/theme';
export default class CreateChannel extends PureComponent {
static propTypes = {
@ -75,10 +74,6 @@ export default class CreateChannel extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
const {createChannelRequest} = nextProps;
if (this.props.createChannelRequest !== createChannelRequest) {

6
app/screens/edit_channel/edit_channel.js
View file

@ -15,7 +15,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
import EditChannelInfo from 'app/components/edit_channel_info';
import {NavigationTypes, ViewTypes} from 'app/constants';
import {setNavigatorStyles} from 'app/utils/theme';
import {cleanUpUrlable} from 'app/utils/url';
import {t} from 'app/utils/i18n';
import {popTopScreen, setButtons} from 'app/actions/navigation';
@ -65,7 +64,6 @@ export default class EditChannel extends PureComponent {
channel: PropTypes.object.isRequired,
currentTeamUrl: PropTypes.string.isRequired,
updateChannelRequest: PropTypes.object.isRequired,
closeButton: PropTypes.object,
};
static contextTypes = {
@ -141,10 +139,6 @@ export default class EditChannel extends PureComponent {
}
componentDidUpdate(prevProps) {
if (prevProps.theme !== this.props.theme) {
setNavigatorStyles(prevProps.componentId, this.props.theme);
}
if (prevProps.updateChannelRequest !== this.props.updateChannelRequest) {
switch (this.props.updateChannelRequest.status) {
case RequestStatus.STARTED:

6
app/screens/edit_post/edit_post.js
View file

@ -22,7 +22,6 @@ import {switchKeyboardForCodeBlocks} from 'app/utils/markdown';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
@ -82,10 +81,6 @@ export default class EditPost extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
const {editPostRequest} = nextProps;
if (this.props.editPostRequest !== editPostRequest) {
@ -263,7 +258,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,

4
app/screens/edit_profile/edit_profile.js
View file

@ -585,7 +585,6 @@ export default class EditProfile extends PureComponent {
<KeyboardAwareScrollView
bounces={false}
innerRef={this.scrollViewRef}
style={style.container}
>
{displayError}
<View style={[style.scrollView]}>
@ -614,9 +613,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
flex: {
flex: 1,
},
container: {
backgroundColor: theme.centerChannelBg,
},
scrollView: {
flex: 1,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.03),

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

@ -4,7 +4,6 @@ exports[`ErrorTeamsList should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

21
app/screens/error_teams_list/error_teams_list.js
View file

@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
InteractionManager,
StyleSheet,
View,
} from 'react-native';
import {Navigation} from 'react-native-navigation';
@ -13,7 +14,6 @@ import FailedNetworkAction from 'app/components/failed_network_action';
import Loading from 'app/components/loading';
import StatusBar from 'app/components/status_bar';
import {resetToChannel} from 'app/actions/navigation';
import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
export default class ErrorTeamsList extends PureComponent {
static propTypes = {
@ -23,7 +23,6 @@ export default class ErrorTeamsList extends PureComponent {
logout: PropTypes.func.isRequired,
selectDefaultTeam: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string,
theme: PropTypes.object,
};
@ -39,12 +38,6 @@ export default class ErrorTeamsList extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
navigationButtonPressed({buttonId}) {
const {logout} = this.props.actions;
if (buttonId === 'logout') {
@ -75,7 +68,6 @@ export default class ErrorTeamsList extends PureComponent {
render() {
const {theme} = this.props;
const style = getStyleFromTheme(theme);
if (this.state.loading) {
return <Loading color={theme.centerChannelColor}/>;
@ -93,11 +85,8 @@ export default class ErrorTeamsList extends PureComponent {
}
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
backgroundColor: theme.centerChannelBg,
flex: 1,
},
};
const style = StyleSheet.create({
container: {
flex: 1,
},
});

3
app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap
View file

@ -4,7 +4,6 @@ exports[`ForgotPassword match snapshot after success of sendPasswordResetEmail 1
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"flex": 1,
}
}
@ -88,7 +87,6 @@ exports[`ForgotPassword should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"flex": 1,
}
}
@ -200,7 +198,6 @@ exports[`ForgotPassword snapshot for error on failure of email regex 1`] = `
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"flex": 1,
}
}

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

@ -169,7 +169,6 @@ export default class ForgotPassword extends PureComponent {
const style = StyleSheet.create({
container: {
backgroundColor: '#FFFFFF',
flex: 1,
},
innerContainer: {

1
app/screens/index.js
View file

@ -61,7 +61,6 @@ export function registerScreens(store, Provider) {
Navigation.registerComponent('PostOptions', () => gestureHandlerRootHOC(wrapper(require('app/screens/post_options').default)), () => require('app/screens/post_options').default);
Navigation.registerComponent('ReactionList', () => gestureHandlerRootHOC(wrapper(require('app/screens/reaction_list').default)), () => require('app/screens/reaction_list').default);
Navigation.registerComponent('RecentMentions', () => wrapper(require('app/screens/recent_mentions').default), () => require('app/screens/recent_mentions').default);
Navigation.registerComponent('Root', () => wrapper(Root), () => Root);
Navigation.registerComponent('Search', () => wrapper(require('app/screens/search').default), () => require('app/screens/search').default);
Navigation.registerComponent('SelectorScreen', () => wrapper(require('app/screens/selector_screen').default), () => require('app/screens/selector_screen').default);
Navigation.registerComponent('SelectServer', () => wrapper(require('app/screens/select_server').default), () => require('app/screens/select_server').default);

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

@ -423,7 +423,6 @@ export default class Login extends PureComponent {
const style = StyleSheet.create({
container: {
backgroundColor: '#FFFFFF',
flex: 1,
},
innerContainer: {

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

@ -283,7 +283,6 @@ export default class LoginOptions extends PureComponent {
const style = StyleSheet.create({
container: {
backgroundColor: '#FFFFFF',
flex: 1,
},
innerContainer: {

2
app/screens/long_post/__snapshots__/long_post.test.js.snap
View file

@ -260,7 +260,6 @@ LongPost {
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderBottomColor": "rgba(61,60,64,0.2)",
"borderBottomWidth": 1,
"borderTopLeftRadius": 6,
@ -323,7 +322,6 @@ LongPost {
<ScrollView
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

2
app/screens/long_post/long_post.js
View file

@ -194,7 +194,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
header: {
alignItems: 'center',
backgroundColor: theme.centerChannelBg,
borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2),
borderBottomWidth: 1,
borderTopLeftRadius: 6,
@ -221,7 +220,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
fontWeight: '600',
},
postList: {
backgroundColor: theme.centerChannelBg,
flex: 1,
},
footer: {

5
app/screens/more_channels/more_channels.js
View file

@ -27,7 +27,6 @@ import {goToScreen, dismissModal, setButtons} from 'app/actions/navigation';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
@ -109,10 +108,6 @@ export default class MoreChannels extends PureComponent {
let channels;
let archivedChannels;
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
if (nextProps.channels !== this.props.channels) {
channels = nextProps.channels;
if (term) {

8
app/screens/more_dms/more_dms.js
View file

@ -27,7 +27,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
@ -94,16 +93,11 @@ export default class MoreDirectMessages extends PureComponent {
this.mounted = false;
}
componentDidUpdate(prevProps) {
const {componentId, theme} = this.props;
componentDidUpdate() {
const {selectedCount, startingConversation} = this.state;
const canStart = selectedCount > 0 && !startingConversation;
this.updateNavigationButtons(canStart);
if (theme !== prevProps.theme) {
setNavigatorStyles(componentId, theme);
}
}
navigationButtonPressed({buttonId}) {

2
app/screens/options_modal/options_modal.js
View file

@ -108,7 +108,7 @@ export default class OptionsModal extends PureComponent {
const style = StyleSheet.create({
wrapper: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
backgroundColor: Platform.select({ios: 'rgba(0, 0, 0, 0.5)'}),
flex: 1,
},
});

3
app/screens/permalink/__snapshots__/permalink.test.js.snap
View file

@ -31,6 +31,7 @@ exports[`Permalink should match snapshot 1`] = `
onTransitionEnd={[Function]}
style={
Object {
"backgroundColor": "#ffffff",
"borderRadius": 6,
"flex": 1,
"margin": 10,
@ -43,7 +44,6 @@ exports[`Permalink should match snapshot 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderTopLeftRadius": 6,
"borderTopRightRadius": 6,
"flexDirection": "row",
@ -116,7 +116,6 @@ exports[`Permalink should match snapshot 1`] = `
style={
Array [
Object {
"backgroundColor": "#ffffff",
"flex": 1,
},
null,

3
app/screens/permalink/permalink.js
View file

@ -467,6 +467,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
marginTop: 20,
},
wrapper: {
backgroundColor: theme.centerChannelBg,
borderRadius: 6,
flex: 1,
margin: 10,
@ -474,7 +475,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
header: {
alignItems: 'center',
backgroundColor: theme.centerChannelBg,
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
flexDirection: 'row',
@ -506,7 +506,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
fontWeight: '600',
},
postList: {
backgroundColor: theme.centerChannelBg,
flex: 1,
},
bottom: {

12
app/screens/root/index.js
View file

@ -1,12 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import Loading from 'app/components/loading';
function Root() {
return <Loading/>;
}
export default Root;

2
app/screens/select_team/__snapshots__/select_team.test.js.snap
View file

@ -43,7 +43,6 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -155,7 +154,6 @@ exports[`SelectTeam should match snapshot when user is a guest 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

9
app/screens/select_team/index.js
View file

@ -6,6 +6,7 @@ import {connect} from 'react-redux';
import {getTeams, addUserToTeam, joinTeam} from 'mattermost-redux/actions/teams';
import {logout} from 'mattermost-redux/actions/users';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getJoinableTeams} from 'mattermost-redux/selectors/entities/teams';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
@ -18,13 +19,15 @@ import SelectTeam from './select_team.js';
function mapStateToProps(state) {
const currentUser = getCurrentUser(state);
const currentUserIsGuest = isGuest(currentUser);
return {
teamsRequest: state.requests.teams.getTeams,
teams: getJoinableTeams(state),
isLandscape: isLandscape(state),
currentUserId: currentUser && currentUser.id,
currentUserIsGuest,
isLandscape: isLandscape(state),
serverVersion: state.entities.general.serverVersion,
teamsRequest: state.requests.teams.getTeams,
teams: getJoinableTeams(state),
theme: getTheme(state),
};
}

8
app/screens/select_team/select_team.js
View file

@ -25,7 +25,7 @@ import TeamIcon from 'app/components/team_icon';
import {NavigationTypes} from 'app/constants';
import {resetToChannel, dismissModal} from 'app/actions/navigation';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
const TEAMS_PER_PAGE = 50;
@ -39,7 +39,6 @@ export default class SelectTeam extends PureComponent {
addUserToTeam: PropTypes.func.isRequired,
logout: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string.isRequired,
currentUrl: PropTypes.string.isRequired,
currentUserIsGuest: PropTypes.bool.isRequired,
currentUserId: PropTypes.string.isRequired,
@ -74,10 +73,6 @@ export default class SelectTeam extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
if (this.props.teams !== nextProps.teams) {
this.buildData(nextProps);
}
@ -299,7 +294,6 @@ export default class SelectTeam extends PureComponent {
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
backgroundColor: theme.centerChannelBg,
flex: 1,
},
headingContainer: {

6
app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
View file

@ -4,7 +4,6 @@ exports[`SelectorScreen should match snapshot for channels 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -101,7 +100,6 @@ exports[`SelectorScreen should match snapshot for channels 2`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -198,7 +196,6 @@ exports[`SelectorScreen should match snapshot for explicit options 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -302,7 +299,6 @@ exports[`SelectorScreen should match snapshot for searching 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -399,7 +395,6 @@ exports[`SelectorScreen should match snapshot for users 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -496,7 +491,6 @@ exports[`SelectorScreen should match snapshot for users 2`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

9
app/screens/selector_screen/selector_screen.js
View file

@ -27,7 +27,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
@ -43,7 +42,6 @@ export default class SelectorScreen extends PureComponent {
searchProfiles: PropTypes.func.isRequired,
searchChannels: PropTypes.func.isRequired,
}),
componentId: PropTypes.string,
currentTeamId: PropTypes.string.isRequired,
data: PropTypes.arrayOf(PropTypes.object),
dataSource: PropTypes.string,
@ -90,12 +88,6 @@ export default class SelectorScreen extends PureComponent {
this.mounted = false;
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
setSearchBarRef = (ref) => {
this.searchBarRef = ref;
}
@ -371,7 +363,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
searchBar: {
marginVertical: 5,

4
app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap
View file

@ -4,7 +4,6 @@ exports[`DisplaySettings should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -13,7 +12,6 @@ exports[`DisplaySettings should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "rgba(61,60,64,0.06)",
"flex": 1,
"paddingTop": 35,
}
@ -83,7 +81,6 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}
@ -92,7 +89,6 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
<View
style={
Object {
"backgroundColor": "rgba(61,60,64,0.06)",
"flex": 1,
"paddingTop": 35,
}

5
app/screens/settings/display_settings/display_settings.js
View file

@ -16,7 +16,6 @@ import {goToScreen} from 'app/actions/navigation';
export default class DisplaySettings extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
theme: PropTypes.object.isRequired,
enableTheme: PropTypes.bool.isRequired,
enableTimezone: PropTypes.bool.isRequired,
@ -156,8 +155,8 @@ export default class DisplaySettings extends PureComponent {
/>
{timezoneOption}
<View style={style.divider}/>
{clockDisplayModal}
</View>
{clockDisplayModal}
</View>
);
}
@ -167,10 +166,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
wrapper: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
flex: 1,
...Platform.select({
ios: {

4
app/screens/settings/general/settings.js
View file

@ -29,7 +29,6 @@ class Settings extends PureComponent {
clearErrors: PropTypes.func.isRequired,
purgeOfflineStore: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string,
config: PropTypes.object.isRequired,
currentTeamId: PropTypes.string.isRequired,
currentUserId: PropTypes.string.isRequired,
@ -115,12 +114,11 @@ class Settings extends PureComponent {
});
goToSelectTeam = preventDoubleTap(() => {
const {currentUrl, intl, theme} = this.props;
const {currentUrl, intl} = this.props;
const screen = 'SelectTeam';
const title = intl.formatMessage({id: 'mobile.routes.selectTeam', defaultMessage: 'Select Team'});
const passProps = {
currentUrl,
theme,
};
goToScreen(screen, title, passProps);

7
app/screens/settings/notification_settings/notification_settings.js
View file

@ -19,7 +19,7 @@ import NotificationPreferences from 'app/notification_preferences';
import SettingsItem from 'app/screens/settings/settings_item';
import {getNotificationProps} from 'app/utils/notify_props';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {goToScreen} from 'app/actions/navigation';
@ -28,7 +28,6 @@ export default class NotificationSettings extends PureComponent {
actions: PropTypes.shape({
updateMe: PropTypes.func.isRequired,
}),
componentId: PropTypes.string,
currentUser: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
updateMeRequest: PropTypes.object.isRequired,
@ -42,10 +41,6 @@ export default class NotificationSettings extends PureComponent {
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
const {updateMeRequest} = nextProps;
const {intl} = this.context;
if (this.props.updateMeRequest !== updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) {

1
app/screens/settings/notification_settings_email/notification_settings_email.android.js
View file

@ -244,7 +244,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
separator: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),

7
app/screens/settings/notification_settings_email/notification_settings_email_base.js
View file

@ -9,15 +9,12 @@ import {Navigation} from 'react-native-navigation';
import {Preferences} from 'mattermost-redux/constants';
import {getEmailInterval} from 'mattermost-redux/utils/notify_props';
import {setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsEmailBase extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
savePreferences: PropTypes.func.isRequired,
updateMe: PropTypes.func.isRequired,
}),
componentId: PropTypes.string,
currentUser: PropTypes.object.isRequired,
notifyProps: PropTypes.object.isRequired,
emailInterval: PropTypes.string.isRequired,
@ -48,10 +45,6 @@ export default class NotificationSettingsEmailBase extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
const {
notifyProps,
sendEmailNotifications,

8
app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js
View file

@ -7,11 +7,9 @@ import {intlShape} from 'react-intl';
import {Navigation} from 'react-native-navigation';
import {getNotificationProps} from 'app/utils/notify_props';
import {setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsMentionsBase extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
currentUser: PropTypes.object.isRequired,
intl: intlShape.isRequired,
onBack: PropTypes.func.isRequired,
@ -36,12 +34,6 @@ export default class NotificationSettingsMentionsBase extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
componentDidDisappear() {
if (this.goingBack) {
this.saveUserNotifyProps();

1
app/screens/settings/notification_settings_mentions/notification_settings_mentions.android.js
View file

@ -374,7 +374,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
input: {
color: theme.centerChannelColor,

8
app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
View file

@ -12,14 +12,12 @@ import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_lo
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {popTopScreen} from 'app/actions/navigation';
export default class NotificationSettingsMentionsKeywords extends PureComponent {
static propTypes = {
componentId: PropTypes.string,
keywords: PropTypes.string,
onBack: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
@ -38,12 +36,6 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
handleSubmit = () => {
popTopScreen();
};

3
app/screens/settings/notification_settings_mobile/notification_settings_mobile.android.js
View file

@ -371,8 +371,6 @@ class NotificationSettingsMobileAndroid extends NotificationSettingsMobileBase {
}
componentDidUpdate(prevProps) {
super.componentDidUpdate(prevProps);
const {updateMeRequest, intl} = this.props;
if (updateMeRequest !== prevProps.updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) {
Alert.alert(
@ -754,7 +752,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
input: {
color: theme.centerChannelColor,

8
app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js
View file

@ -8,14 +8,12 @@ import {intlShape} from 'react-intl';
import {Navigation} from 'react-native-navigation';
import {getNotificationProps} from 'app/utils/notify_props';
import {setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsMobileBase extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
updateMe: PropTypes.func.isRequired,
}),
componentId: PropTypes.string,
config: PropTypes.object.isRequired,
currentUser: PropTypes.object.isRequired,
intl: intlShape.isRequired,
@ -47,12 +45,6 @@ export default class NotificationSettingsMobileBase extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
getNotificationPreferences = (props) => {
if (Platform.OS === 'android') {
const {

1
app/screens/settings/theme/__snapshots__/theme.test.js.snap
View file

@ -4,7 +4,6 @@ exports[`Theme should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

13
app/screens/settings/theme/theme.js
View file

@ -12,8 +12,7 @@ import StatusBar from 'app/components/status_bar';
import Section from 'app/screens/settings/section';
import SectionItem from 'app/screens/settings/section_item';
import FormattedText from 'app/components/formatted_text';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import EphemeralStore from 'app/store/ephemeral_store';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import ThemeTile from './theme_tile';
@ -29,7 +28,6 @@ export default class Theme extends React.PureComponent {
actions: PropTypes.shape({
savePreferences: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string,
allowedThemes: PropTypes.arrayOf(PropTypes.object),
customTheme: PropTypes.object,
isLandscape: PropTypes.bool.isRequired,
@ -56,14 +54,6 @@ export default class Theme extends React.PureComponent {
return null;
}
componentDidUpdate(prevProps) {
if (prevProps.theme !== this.props.theme) {
EphemeralStore.allNavigationComponentIds.forEach((componentId) => {
setNavigatorStyles(componentId, this.props.theme);
});
}
}
setTheme = (key) => {
const {
userId,
@ -154,7 +144,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
wrapper: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),

44
app/screens/settings/theme/theme.test.js
View file

@ -6,9 +6,6 @@ import {shallow} from 'enzyme';
import Preferences from 'mattermost-redux/constants/preferences';
import EphemeralStore from 'app/store/ephemeral_store';
import * as NavigationActions from 'app/actions/navigation';
import Theme from './theme';
import ThemeTile from './theme_tile';
@ -40,45 +37,4 @@ describe('Theme', () => {
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find(ThemeTile)).toHaveLength(4);
});
test('should call mergeNavigationOptions on all navigation components when theme changes', () => {
const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions');
const componentIds = ['component-1', 'component-2', 'component-3'];
componentIds.forEach((componentId) => {
EphemeralStore.addNavigationComponentId(componentId);
});
const wrapper = shallow(
<Theme {...baseProps}/>,
);
const newTheme = allowedThemes[1];
wrapper.setProps({theme: newTheme});
const options = {
topBar: {
backButton: {
color: newTheme.sidebarHeaderTextColor,
},
background: {
color: newTheme.sidebarHeaderBg,
},
title: {
color: newTheme.sidebarHeaderTextColor,
},
leftButtonColor: newTheme.sidebarHeaderTextColor,
rightButtonColor: newTheme.sidebarHeaderTextColor,
},
layout: {
backgroundColor: newTheme.centerChannelBg,
},
};
expect(mergeNavigationOptions.mock.calls).toEqual([
[componentIds[2], options],
[componentIds[1], options],
[componentIds[0], options],
]);
});
});

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

@ -207,7 +207,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
wrapper: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),

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

@ -282,7 +282,6 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = `
<View
style={
Object {
"backgroundColor": "#ffffff",
"flex": 1,
}
}

9
app/screens/terms_of_service/terms_of_service.js
View file

@ -17,7 +17,7 @@ import Markdown from 'app/components/markdown';
import StatusBar from 'app/components/status_bar';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import {dismissModal, setButtons} from 'app/actions/navigation';
@ -74,12 +74,6 @@ export default class TermsOfService extends PureComponent {
this.getTerms();
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
navigationButtonPressed({buttonId}) {
switch (buttonId) {
case 'close-terms-of-service':
@ -275,7 +269,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
lineHeight: 20,
},
container: {
backgroundColor: theme.centerChannelBg,
flex: 1,
},
scrollView: {

8
app/screens/text_preview/text_preview.js
View file

@ -16,23 +16,15 @@ import {getCodeFont} from 'app/utils/markdown';
import {
changeOpacity,
makeStyleSheetFromTheme,
setNavigatorStyles,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
export default class TextPreview extends React.PureComponent {
static propTypes = {
componentId: PropTypes.string,
theme: PropTypes.object.isRequired,
content: PropTypes.string.isRequired,
};
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
countLines = (content) => {
return content.split('\n').length;
};

5
app/screens/thread/thread_base.js
View file

@ -11,7 +11,6 @@ import {General, RequestStatus} from 'mattermost-redux/constants';
import Loading from 'app/components/loading';
import DeletedPost from 'app/components/deleted_post';
import {resetToChannel, popTopScreen, mergeNavigationOptions} from 'app/actions/navigation';
import {setNavigatorStyles} from 'app/utils/theme';
export default class ThreadBase extends PureComponent {
static propTypes = {
@ -68,10 +67,6 @@ export default class ThreadBase extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
}
if (this.props.postIds !== nextProps.postIds && !nextProps.postIds.length) {
this.close();
return;

8
app/screens/user_profile/user_profile.js
View file

@ -23,7 +23,7 @@ import StatusBar from 'app/components/status_bar';
import {BotTag, GuestTag} from 'app/components/tag';
import {alertErrorWithFallback} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {isGuest} from 'app/utils/users';
@ -83,12 +83,6 @@ export default class UserProfile extends PureComponent {
}
}
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);

27
app/utils/theme.js
View file

@ -8,6 +8,22 @@ import * as ThemeUtils from 'mattermost-redux/utils/theme_utils';
import {mergeNavigationOptions} from 'app/actions/navigation';
const MODAL_SCREENS_WITHOUT_BACK = [
'AddReaction',
'ChannelInfo',
'ClientUpgrade',
'CreateChannel',
'EditPost',
'ErrorTeamsList',
'MoreChannels',
'MoreDirectMessages',
'Permalink',
'SelectTeam',
'Settings',
'TermsOfService',
'UserProfile',
];
export function makeStyleSheetFromTheme(getStyleFromTheme) {
return ThemeUtils.makeStyleFromTheme((theme) => {
return StyleSheet.create(getStyleFromTheme(theme));
@ -33,15 +49,18 @@ export function setNavigatorStyles(componentId, theme) {
},
leftButtonColor: theme.sidebarHeaderTextColor,
rightButtonColor: theme.sidebarHeaderTextColor,
backButton: {
color: theme.sidebarHeaderTextColor,
},
},
layout: {
backgroundColor: theme.centerChannelBg,
componentBackgroundColor: theme.centerChannelBg,
},
};
if (!MODAL_SCREENS_WITHOUT_BACK.includes(componentId)) {
options.topBar.backButton = {
color: theme.sidebarHeaderTextColor,
};
}
mergeNavigationOptions(componentId, options);
}

1
index.js
View file

@ -19,6 +19,7 @@ if (__DEV__) {
const YellowBox = require('react-native/Libraries/YellowBox/YellowBox');
YellowBox.ignoreWarnings([
'Warning: componentWillReceiveProps',
'Warning: StatusBarIOS',
'`-[RCTRootView cancelTouches]`',
// Hide warnings caused by React Native (https://github.com/facebook/react-native/issues/20841)