Merge pull request #72 from NuCivic/fix-example-warnings

Fix warning createClass is deprecated.
NuCivic · Apr 10, 2017 · 25cbadf · 25cbadf
2 parents dc0e35d + f3610ca
commit 25cbadf
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 36 deletions.
diff --git a/examples/barChart/index.js b/examples/barChart/index.js
@@ -39,14 +39,21 @@
   ];
 
   // Unmounting example
-  var Chart = React.createClass({
-    getInitialState: function(){
-      return {visible: true};
-    },
-    toggleVisibility: function(){;
-      this.setState({visible: !this.state.visible});
-    },
-    render: function(){
+  class Chart extends React.Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        visible: true
+      };
+      this.toggleVisibility = this.toggleVisibility.bind(this);
+    }
+
+    toggleVisibility() {
+      this.setState({ visible: !this.state.visible });
+    }
+
+    render() {
       var chart;
       var context = {
         getColor: function(i){
@@ -65,11 +72,15 @@
         </div>
       );
     }
-  })
+  }
 
   ReactDOM.render(
     <Chart />,
     document.getElementById('barChart')
   );
+  ReactDOM.render(
+    <Chart />,
+    document.getElementById('barChart')
+  );
 
 })(window);
diff --git a/examples/index.html b/examples/index.html
@@ -15,8 +15,11 @@ <h1>Examples</h1>
         <li><a href="/examples/barChart">Bar Chart</a></li>
         <li><a href="/examples/cumulativeLineChart">Cumulative Line Chart</a></li>
         <li><a href="/examples/lineChart">Line Chart</a></li>
+        <li><a href="/examples/linePlusBarChart">Line Plush Bar Chart</a></li>
         <li><a href="/examples/multibarChart">Multibar Chart</a></li>
         <li><a href="/examples/pieChart">Pie Chart</a></li>
+        <li><a href="/examples/scatterChart">Scatter Chart</a></li>
+        <li><a href="/examples/stackedAreaChart">Stacked Area Chart</a></li>
       </ul>
     </div>
   </div>

diff --git a/examples/lineChart/index.js b/examples/lineChart/index.js
@@ -23,14 +23,20 @@
     ];
   }
 
-  var LineWrapper = React.createClass({
-    getInitialState: function() {
-      return { count: 1}
-    },
-    handleClick: function() {
+  class LineWrapper extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        count: 1
+      };
+      this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick() {
       this.setState({count: this.state.count + 1})
-    },
-    render: function() {
+    }
+
+    render() {
       const data = (this.state.count % 2 == 0)? getDatum(10): getDatum(11);
       return (
         <div>
@@ -61,7 +67,7 @@
         </div>
       )
     }
-  });
+  };
 
   ReactDOM.render(
     <LineWrapper name="wrapper"/>,

diff --git a/examples/pieChart/index.js b/examples/pieChart/index.js
@@ -17,14 +17,20 @@ var data2 = [
 ];
 
 
-var PieWrapper = React.createClass({
-  getInitialState: function() {
-    return { count: 1}
-  },
-  handleClick: function() {
+class PieWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 1
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
     this.setState({count: this.state.count + 1})
-  },
-  render: function() {
+  }
+
+  render() {
     const data = (this.state.count % 2 == 0)? data1: data2;
     return (
       <div>
@@ -44,11 +50,11 @@ var PieWrapper = React.createClass({
       </div>
     )
   }
-})
+}
 
 ReactDOM.render(
   <PieWrapper name="wrapper" />,
   document.getElementById('pieChart')
 );
 
-})(window);
+})(window);
diff --git a/examples/scatterChart/index.js b/examples/scatterChart/index.js
@@ -21,14 +21,18 @@
           return data;
       }
 
-  var Main = React.createClass({
-    getInitialState: function() {
-      return { data: randomData(4, 40) };
-    },
-    handleClick: function() {
+  class Main extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { data: randomData(4, 40) }
+      this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick() {
       this.setState({ data: randomData(4, 40) });
-    },
-    render: function() {
+    }
+
+    render() {
       return (
         <div>
           <button onClick={this.handleClick}>
@@ -37,13 +41,12 @@
           <NVD3Chart
             type="scatterChart"
             datum={this.state.data}
-            containerStyle={{ width: "500px", height: "500px" }}
-            options={{ showDistX: true, showDistY: true }}
+            containerStyle={{ width: 500, height: 500 }}
           />
         </div>
       );
     }
-  });
+  };
 
   ReactDOM.render(
     <Main />,