Use new getDerivedStateFromProps instead of deprecated componentWillReceiveProps

As we are already using the new getSnapshotBeforeUpdate lifecycle method,
we apparently cannot use the deprecated ones at all in this component.
signup-info-prompt
Thibaut Girka 2018-04-26 20:23:25 +02:00
parent b39f3648a7
commit 1222e0a381
1 changed files with 33 additions and 9 deletions

View File

@ -51,7 +51,6 @@ export default class Status extends ImmutablePureComponent {
};
state = {
isExpanded: this.props.expanded,
isCollapsed: false,
autoCollapsed: false,
}
@ -80,23 +79,48 @@ export default class Status extends ImmutablePureComponent {
// If our settings have changed to disable collapsed statuses, then we
// need to make sure that we uncollapse every one. We do that by watching
// for changes to `settings.collapsed.enabled` in
// `componentWillReceiveProps()`.
// `getderivedStateFromProps()`.
// We also need to watch for changes on the `collapse` prop---if this
// changes to anything other than `undefined`, then we need to collapse or
// uncollapse our status accordingly.
componentWillReceiveProps (nextProps) {
static getDerivedStateFromProps(nextProps, prevState) {
let update = {};
let updated = false;
// Make sure the state mirrors props we track…
if (nextProps.collapse !== prevState.collapseProp) {
update.collapseProp = nextProps.collapse;
updated = true;
}
if (nextProps.expanded !== prevState.expandedProp) {
update.expandedProp = nextProps.expanded;
updated = true;
}
// Update state based on new props
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
if (this.state.isCollapsed) {
this.setCollapsed(false);
if (prevState.isCollapsed) {
update.isCollapsed = false;
updated = true;
}
} else if (
nextProps.collapse !== this.props.collapse &&
nextProps.collapse !== prevState.collapseProp &&
nextProps.collapse !== undefined
) this.setCollapsed(nextProps.collapse);
if (nextProps.expanded !== this.props.expanded &&
) {
update.isCollapsed = nextProps.collapse;
if (nextProps.collapse) update.isExpanded = false;
updated = true;
}
if (nextProps.expanded !== prevState.expandedProp &&
nextProps.expanded !== undefined
) this.setExpansion(nextProps.expanded);
) {
update.isExpanded = nextProps.expanded;
if (nextProps.expanded) update.isCollapsed = false;
updated = true;
}
return updated ? update : null;
}
// When mounting, we just check to see if our status should be collapsed,