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

MM-18762 Remove some usage of deprecated lifecycle methods (#3299)

Browse source 
* MM-18762 Remove some usage of deprecated lifecycle methods

* Only load ProgressiveImage when a URI changes
This commit is contained in:
Harrison Healey 2019-09-27 09:16:21 -04:00 committed by GitHub
parent 65e62371ab
commit 3e0189430b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 91 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/announcement_banner/announcement_banner.js
View file

@ -37,18 +37,18 @@ export default class AnnouncementBanner extends PureComponent {
bannerHeight: new Animated.Value(0),
};
componentWillMount() {
componentDidMount() {
const {bannerDismissed, bannerEnabled, bannerText} = this.props;
const showBanner = bannerEnabled && !bannerDismissed && Boolean(bannerText);
this.toggleBanner(showBanner);
}
componentWillReceiveProps(nextProps) {
if (this.props.bannerText !== nextProps.bannerText ||
this.props.bannerEnabled !== nextProps.bannerEnabled ||
this.props.bannerDismissed !== nextProps.bannerDismissed
componentDidUpdate(prevProps) {
if (this.props.bannerText !== prevProps.bannerText ||
this.props.bannerEnabled !== prevProps.bannerEnabled ||
this.props.bannerDismissed !== prevProps.bannerDismissed
) {
const showBanner = nextProps.bannerEnabled && !nextProps.bannerDismissed && Boolean(nextProps.bannerText);
const showBanner = this.props.bannerEnabled && !this.props.bannerDismissed && Boolean(this.props.bannerText);
this.toggleBanner(showBanner);
}
}

2
app/components/badge.js
View file

@ -35,9 +35,7 @@ export default class Badge extends PureComponent {
this.mounted = false;
this.layoutReady = false;
}
componentWillMount() {
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,

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

@ -56,7 +56,7 @@ export default class Emoji extends React.PureComponent {
};
}
componentWillMount() {
componentDidMount() {
const {displayTextOnly, emojiName, imageUrl} = this.props;
this.mounted = true;
if (!displayTextOnly && imageUrl) {

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

@ -45,9 +45,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
componentDidMount() {
this.mounted = true;
}
componentWillMount() {
this.fetchData(this.props.link, this.props.openGraphData);
}

15
app/components/post_body_additional_content/post_body_additional_content.js
View file

@ -87,21 +87,22 @@ export default class PostBodyAdditionalContent extends PureComponent {
this.mounted = false;
}
componentWillMount() {
componentDidMount() {
this.mounted = true;
this.load(this.props);
}
componentDidUpdate(prevProps) {
if (prevProps.link !== this.props.link) {
this.load(this.props);
}
}
componentWillUnmount() {
this.mounted = false;
}
componentWillReceiveProps(nextProps) {
if (this.props.link !== nextProps.link) {
this.load(nextProps);
}
}
isImage = (specificLink) => {
const {metadata, link} = this.props;

36
app/components/progressive_image/progressive_image.js
View file

@ -37,23 +37,23 @@ export default class ProgressiveImage extends PureComponent {
this.subscribedToCache = true;
this.state = {
intensity: null,
intensity: new Animated.Value(80),
thumb: null,
uri: null,
};
}
componentWillMount() {
const intensity = new Animated.Value(80);
this.setState({intensity});
this.load(this.props);
}
componentWillReceiveProps(props) {
this.load(props);
componentDidMount() {
this.load();
}
componentDidUpdate(prevProps, prevState) {
if (this.props.filename !== prevProps.filename ||
this.props.imageUri !== prevProps.imageUri ||
this.props.thumbnailUri !== prevProps.thumbnailUri) {
this.load();
}
const {intensity, thumb, uri} = this.state;
if (uri && thumb && uri !== thumb && prevState.uri !== uri) {
Animated.timing(intensity, {
@ -68,12 +68,8 @@ export default class ProgressiveImage extends PureComponent {
this.subscribedToCache = false;
}
load = (props) => {
const {filename, imageUri, style, thumbnailUri} = props;
this.computedStyle = StyleSheet.absoluteFill;
if (Object.keys(style).length) {
this.style = Object.assign({}, StyleSheet.absoluteFill, style);
}
load = () => {
const {filename, imageUri, thumbnailUri} = this.props;
if (thumbnailUri) {
ImageCacheManager.cache(filename, thumbnailUri, this.setThumbnail);
@ -143,7 +139,7 @@ export default class ProgressiveImage extends PureComponent {
resizeMethod={resizeMethod}
onError={onError}
source={defaultSource}
style={this.computedStyle}
style={StyleSheet.absoluteFill}
>
{this.props.children}
</DefaultComponent>
@ -151,7 +147,7 @@ export default class ProgressiveImage extends PureComponent {
}
return (
<View {...{style}}>
<View style={style}>
{(hasDefaultSource && !hasPreview && !hasURI) && defaultImage}
{hasPreview && !isImageReady &&
<ImageComponent
@ -159,7 +155,7 @@ export default class ProgressiveImage extends PureComponent {
resizeMethod={resizeMethod}
onError={onError}
source={{uri: thumb}}
style={this.computedStyle}
style={StyleSheet.absoluteFill}
blurRadius={5}
>
{this.props.children}
@ -171,13 +167,13 @@ export default class ProgressiveImage extends PureComponent {
resizeMethod={resizeMethod}
onError={onError}
source={{uri}}
style={this.computedStyle}
style={StyleSheet.absoluteFill}
>
{this.props.children}
</ImageComponent>
}
{hasPreview &&
<Animated.View style={[this.computedStyle, {backgroundColor: theme.centerChannelBg, opacity}]}/>
<Animated.View style={[StyleSheet.absoluteFill, {backgroundColor: theme.centerChannelBg, opacity}]}/>
}
</View>
);

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

@ -22,7 +22,7 @@ export default class Root extends PureComponent {
theme: PropTypes.object.isRequired,
};
componentWillMount() {
componentDidMount() {
Client4.setAcceptLanguage(this.props.locale);
if (!this.props.excludeEvents) {

12
app/components/safe_area_view/safe_area_view.ios.js
View file

@ -54,26 +54,24 @@ export default class SafeAreaIos extends PureComponent {
};
}
componentWillMount() {
this.mounted = true;
this.getSafeAreaInsets();
this.mounted = true;
}
componentDidMount() {
this.mounted = true;
Dimensions.addEventListener('change', this.getSafeAreaInsets);
EventEmitter.on('update_safe_area_view', this.getSafeAreaInsets);
this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
this.getSafeAreaInsets();
this.getStatusBarHeight();
}
componentWillUnmount() {
this.mounted = false;
Dimensions.removeEventListener('change', this.getSafeAreaInsets);
EventEmitter.off('update_safe_area_view', this.getSafeAreaInsets);
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
this.mounted = false;
}

10
app/components/swiper.js
View file

@ -52,17 +52,15 @@ export default class Swiper extends PureComponent {
this.state = this.initialState(props);
}
componentWillReceiveProps(nextProps) {
if (this.props.width !== nextProps.width) {
this.scrollByWidth(nextProps.width);
}
}
componentDidUpdate(prevProps, prevState) {
// If the index has changed, we notify the parent via the onIndexChanged callback
if (this.state.index !== prevState.index) {
this.props.onIndexChanged(this.state.index);
}
if (this.props.width !== prevProps.width) {
this.scrollByWidth(this.props.width);
}
}
initialState = (props) => {

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

@ -30,9 +30,9 @@ export default class About extends PureComponent {
isLandscape: PropTypes.bool.isRequired,
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -42,9 +42,9 @@ export default class AddReaction extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -81,7 +81,7 @@ export default class ChannelBase extends PureComponent {
}
}
componentWillMount() {
componentDidMount() {
EventEmitter.on('leave_team', this.handleLeaveTeam);
if (this.props.currentTeamId) {
@ -93,9 +93,7 @@ export default class ChannelBase extends PureComponent {
if (this.props.currentChannelId) {
PushNotifications.clearChannelNotifications(this.props.currentChannelId);
}
}
componentDidMount() {
if (tracker.initialLoad && !this.props.skipMetrics) {
this.props.actions.recordLoadTime('Start time', 'initialLoad');
}

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

@ -59,9 +59,9 @@ export default class ClientUpgrade extends PureComponent {
}
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -33,9 +33,9 @@ export default class Code extends React.PureComponent {
BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBack);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -39,9 +39,9 @@ export default class ErrorTeamsList extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

2
app/screens/image_preview/video_preview.js
View file

@ -59,7 +59,7 @@ export default class VideoPreview extends PureComponent {
};
}
componentWillMount() {
componentDidMount() {
EventEmitter.on('stop-video-playback', this.stopPlayback);
this.initializeComponent();
}

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

@ -52,10 +52,10 @@ export default class Mfa extends PureComponent {
}
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
// In case the login is successful the previous scene (login) will take care of the transition
if (this.props.loginRequest.status === RequestStatus.STARTED &&
nextProps.loginRequest.status === RequestStatus.FAILURE) {
if (prevProps.loginRequest.status === RequestStatus.STARTED &&
this.props.loginRequest.status === RequestStatus.FAILURE) {
popTopScreen();
}
}

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

@ -36,9 +36,9 @@ export default class NotificationSettingsMentionsBase extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -38,9 +38,9 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -47,9 +47,9 @@ export default class NotificationSettingsMobileBase extends PureComponent {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -53,7 +53,7 @@ export default class Timezone extends PureComponent {
};
}
componentWillMount() {
componentDidMount() {
const {actions: {getSupportedTimezones}, timezones} = this.props;
if (timezones.length === 0) {

19
app/screens/table_image/table_image.js
View file

@ -21,23 +21,30 @@ export default class TableImage extends React.PureComponent {
super(props);
this.state = {
imageSource: '',
width: -1,
height: -1,
};
}
componentWillMount() {
componentDidMount() {
this.getImageSize(this.props.imageSource);
}
componentWillReceiveProps(nextProps) {
if (this.props.imageSource !== nextProps.imageSource) {
this.setState({
static getDerivedStateFromProps(nextProps, state) {
if (nextProps.imageSource !== state.imageSource) {
return {
width: -1,
height: -1,
});
};
}
this.getImageSize(nextProps.imageSource);
return null;
}
componentDidUpdate(prevProps) {
if (prevProps.imageSource !== this.props.imageSource) {
this.getImageSize(this.props.imageSource);
}
}

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

@ -27,9 +27,9 @@ export default class TextPreview extends React.PureComponent {
content: PropTypes.string.isRequired,
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

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

@ -84,9 +84,9 @@ export default class UserProfile extends PureComponent {
}
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.componentId, nextProps.theme);
componentDidUpdate(prevProps) {
if (this.props.theme !== prevProps.theme) {
setNavigatorStyles(this.props.componentId, this.props.theme);
}
}

2
index.js
View file

@ -13,8 +13,6 @@ import 'app/mattermost';
if (__DEV__) {
YellowBox.ignoreWarnings([
'Warning: componentWillMount is deprecated',
'Warning: componentWillUpdate is deprecated',
'Warning: componentWillReceiveProps is deprecated',
// Hide warnings caused by React Native (https://github.com/facebook/react-native/issues/20841)

2
share_extension/android/extension_channels/extension_channels.js
View file

@ -47,7 +47,7 @@ export default class ExtensionTeam extends PureComponent {
sections: null,
};
componentWillMount() {
componentDidMount() {
this.buildSections();
}