Remove deprecated react methods; refactor

Author: dmt0

src/factory.js

@@ -61,48 +61,10 @@ export default function plotComponentFactory(Plotly) {
       this.getRef = this.getRef.bind(this);
       this.handleUpdate = this.handleUpdate.bind(this);
       this.figureCallback = this.figureCallback.bind(this);
+      this.updatePlotly = this.updatePlotly.bind(this);
     }
 
-    componentDidMount() {
-      this.unmounting = false;
-
-      this.p = this.p
-        .then(() => {
-          if (!this.el) {
-            let error;
-            if (this.unmounting) {
-              error = new Error('Component is unmounting');
-              error.reason = 'unmounting';
-            } else {
-              error = new Error('Missing element reference');
-            }
-            throw error;
-          }
-          return Plotly.newPlot(this.el, {
-            data: this.props.data,
-            layout: this.props.layout,
-            config: this.props.config,
-            frames: this.props.frames,
-          });
-        })
-        .then(() => this.syncWindowResize(null, true))
-        .then(this.syncEventHandlers)
-        .then(this.attachUpdateEvents)
-        .then(() => this.figureCallback(this.props.onInitialized))
-        .catch(err => {
-          if (err.reason === 'unmounting') {
-            return;
-          }
-          console.error('Error while plotting:', err); // eslint-disable-line no-console
-          if (this.props.onError) {
-            this.props.onError(err);
-          }
-        });
-    }
-
-    UNSAFE_componentWillUpdate(nextProps) {
-      this.unmounting = false;
-
+    shouldComponentUpdate(nextProps) {
       // frames *always* changes identity so fall back to check length only :(
       const numPrevFrames =
         this.props.frames && this.props.frames.length ? this.props.frames.length : 0;
@@ -118,10 +80,15 @@ export default function plotComponentFactory(Plotly) {
       const revisionDefined = nextProps.revision !== void 0;
       const revisionChanged = nextProps.revision !== this.props.revision;
 
-      if (!figureChanged && (!revisionDefined || (revisionDefined && !revisionChanged))) {
-        return;
-      }
+      return figureChanged || (revisionDefined && revisionChanged);
+    }
 
+    updatePlotly(
+      props,
+      shouldInvokeResizeHandler,
+      figureCallbackFunction,
+      shouldAttachUpdateEvents
+    ) {
       this.p = this.p
         .then(() => {
           if (!this.el) {
@@ -135,26 +102,39 @@ export default function plotComponentFactory(Plotly) {
             throw error;
           }
           return Plotly.react(this.el, {
-            data: nextProps.data,
-            layout: nextProps.layout,
-            config: nextProps.config,
-            frames: nextProps.frames,
+            data: props.data,
+            layout: props.layout,
+            config: props.config,
+            frames: props.frames,
           });
         })
-        .then(() => this.syncEventHandlers(nextProps))
-        .then(() => this.syncWindowResize(nextProps))
-        .then(() => this.figureCallback(nextProps.onUpdate))
+        .then(() => this.syncWindowResize(props, shouldInvokeResizeHandler))
+        .then(() => this.syncEventHandlers(props))
+        .then(() => this.figureCallback(figureCallbackFunction))
+        .then(shouldAttachUpdateEvents ? this.attachUpdateEvents : () => {})
         .catch(err => {
           if (err.reason === 'unmounting') {
             return;
           }
           console.error('Error while plotting:', err); // eslint-disable-line no-console
-          if (this.props.onError) {
-            this.props.onError(err);
+          if (props.onError) {
+            props.onError(err);
           }
         });
     }
 
+    componentDidMount() {
+      this.unmounting = false;
+
+      this.updatePlotly(this.props, true, this.props.onInitialized, true);
+    }
+
+    componentDidUpdate(nextProps) {
+      this.unmounting = false;
+
+      this.updatePlotly(nextProps, false, nextProps.onUpdate, false);
+    }
+
     componentWillUnmount() {
       this.unmounting = true;
 
@@ -175,19 +155,19 @@ export default function plotComponentFactory(Plotly) {
         return;
       }
 
-      for (let i = 0; i < updateEvents.length; i++) {
-        this.el.on(updateEvents[i], this.handleUpdate);
-      }
+      updateEvents.forEach(updateEvent => {
+        this.el.on(updateEvent, this.handleUpdate);
+      });
     }
 
     removeUpdateEvents() {
       if (!this.el || !this.el.removeListener) {
         return;
       }
 
-      for (let i = 0; i < updateEvents.length; i++) {
-        this.el.removeListener(updateEvents[i], this.handleUpdate);
-      }
+      updateEvents.forEach(updateEvent => {
+        this.el.removeListener(updateEvent, this.handleUpdate);
+      });
     }
 
     handleUpdate() {
@@ -210,9 +190,7 @@ export default function plotComponentFactory(Plotly) {
       }
 
       if (props.useResizeHandler && !this.resizeHandler) {
-        this.resizeHandler = () => {
-          return Plotly.Plots.resize(this.el);
-        };
+        this.resizeHandler = () => Plotly.Plots.resize(this.el);
         window.addEventListener('resize', this.resizeHandler);
         if (invoke) {
           this.resizeHandler();
@@ -232,12 +210,9 @@ export default function plotComponentFactory(Plotly) {
     }
 
     // Attach and remove event handlers as they're added or removed from props:
-    syncEventHandlers(propsIn) {
+    syncEventHandlers(props) {
       // Allow use of nextProps if passed explicitly:
-      const props = propsIn || this.props;
-
-      for (let i = 0; i < eventNames.length; i++) {
-        const eventName = eventNames[i];
+      eventNames.forEach(eventName => {
         const prop = props['on' + eventName];
         const hasHandler = Boolean(this.handlers[eventName]);
 
@@ -249,7 +224,7 @@ export default function plotComponentFactory(Plotly) {
           this.el.removeListener('plotly_' + eventName.toLowerCase(), this.handlers[eventName]);
           delete this.handlers[eventName];
         }
-      }
+      });
     }
 
     render() {
@@ -281,9 +256,9 @@ export default function plotComponentFactory(Plotly) {
     divId: PropTypes.string,
   };
 
-  for (let i = 0; i < eventNames.length; i++) {
-    PlotlyComponent.propTypes['on' + eventNames[i]] = PropTypes.func;
-  }
+  eventNames.forEach(eventName => {
+    PlotlyComponent.propTypes['on' + eventName] = PropTypes.func;
+  });
 
   PlotlyComponent.defaultProps = {
     debug: false,