fixing handlers again

nicolaskruchten · nicolaskruchten · commit ea7e6153677b · 2018-02-23T15:57:27.000-05:00
diff --git a/dev/App.js b/dev/App.js
@@ -0,0 +1,78 @@
+import React, {Component} from 'react';
+import {hot} from 'react-hot-loader';
+import createPlotComponent from '../src/factory';
+
+const Plot = createPlotComponent(Plotly);
+
+class App extends Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      y: [1],
+    }
+
+
+    this.data = {
+      type: 'scatter',
+      mode: 'points',
+      marker: {color: 'blue'}
+    }
+
+     this.limitData = {
+      type: 'scatter',
+      mode: 'line',
+      x:[0,20],
+      y:[2,2]
+    }
+
+     this.layout = {
+      dragmode: 'select',
+      width: 640,
+      height: 480
+    }
+
+    this.addData = () => {
+      this.setState(prevState => ({y: [...prevState.y, Math.random()]}));
+    }
+
+    this.resetData = () => {
+      this.setState({y: [1]})
+    }
+
+    this.streamData = () => {
+      const timer = setInterval(() => this.addData(), 1000);
+      this.setState(prevState => ({...prevState, timer}));
+    }
+
+    this.stopData = () => {
+      clearInterval(this.state.timer);
+    }
+  }
+
+
+  render(){
+    return (
+      <div>
+
+        <div>
+          <button onClick={this.streamData}> Add data </button>
+          <button onClick={this.stopData}> Stop </button>
+          <button onClick={this.resetData}> Reset </button>
+        </div>
+        <Plot
+          data={[{...this.data, y: this.state.y}, this.limitData]}
+          layout={this.layout}
+          onRestyle={this.state.y.length % 2 ? undefined: console.log}
+          onRelayout={this.state.y.length % 2 ? undefined: console.log}
+          onAfterPlot={this.state.y.length % 2 ? undefined: console.log}
+          onAnimatingFrame={this.state.y.length % 2 ? undefined: console.log}
+          onFramework={this.state.y.length % 2 ? undefined: console.log}
+          onSliderChange={this.state.y.length % 2 ? undefined: console.log}
+        />
+      </div>
+ );
+  }
+}
+
+export default hot(module)(App);
diff --git a/dev/favicon.ico b/dev/favicon.ico
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <title>Dev</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script src="bundle.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/dev/index.js b/dev/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/factory.js b/src/factory.js
@@ -63,6 +63,7 @@ export default function plotComponentFactory(Plotly) {
       this.attachUpdateEvents = this.attachUpdateEvents.bind(this);
       this.getRef = this.getRef.bind(this);
       this.handleUpdate = this.handleUpdate.bind(this);
+      this.handleUpdateWithProps = this.handleUpdateWithProps.bind(this);
     }
 
     shouldComponentUpdate(nextProps) {
@@ -73,7 +74,6 @@ export default function plotComponentFactory(Plotly) {
     }
 
     componentDidMount() {
-      if (!isBrowser) return;
       this.p = this.p
         .then(() => {
           return Plotly.newPlot(this.el, {
@@ -96,7 +96,6 @@ export default function plotComponentFactory(Plotly) {
     }
 
     componentWillUpdate(nextProps) {
-      if (!isBrowser) return;
       this.p = this.p
         .then(() => {
           if (hasReactAPIMethod) {
@@ -121,7 +120,7 @@ export default function plotComponentFactory(Plotly) {
         .then(() => {
           if (!hasReactAPIMethod) this.attachUpdateEvents();
         })
-        .then(() => this.handleUpdate(nextProps))
+        .then(() => this.handleUpdateWithProps(nextProps))
         .catch(err => {
           console.error('Error while plotting:', err);
           this.props.onError && this.props.onError(err);
@@ -162,8 +161,11 @@ export default function plotComponentFactory(Plotly) {
       }
     }
 
-    handleUpdate(props) {
-      props = props || this.props;
+    handleUpdate() {
+      this.handleUpdateWithProps(this.props);
+    }
+
+    handleUpdateWithProps(props) {
       if (props.onUpdate && typeof props.onUpdate === 'function') {
         props.onUpdate(this.el);
       }
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,31 @@
+const webpack = require('webpack');
+
+module.exports = {
+  entry: ['babel-polyfill', 'react-hot-loader/patch', './dev/index.js'],
+  output: {
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['react', 'es2015'],
+            plugins: [
+              'react-hot-loader/babel',
+              'transform-object-rest-spread',
+            ],
+          },
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devServer: {
+    open: true,
+    contentBase: './dev',
+  },
+  devtool: 'eval-source-map',
+};
