fix(react): Update React components to 16

BREACKING CHANGES: React components use the syntax of React 16

.eslintrc.js

@@ -24,6 +24,8 @@ module.exports = {
     'jsx-a11y/label-has-for': 0,
     'no-console': 0,
     'import/no-named-as-default-member': 0,
+    'import/no-named-as-default': 0,
+    'import/no-extraneous-dependencies': 0,
   },
   'settings': {
     'import/resolver': 'webpack'

package.json

@@ -24,7 +24,6 @@
         "jszip": "3.1.3",
         "pako": "1.0.1",
         "plotly.js": "1.14.0",
-        "prop-types": "^15.6.0",
         "shelljs": "0.7.4",
         "vtk.js": "5.3.0",
         "when": "3.7.7",
@@ -34,8 +33,8 @@
     "devDependencies": {
         "monologue.js": "0.3.5",
         "mout": "1.0.0",
-        "react": "15.3.1",
-        "react-dom": "15.3.1",
+        "react": "16.2.0",
+        "react-dom": "16.2.0",
         "d3": "3.5.17",
         "axios": "0.14.0",
         "gl-matrix": "2.3.1",

src/Component/React/ComponentToReact/index.js

@@ -1,40 +1,45 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-export default React.createClass({
+export default class ComponentToReact extends React.Component {
+  constructor(props) {
+    super(props);
 
-  displayName: 'ComponentToReact',
-
-  propTypes: {
-    className: React.PropTypes.string,
-    component: React.PropTypes.object,
-  },
+    // Bind callback
+    this.resize = this.resize.bind(this);
+  }
 
   componentDidMount() {
     if (this.props.component) {
       this.props.component.setContainer(this.container);
       this.props.component.resize();
     }
-  },
+  }
 
   componentDidUpdate() {
     if (this.props.component) {
       this.props.component.resize();
     }
-  },
+  }
 
   componentWillUnmount() {
     if (this.props.component) {
       this.props.component.setContainer(null);
     }
-  },
+  }
 
   resize() {
     if (this.props.component) {
       this.props.component.resize();
     }
-  },
+  }
 
   render() {
     return <div className={this.props.className} ref={c => (this.container = c)} />;
-  },
-});
+  }
+}
+
+ComponentToReact.propTypes = {
+  className: PropTypes.string,
+  component: PropTypes.object,
+};

src/Component/React/WorkbenchController/index.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import style from 'PVWStyle/ComponentReact/WorkbenchController.mcss';
 import LayoutsWidget from '../../../React/Widgets/LayoutsWidget';
 
@@ -60,11 +62,11 @@ export default function render(props) {
 }
 
 render.propTypes = {
-  onLayoutChange: React.PropTypes.func,
-  onViewportChange: React.PropTypes.func,
-  activeLayout: React.PropTypes.string,
-  viewports: React.PropTypes.object,
-  count: React.PropTypes.number,
+  onLayoutChange: PropTypes.func,
+  onViewportChange: PropTypes.func,
+  activeLayout: PropTypes.string,
+  viewports: PropTypes.object,
+  count: PropTypes.number,
 };
 
 render.defaultProps = {

src/React/CollapsibleControls/FloatImageControl/LayerItem.js

@@ -1,44 +1,45 @@
 import React from 'react';
-import style from 'PVWStyle/ReactCollapsibleControls/FloatImageControl.mcss';
-
-export default React.createClass({
-
-  displayName: 'FloatImageControl.LayerItem',
+import PropTypes from 'prop-types';
 
-  propTypes: {
-    item: React.PropTypes.object.isRequired,
-    model: React.PropTypes.object.isRequired,
-  },
+import style from 'PVWStyle/ReactCollapsibleControls/FloatImageControl.mcss';
 
-  getInitialState() {
-    return {
+export default class FloatImageControlLayerItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       change: false,
       dropDown: false,
     };
-  },
+
+    // Bind callback
+    this.toggleMesh = this.toggleMesh.bind(this);
+    this.toggleVisibility = this.toggleVisibility.bind(this);
+    this.toggleDropDown = this.toggleDropDown.bind(this);
+    this.updateColorBy = this.updateColorBy.bind(this);
+  }
 
   toggleMesh() {
     if (this.props.item.hasMesh) {
       this.props.model.updateMaskLayerVisibility(this.props.item.name, !this.props.item.meshActive);
       this.setState({ change: !this.state.change });
     }
-  },
+  }
 
   toggleVisibility() {
     this.props.model.updateLayerVisibility(this.props.item.name, !this.props.item.active);
     this.setState({ change: !this.state.change });
-  },
+  }
 
   toggleDropDown() {
     if (this.props.item.arrays.length > 1) {
       this.setState({ dropDown: !this.state.dropDown });
     }
-  },
+  }
 
   updateColorBy(event) {
     this.props.model.updateLayerColorBy(this.props.item.name, event.target.dataset.color);
     this.toggleDropDown();
-  },
+  }
 
   render() {
     var layer = this.props.item,
@@ -81,5 +82,10 @@ export default React.createClass({
           </div>
         </div>
       </div>);
-  },
-});
+  }
+}
+
+FloatImageControlLayerItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  model: PropTypes.object.isRequired,
+};