From 8b5bd546f63272c585e0eda87d8e2200a2665b8a Mon Sep 17 00:00:00 2001 From: ElreyB Date: Tue, 18 Sep 2018 14:17:45 -0700 Subject: [PATCH 1/9] [WIP] Remove deprecated lifecycles --- src/components/heading.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/heading.js b/src/components/heading.js index 3d76d5fc5..41adeacc1 100644 --- a/src/components/heading.js +++ b/src/components/heading.js @@ -69,9 +69,17 @@ export default class Heading extends Component { window.addEventListener('load', this.resize); window.addEventListener('resize', this.resize); } - componentWillReceiveProps() { - this.resize(); + + static getDerivedStateFromProps(nextProps, prevState) { + return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null; + } + + componentDidUpdate(prevState, prevProps) { + if (prevProps.fit !== this.props.fit) { + this.resize(); + } } + componentWillUnmount() { window.removeEventListener('load', this.resize); window.removeEventListener('resize', this.resize); From d7b00fa679b63d2b38a4a0ed315793cb76108cc5 Mon Sep 17 00:00:00 2001 From: ElreyB Date: Tue, 18 Sep 2018 17:29:52 -0700 Subject: [PATCH 2/9] refactor componentWillReceiveProps to getDerivedStateFromProps in text.js file --- src/components/text.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/text.js b/src/components/text.js index 9af77f06e..e15cb6721 100644 --- a/src/components/text.js +++ b/src/components/text.js @@ -54,8 +54,14 @@ export default class Text extends Component { window.addEventListener('load', this.resize); window.addEventListener('resize', this.resize); } - componentWillReceiveProps() { - this.resize(); + static getDerivedStateFromProps(nextProps, prevState) { + return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null; + } + + componentDidUpdate(prevState, prevProps) { + if (prevProps.fit !== this.props.fit) { + this.resize(); + } } componentWillUnmount() { window.removeEventListener('load', this.resize); From 342c25c9369cddfafc0ae1cb0e715e19feb2d94d Mon Sep 17 00:00:00 2001 From: ElreyB Date: Wed, 19 Sep 2018 09:44:57 -0700 Subject: [PATCH 3/9] refactor componentWillReceiveProps to getDerivedStateFromProps in magic-wapper.js file --- src/components/magic-wrapper.js | 101 +++++++++++++++++++++----------- 1 file changed, 68 insertions(+), 33 deletions(-) diff --git a/src/components/magic-wrapper.js b/src/components/magic-wrapper.js index b092d798f..4e61ea706 100644 --- a/src/components/magic-wrapper.js +++ b/src/components/magic-wrapper.js @@ -86,6 +86,12 @@ export default class MagicText extends Component { renderedChildren: props.children }; } + + static getDerivedStateFromProps(nextProps, prevState) { + return nextProps.magicIndex !== prevState.magicIndex + ? { magicIndex: nextProps.magicIndex } + : null; + } componentDidMount() { this.mounted = true; this.portal = document.getElementById('portal'); @@ -122,42 +128,42 @@ export default class MagicText extends Component { } ); } - componentWillReceiveProps(nextProps) { - if (this.props.magicIndex === nextProps.magicIndex) { - return; - } - ReactDOM.render( - - {nextProps.children} - , - this.portal, - () => { - const styles = {}; - const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]'); - if (portalRoot) { - updateChildren(portalRoot); - buildStyleMap(styles, portalRoot); - this.diffs = detailedDiff(this.portalMap, styles); - this.lastPortalMap = this.portalMap; - this.portalMap = styles; - if (this.mounted) { - this.setState( - { - renderedChildren: nextProps.children - }, - () => { - this.forceUpdate(); - } - ); - } - } - } - ); - } + // componentWillReceiveProps(nextProps) { + // if (this.props.magicIndex === nextProps.magicIndex) { + // return; + // } + // ReactDOM.render( + // + // {nextProps.children} + // , + // this.portal, + // () => { + // const styles = {}; + // const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]'); + // if (portalRoot) { + // updateChildren(portalRoot); + // buildStyleMap(styles, portalRoot); + // this.diffs = detailedDiff(this.portalMap, styles); + // this.lastPortalMap = this.portalMap; + // this.portalMap = styles; + // if (this.mounted) { + // this.setState( + // { + // renderedChildren: nextProps.children + // }, + // () => { + // this.forceUpdate(); + // } + // ); + // } + // } + // } + // ); + // } shouldComponentUpdate() { return false; } - componentDidUpdate() { + componentDidUpdate(prevProps) { const containerRoot = get(this.container, 'childNodes[0]'); if (containerRoot) { updateChildren(containerRoot); @@ -199,6 +205,35 @@ export default class MagicText extends Component { } }); } + if (this.props.magicIndex !== prevProps.magicIndex) { + ReactDOM.render( + + {this.props.children} + , + this.portal, + () => { + const styles = {}; + const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]'); + if (portalRoot) { + updateChildren(portalRoot); + buildStyleMap(styles, portalRoot); + this.diffs = detailedDiff(this.portalMap, styles); + this.lastPortalMap = this.portalMap; + this.portalMap = styles; + if (this.mounted) { + this.setState( + { + renderedChildren: this.props.children + }, + () => { + this.forceUpdate(); + } + ); + } + } + } + ); + } this.lastDiffs = this.diffs; } componentWillUnmount() { From ca2d2c8fce585efcce67b239219b0231e0c633ac Mon Sep 17 00:00:00 2001 From: ElreyB Date: Wed, 19 Sep 2018 14:04:24 -0700 Subject: [PATCH 4/9] refactor componentWillReceiveProps to getDerivedStateFromProps in component-playground.js file --- src/components/component-playground.js | 35 +++++++++++++++++++------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/components/component-playground.js b/src/components/component-playground.js index 032199e15..3b6f55a45 100644 --- a/src/components/component-playground.js +++ b/src/components/component-playground.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import isEmpty from 'lodash/isEmpty'; import PropTypes from 'prop-types'; import styled, { css } from 'react-emotion'; import { defaultCode } from '../utils/playground.default-code'; @@ -156,26 +157,42 @@ class ComponentPlayground extends Component { }; } + static getDerivedStateFromProps(nextProps, preState) { + const updatedState = {}; + if (nextProps.code !== preState.code) { + const code = (nextProps.code || defaultCode).trim(); + updatedState.code = code; + } + if (nextProps.scope !== preState.scope) { + const scope = getEnhancedScope(nextProps.scope); + updatedState.scope = scope; + } + return isEmpty(updatedState) ? null : updatedState; + } + componentDidMount() { localStorage.setItem(STORAGE_KEY, this.state.code); window.addEventListener('storage', this.syncCode); } - componentWillReceiveProps(nextProps) { - if (nextProps.code !== this.props.code) { - const code = (this.props.code || defaultCode).trim(); - this.setState({ code }); - } - if (nextProps.scope !== this.props.scope) { - const scope = getEnhancedScope(nextProps.scope); - this.setState({ scope }); - } + componentDidUpdate() { + this.playgroundsetState(); } componentWillUnmount() { window.removeEventListener('storage', this.syncCode); } + playgroundsetState() { + if (this.props.code) { + const code = (this.props.code || defaultCode).trim(); + this.setState({ code }); + } + if (this.props.scope) { + const scope = getEnhancedScope(this.props.scope); + this.setState({ scope }); + } + } onKeyUp(evt) { evt.stopPropagation(); From 426842fd00a6aaa56e53a470e8d79f995cf417ae Mon Sep 17 00:00:00 2001 From: ElreyB Date: Thu, 20 Sep 2018 09:31:45 -0700 Subject: [PATCH 5/9] refactor componentWillReceiveProps to getDerivedStateFromProps in manager.js file --- src/components/manager.js | 91 ++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 49 deletions(-) diff --git a/src/components/manager.js b/src/components/manager.js index dc4f883fc..52a663d3b 100644 --- a/src/components/manager.js +++ b/src/components/manager.js @@ -57,6 +57,44 @@ const StyledTransition = styled(ReactTransitionGroup)({ transformStyle: 'flat' }); +function buildSlideReference(props) { + const slideReference = []; + Children.toArray(props.children).forEach((child, rootIndex) => { + if (child.type === Magic) { + Children.toArray(child.props.children).forEach((setSlide, magicIndex) => { + const reference = { + id: setSlide.props.id || slideReference.length, + magicIndex, + rootIndex + }; + slideReference.push(reference); + }); + } else if (!child.props.hasSlideChildren) { + const reference = { + id: child.props.id || slideReference.length, + rootIndex + }; + if (child.props.goTo) { + reference.goTo = child.props.goTo; + } + slideReference.push(reference); + } else { + child.props.children.forEach((setSlide, setIndex) => { + const reference = { + id: setSlide.props.id || slideReference.length, + setIndex, + rootIndex + }; + if (child.props.goTo) { + reference.goTo = child.props.goTo; + } + slideReference.push(reference); + }); + } + }); + return slideReference; +} + // TODO(540): Refactor to non-deprecated lifecycle methods. // https://github.com/FormidableLabs/spectacle/issues/540 // - componentWillMount @@ -146,10 +184,8 @@ export class Manager extends Component { }; } - componentWillMount() { - this.setState({ - slideReference: this._buildSlideReference(this.props) - }); + static getDerivedStateFromProps(nextProps) { + return { slideReference: buildSlideReference(nextProps) }; } componentDidMount() { @@ -163,12 +199,6 @@ export class Manager extends Component { } } - componentWillReceiveProps(nextProps) { - this.setState({ - slideReference: this._buildSlideReference(nextProps) - }); - } - componentDidUpdate() { if ( this.props.globalStyles && @@ -177,6 +207,7 @@ export class Manager extends Component { this.props.dispatch(setGlobalStyle()); } } + componentWillUnmount() { this._detachEvents(); } @@ -670,45 +701,7 @@ export class Manager extends Component { return 0; } - _buildSlideReference(props) { - const slideReference = []; - Children.toArray(props.children).forEach((child, rootIndex) => { - if (child.type === Magic) { - Children.toArray(child.props.children).forEach( - (setSlide, magicIndex) => { - const reference = { - id: setSlide.props.id || slideReference.length, - magicIndex, - rootIndex - }; - slideReference.push(reference); - } - ); - } else if (!child.props.hasSlideChildren) { - const reference = { - id: child.props.id || slideReference.length, - rootIndex - }; - if (child.props.goTo) { - reference.goTo = child.props.goTo; - } - slideReference.push(reference); - } else { - child.props.children.forEach((setSlide, setIndex) => { - const reference = { - id: setSlide.props.id || slideReference.length, - setIndex, - rootIndex - }; - if (child.props.goTo) { - reference.goTo = child.props.goTo; - } - slideReference.push(reference); - }); - } - }); - return slideReference; - } + _getSlideIndex() { let index = parseInt(this.props.route.slide); if (!Number.isFinite(index)) { From 849b046238f03034e6e17e84fd911d1cf2cb5ffa Mon Sep 17 00:00:00 2001 From: ElreyB Date: Thu, 20 Sep 2018 10:15:05 -0700 Subject: [PATCH 6/9] refactor componentWillMount to componentDidMount in notes.js file --- src/components/notes.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/notes.js b/src/components/notes.js index 24c3e0344..7ac22d161 100644 --- a/src/components/notes.js +++ b/src/components/notes.js @@ -1,10 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillMount -// eslint-disable-next-line react/no-deprecated export default class Notes extends Component { static contextTypes = { store: PropTypes.object, @@ -16,7 +12,7 @@ export default class Notes extends Component { children: PropTypes.node.isRequired }; - componentWillMount() { + componentDidMount() { const { store, slideHash: parentSlide, updateNotes } = this.context; const currentSlide = store.getState().route.slide; From 6defec38626c1ae23acca474cb197c1c3982db7c Mon Sep 17 00:00:00 2001 From: ElreyB Date: Thu, 20 Sep 2018 14:42:45 -0700 Subject: [PATCH 7/9] removed comment deprecated code from magic-wrapper.js --- src/components/magic-wrapper.js | 32 -------------------------------- 1 file changed, 32 deletions(-) diff --git a/src/components/magic-wrapper.js b/src/components/magic-wrapper.js index 4e61ea706..e7589b10e 100644 --- a/src/components/magic-wrapper.js +++ b/src/components/magic-wrapper.js @@ -128,38 +128,6 @@ export default class MagicText extends Component { } ); } - // componentWillReceiveProps(nextProps) { - // if (this.props.magicIndex === nextProps.magicIndex) { - // return; - // } - // ReactDOM.render( - // - // {nextProps.children} - // , - // this.portal, - // () => { - // const styles = {}; - // const portalRoot = get(this.portal, 'childNodes[0].childNodes[0]'); - // if (portalRoot) { - // updateChildren(portalRoot); - // buildStyleMap(styles, portalRoot); - // this.diffs = detailedDiff(this.portalMap, styles); - // this.lastPortalMap = this.portalMap; - // this.portalMap = styles; - // if (this.mounted) { - // this.setState( - // { - // renderedChildren: nextProps.children - // }, - // () => { - // this.forceUpdate(); - // } - // ); - // } - // } - // } - // ); - // } shouldComponentUpdate() { return false; } From d3231801704a84d529924ec2e887cb7e30113268 Mon Sep 17 00:00:00 2001 From: ElreyB Date: Mon, 24 Sep 2018 08:17:08 -0700 Subject: [PATCH 8/9] refactor according to PR comments --- src/components/component-playground.js | 14 +++++--------- src/components/heading.js | 4 ---- src/components/manager.js | 5 ----- src/components/text.js | 13 +++++-------- 4 files changed, 10 insertions(+), 26 deletions(-) diff --git a/src/components/component-playground.js b/src/components/component-playground.js index 3b6f55a45..19639fb71 100644 --- a/src/components/component-playground.js +++ b/src/components/component-playground.js @@ -139,10 +139,6 @@ function getEnhancedScope(scope = {}) { return { Component, ...scope }; } -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillReceiveProps -// eslint-disable-next-line react/no-deprecated class ComponentPlayground extends Component { constructor() { super(...arguments); @@ -157,13 +153,13 @@ class ComponentPlayground extends Component { }; } - static getDerivedStateFromProps(nextProps, preState) { + static getDerivedStateFromProps(nextProps, prevState) { const updatedState = {}; - if (nextProps.code !== preState.code) { + if (nextProps.code !== prevState.code) { const code = (nextProps.code || defaultCode).trim(); updatedState.code = code; } - if (nextProps.scope !== preState.scope) { + if (nextProps.scope !== prevState.scope) { const scope = getEnhancedScope(nextProps.scope); updatedState.scope = scope; } @@ -176,14 +172,14 @@ class ComponentPlayground extends Component { } componentDidUpdate() { - this.playgroundsetState(); + this.playgroundSetState(); } componentWillUnmount() { window.removeEventListener('storage', this.syncCode); } - playgroundsetState() { + playgroundSetState() { if (this.props.code) { const code = (this.props.code || defaultCode).trim(); this.setState({ code }); diff --git a/src/components/heading.js b/src/components/heading.js index 41adeacc1..09d55964a 100644 --- a/src/components/heading.js +++ b/src/components/heading.js @@ -51,10 +51,6 @@ const dynamicStyledHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce( {} ); -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillReceiveProps -// eslint-disable-next-line react/no-deprecated export default class Heading extends Component { constructor() { super(...arguments); diff --git a/src/components/manager.js b/src/components/manager.js index 52a663d3b..0fcfaf628 100644 --- a/src/components/manager.js +++ b/src/components/manager.js @@ -95,11 +95,6 @@ function buildSlideReference(props) { return slideReference; } -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillMount -// - componentWillReceiveProps -// eslint-disable-next-line react/no-deprecated export class Manager extends Component { static displayName = 'Manager'; diff --git a/src/components/text.js b/src/components/text.js index e15cb6721..dfcbdd16a 100644 --- a/src/components/text.js +++ b/src/components/text.js @@ -35,10 +35,6 @@ const UnfitText = styled.p(({ lineHeight, styles }) => [ styles.user ]); -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillReceiveProps -// eslint-disable-next-line react/no-deprecated export default class Text extends Component { constructor() { super(...arguments); @@ -49,16 +45,17 @@ export default class Text extends Component { }; } + static getDerivedStateFromProps(nextProps, prevState) { + return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null; + } + componentDidMount() { this.resize(); window.addEventListener('load', this.resize); window.addEventListener('resize', this.resize); } - static getDerivedStateFromProps(nextProps, prevState) { - return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null; - } - componentDidUpdate(prevState, prevProps) { + componentDidUpdate(prevProps) { if (prevProps.fit !== this.props.fit) { this.resize(); } From 99407c33d75b6f6138602e98b4d517172d750e96 Mon Sep 17 00:00:00 2001 From: ElreyB Date: Mon, 24 Sep 2018 10:14:27 -0700 Subject: [PATCH 9/9] remove unused argument prevState from componentDidUpdate --- src/components/heading.js | 2 +- src/components/magic-wrapper.js | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/heading.js b/src/components/heading.js index 09d55964a..1b9afe014 100644 --- a/src/components/heading.js +++ b/src/components/heading.js @@ -70,7 +70,7 @@ export default class Heading extends Component { return nextProps.fit !== prevState.fit ? { fit: nextProps.fit } : null; } - componentDidUpdate(prevState, prevProps) { + componentDidUpdate(prevProps) { if (prevProps.fit !== this.props.fit) { this.resize(); } diff --git a/src/components/magic-wrapper.js b/src/components/magic-wrapper.js index e7589b10e..25e6e43a8 100644 --- a/src/components/magic-wrapper.js +++ b/src/components/magic-wrapper.js @@ -53,10 +53,6 @@ class Context extends Component { } } -// TODO(540): Refactor to non-deprecated lifecycle methods. -// https://github.com/FormidableLabs/spectacle/issues/540 -// - componentWillReceiveProps -// eslint-disable-next-line react/no-deprecated export default class MagicText extends Component { static contextTypes = { contentHeight: PropTypes.number,