Skip to content

Commit 986c299

Browse files
ElreyBebrillhart
ElreyB
authored and
ebrillhart
committed
Remove deprecated lifecycles (#591)
1 parent 3e6a313 commit 986c299

File tree

6 files changed

+124
-121
lines changed

6 files changed

+124
-121
lines changed

‎src/components/component-playground.js‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import isEmpty from 'lodash/isEmpty';
23
import PropTypes from 'prop-types';
34
import styled, { css } from 'react-emotion';
45
import { defaultCode } from '../utils/playground.default-code';
@@ -138,10 +139,6 @@ function getEnhancedScope(scope = {}) {
138139
return { Component, ...scope };
139140
}
140141

141-
// TODO(540): Refactor to non-deprecated lifecycle methods.
142-
// https://github.com/FormidableLabs/spectacle/issues/540
143-
// - componentWillReceiveProps
144-
// eslint-disable-next-line react/no-deprecated
145142
class ComponentPlayground extends Component {
146143
constructor() {
147144
super(...arguments);
@@ -156,26 +153,42 @@ class ComponentPlayground extends Component {
156153
};
157154
}
158155

156+
static getDerivedStateFromProps(nextProps, prevState) {
157+
const updatedState = {};
158+
if (nextProps.code !== prevState.code) {
159+
const code = (nextProps.code || defaultCode).trim();
160+
updatedState.code = code;
161+
}
162+
if (nextProps.scope !== prevState.scope) {
163+
const scope = getEnhancedScope(nextProps.scope);
164+
updatedState.scope = scope;
165+
}
166+
return isEmpty(updatedState) ? null : updatedState;
167+
}
168+
159169
componentDidMount() {
160170
localStorage.setItem(STORAGE_KEY, this.state.code);
161171
window.addEventListener('storage', this.syncCode);
162172
}
163173

164-
componentWillReceiveProps(nextProps) {
165-
if (nextProps.code !== this.props.code) {
166-
const code = (this.props.code || defaultCode).trim();
167-
this.setState({ code });
168-
}
169-
if (nextProps.scope !== this.props.scope) {
170-
const scope = getEnhancedScope(nextProps.scope);
171-
this.setState({ scope });
172-
}
174+
componentDidUpdate() {
175+
this.playgroundSetState();
173176
}
174177

175178
componentWillUnmount() {
176179
window.removeEventListener('storage', this.syncCode);
177180
}
178181

182+
playgroundSetState() {
183+
if (this.props.code) {
184+
const code = (this.props.code || defaultCode).trim();
185+
this.setState({ code });
186+
}
187+
if (this.props.scope) {
188+
const scope = getEnhancedScope(this.props.scope);
189+
this.setState({ scope });
190+
}
191+
}
179192
onKeyUp(evt) {
180193
evt.stopPropagation();
181194

‎src/components/heading.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,6 @@ const dynamicStyledHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce(
5151
{}
5252
);
5353

54-
// TODO(540): Refactor to non-deprecated lifecycle methods.
55-
// https://github.com/FormidableLabs/spectacle/issues/540
56-
// - componentWillReceiveProps
57-
// eslint-disable-next-line react/no-deprecated
5854
export default class Heading extends Component {
5955
constructor() {
6056
super(...arguments);
@@ -69,9 +65,17 @@ export default class Heading extends Component {
6965
window.addEventListener('load', this.resize);
7066
window.addEventListener('resize', this.resize);
7167
}
72-
componentWillReceiveProps() {
73-
this.resize();
68+
69+
static getDerivedStateFromProps(nextProps, prevState) {
70+
return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null;
71+
}
72+
73+
componentDidUpdate(prevProps) {
74+
if (prevProps.fit !== this.props.fit) {
75+
this.resize();
76+
}
7477
}
78+
7579
componentWillUnmount() {
7680
window.removeEventListener('load', this.resize);
7781
window.removeEventListener('resize', this.resize);

‎src/components/magic-wrapper.js‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,6 @@ class Context extends Component {
5353
}
5454
}
5555

56-
// TODO(540): Refactor to non-deprecated lifecycle methods.
57-
// https://github.com/FormidableLabs/spectacle/issues/540
58-
// - componentWillReceiveProps
59-
// eslint-disable-next-line react/no-deprecated
6056
export default class MagicText extends Component {
6157
static contextTypes = {
6258
contentHeight: PropTypes.number,
@@ -86,6 +82,12 @@ export default class MagicText extends Component {
8682
renderedChildren: props.children
8783
};
8884
}
85+
86+
static getDerivedStateFromProps(nextProps, prevState) {
87+
return nextProps.magicIndex !== prevState.magicIndex
88+
? { magicIndex: nextProps.magicIndex }
89+
: null;
90+
}
8991
componentDidMount() {
9092
this.mounted = true;
9193
this.portal = document.getElementById('portal');
@@ -122,42 +124,10 @@ export default class MagicText extends Component {
122124
}
123125
);
124126
}
125-
componentWillReceiveProps(nextProps) {
126-
if (this.props.magicIndex === nextProps.magicIndex) {
127-
return;
128-
}
129-
ReactDOM.render(
130-
<Context context={this.context}>
131-
<Deck>{nextProps.children}</Deck>
132-
</Context>,
133-
this.portal,
134-
() => {
135-
const styles = {};
136-
const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]');
137-
if (portalRoot) {
138-
updateChildren(portalRoot);
139-
buildStyleMap(styles, portalRoot);
140-
this.diffs = detailedDiff(this.portalMap, styles);
141-
this.lastPortalMap = this.portalMap;
142-
this.portalMap = styles;
143-
if (this.mounted) {
144-
this.setState(
145-
{
146-
renderedChildren: nextProps.children
147-
},
148-
() => {
149-
this.forceUpdate();
150-
}
151-
);
152-
}
153-
}
154-
}
155-
);
156-
}
157127
shouldComponentUpdate() {
158128
return false;
159129
}
160-
componentDidUpdate() {
130+
componentDidUpdate(prevProps) {
161131
const containerRoot = get(this.container, 'childNodes[0]');
162132
if (containerRoot) {
163133
updateChildren(containerRoot);
@@ -199,6 +169,35 @@ export default class MagicText extends Component {
199169
}
200170
});
201171
}
172+
if (this.props.magicIndex !== prevProps.magicIndex) {
173+
ReactDOM.render(
174+
<Context context={this.context}>
175+
<Deck>{this.props.children}</Deck>
176+
</Context>,
177+
this.portal,
178+
() => {
179+
const styles = {};
180+
const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]');
181+
if (portalRoot) {
182+
updateChildren(portalRoot);
183+
buildStyleMap(styles, portalRoot);
184+
this.diffs = detailedDiff(this.portalMap, styles);
185+
this.lastPortalMap = this.portalMap;
186+
this.portalMap = styles;
187+
if (this.mounted) {
188+
this.setState(
189+
{
190+
renderedChildren: this.props.children
191+
},
192+
() => {
193+
this.forceUpdate();
194+
}
195+
);
196+
}
197+
}
198+
}
199+
);
200+
}
202201
this.lastDiffs = this.diffs;
203202
}
204203
componentWillUnmount() {

‎src/components/manager.js‎

Lines changed: 42 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,44 @@ const StyledTransition = styled(ReactTransitionGroup)({
5757
transformStyle: 'flat'
5858
});
5959

60-
// TODO(540): Refactor to non-deprecated lifecycle methods.
61-
// https://github.com/FormidableLabs/spectacle/issues/540
62-
// - componentWillMount
63-
// - componentWillReceiveProps
64-
// eslint-disable-next-line react/no-deprecated
60+
function buildSlideReference(props) {
61+
const slideReference = [];
62+
Children.toArray(props.children).forEach((child, rootIndex) => {
63+
if (child.type === Magic) {
64+
Children.toArray(child.props.children).forEach((setSlide, magicIndex) => {
65+
const reference = {
66+
id: setSlide.props.id || slideReference.length,
67+
magicIndex,
68+
rootIndex
69+
};
70+
slideReference.push(reference);
71+
});
72+
} else if (!child.props.hasSlideChildren) {
73+
const reference = {
74+
id: child.props.id || slideReference.length,
75+
rootIndex
76+
};
77+
if (child.props.goTo) {
78+
reference.goTo = child.props.goTo;
79+
}
80+
slideReference.push(reference);
81+
} else {
82+
child.props.children.forEach((setSlide, setIndex) => {
83+
const reference = {
84+
id: setSlide.props.id || slideReference.length,
85+
setIndex,
86+
rootIndex
87+
};
88+
if (child.props.goTo) {
89+
reference.goTo = child.props.goTo;
90+
}
91+
slideReference.push(reference);
92+
});
93+
}
94+
});
95+
return slideReference;
96+
}
97+
6598
export class Manager extends Component {
6699
static displayName = 'Manager';
67100

@@ -146,10 +179,8 @@ export class Manager extends Component {
146179
};
147180
}
148181

149-
componentWillMount() {
150-
this.setState({
151-
slideReference: this._buildSlideReference(this.props)
152-
});
182+
static getDerivedStateFromProps(nextProps) {
183+
return { slideReference: buildSlideReference(nextProps) };
153184
}
154185

155186
componentDidMount() {
@@ -163,12 +194,6 @@ export class Manager extends Component {
163194
}
164195
}
165196

166-
componentWillReceiveProps(nextProps) {
167-
this.setState({
168-
slideReference: this._buildSlideReference(nextProps)
169-
});
170-
}
171-
172197
componentDidUpdate() {
173198
if (
174199
this.props.globalStyles &&
@@ -177,6 +202,7 @@ export class Manager extends Component {
177202
this.props.dispatch(setGlobalStyle());
178203
}
179204
}
205+
180206
componentWillUnmount() {
181207
this._detachEvents();
182208
}
@@ -670,45 +696,7 @@ export class Manager extends Component {
670696

671697
return 0;
672698
}
673-
_buildSlideReference(props) {
674-
const slideReference = [];
675-
Children.toArray(props.children).forEach((child, rootIndex) => {
676-
if (child.type === Magic) {
677-
Children.toArray(child.props.children).forEach(
678-
(setSlide, magicIndex) => {
679-
const reference = {
680-
id: setSlide.props.id || slideReference.length,
681-
magicIndex,
682-
rootIndex
683-
};
684-
slideReference.push(reference);
685-
}
686-
);
687-
} else if (!child.props.hasSlideChildren) {
688-
const reference = {
689-
id: child.props.id || slideReference.length,
690-
rootIndex
691-
};
692-
if (child.props.goTo) {
693-
reference.goTo = child.props.goTo;
694-
}
695-
slideReference.push(reference);
696-
} else {
697-
child.props.children.forEach((setSlide, setIndex) => {
698-
const reference = {
699-
id: setSlide.props.id || slideReference.length,
700-
setIndex,
701-
rootIndex
702-
};
703-
if (child.props.goTo) {
704-
reference.goTo = child.props.goTo;
705-
}
706-
slideReference.push(reference);
707-
});
708-
}
709-
});
710-
return slideReference;
711-
}
699+
712700
_getSlideIndex() {
713701
let index = parseInt(this.props.route.slide);
714702
if (!Number.isFinite(index)) {

‎src/components/notes.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { Component } from 'react';
22
import PropTypes from 'prop-types';
33

4-
// TODO(540): Refactor to non-deprecated lifecycle methods.
5-
// https://github.com/FormidableLabs/spectacle/issues/540
6-
// - componentWillMount
7-
// eslint-disable-next-line react/no-deprecated
84
export default class Notes extends Component {
95
static contextTypes = {
106
store: PropTypes.object,
@@ -16,7 +12,7 @@ export default class Notes extends Component {
1612
children: PropTypes.node.isRequired
1713
};
1814

19-
componentWillMount() {
15+
componentDidMount() {
2016
const { store, slideHash: parentSlide, updateNotes } = this.context;
2117
const currentSlide = store.getState().route.slide;
2218

‎src/components/text.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@ const UnfitText = styled.p(({ lineHeight, styles }) => [
3535
styles.user
3636
]);
3737

38-
// TODO(540): Refactor to non-deprecated lifecycle methods.
39-
// https://github.com/FormidableLabs/spectacle/issues/540
40-
// - componentWillReceiveProps
41-
// eslint-disable-next-line react/no-deprecated
4238
export default class Text extends Component {
4339
constructor() {
4440
super(...arguments);
@@ -49,13 +45,20 @@ export default class Text extends Component {
4945
};
5046
}
5147

48+
static getDerivedStateFromProps(nextProps, prevState) {
49+
return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null;
50+
}
51+
5252
componentDidMount() {
5353
this.resize();
5454
window.addEventListener('load', this.resize);
5555
window.addEventListener('resize', this.resize);
5656
}
57-
componentWillReceiveProps() {
58-
this.resize();
57+
58+
componentDidUpdate(prevProps) {
59+
if (prevProps.fit !== this.props.fit) {
60+
this.resize();
61+
}
5962
}
6063
componentWillUnmount() {
6164
window.removeEventListener('load', this.resize);

0 commit comments

Comments
 (0)