React 16

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-digraph",
   "description": "directed graph react component",
-  "version": "1.0.13",
+  "version": "2.0.0",
   "keywords": [
     "uber-library",
     "babel",
@@ -25,36 +25,38 @@
   "licenses": "MIT",
   "main": "dist/index.js",
   "peerDependencies": {
-    "react": "^15.3.1",
-    "react-dom": "^15.3.1",
     "d3": "^4.1.1",
     "radium": "^0.18.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-icons": "^2.2.1"
   },
   "devDependencies": {
-    "react": "^15.3.1",
-    "react-dom": "^15.3.1",
-    "d3": "^4.1.1",
-    "radium": "^0.18.1",
-    "react-icons": "^2.2.1",
     "babel-cli": "^6.6.5",
-    "babel-istanbul": "^0.8.0",
+    "babel-core": "^6.26.0",
+    "babel-istanbul": "^0.12.2",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-preset-es2015": "^6.3.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.3.0",
-    "browserify": "^13.1.0",
+    "browserify": "^14.4.0",
     "build-changelog": "^2.1.2",
-    "enzyme": "^2.5.1",
-    "eslint": "^2.0.0",
+    "d3": "^4.1.1",
+    "enzyme": "^3.1.0",
+    "eslint": "^4.9.0",
     "eslint-plugin-es6-recommended": "^0.1.2",
     "eslint-plugin-import-order": "^2.1.4",
-    "eslint-plugin-react": "^6.3.0",
-    "jsdom": "^9.8.0",
+    "eslint-plugin-react": "^7.4.0",
+    "jsdom": "^11.3.0",
     "nws": "^1.1.1",
-    "opn-cli": "1.x",
-    "react-addons-test-utils": "^15.3.2",
-    "sinon": "^1.17.6",
+    "opn-cli": "3.1.0",
+    "prop-types": "^15.6.0",
+    "radium": "^0.19.5",
+    "react": "^16.0.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.0.0",
+    "react-icons": "^2.2.1",
+    "sinon": "^4.0.1",
     "tape": "^4.0.0"
   },
   "scripts": {

src/components/graph-controls.js

@@ -24,6 +24,7 @@
 
 import React, {Component} from 'react';
 import Radium from 'radium';
+import PropTypes from 'prop-types';
 
 // Only old-style imports for react-icons seem to work with gulp
 const FaExpand = require('react-icons/lib/fa/expand');
@@ -133,12 +134,12 @@ class GraphControls extends Component {
 }
 
 GraphControls.propTypes = {
-  primary: React.PropTypes.string,
-  minZoom: React.PropTypes.number,
-  maxZoom: React.PropTypes.number,
-  zoomLevel: React.PropTypes.number.isRequired,
-  zoomToFit: React.PropTypes.func.isRequired,
-  modifyZoom: React.PropTypes.func.isRequired
+  primary: PropTypes.string,
+  minZoom: PropTypes.number,
+  maxZoom: PropTypes.number,
+  zoomLevel: PropTypes.number.isRequired,
+  zoomToFit: PropTypes.func.isRequired,
+  modifyZoom: PropTypes.func.isRequired
 }
 
 GraphControls.defaultProps = {

src/components/graph-view.js

@@ -26,12 +26,13 @@
 import React, {
   Component
 } from 'react';
+import PropTypes from 'prop-types';
 import * as d3 from 'd3';
-
 import Radium from 'radium';
 import GraphControls from './graph-controls.js'
 
 
+
 // The work area is infinite, but the point grid is fixed
 const gridSize = 40960;
 const gridSpacing = 36;
@@ -234,7 +235,7 @@ class GraphView extends Component {
       .on('keydown', this.handleWindowKeydown)
       .on('click', this.handleWindowClicked);
 
-    var svg = d3.select(this.refs.viewWrapper)
+    var svg = d3.select(this.viewWrapper)
       .on("touchstart", this.containZoom)
       .on("touchmove", this.containZoom)
       .on("click", this.handleSvgClicked)
@@ -313,7 +314,7 @@ class GraphView extends Component {
   drawEdge(sourceNode, target, swapErrBack){
     const self = this;
 
-    const dragEdge = d3.select(this.refs.entities).append('svg:path')
+    const dragEdge = d3.select(this.entities).append('svg:path')
 
     dragEdge.attr('class', 'link dragline')
       .attr("style", this.state.styles.edge.selectedString)
@@ -570,8 +571,8 @@ class GraphView extends Component {
 
   // Zooms to contents of this.refs.entities
   handleZoomToFit() {
-    const parent = d3.select(this.refs.viewWrapper).node();
-    const entities = d3.select(this.refs.entities).node();
+    const parent = d3.select(this.viewWrapper).node();
+    const entities = d3.select(this.entities).node();
 
     const viewBBox = entities.getBBox();
 
@@ -614,7 +615,7 @@ class GraphView extends Component {
 
   // Updates current viewTransform with some delta
   modifyZoom(modK=0, modX=0, modY=0, dur=0){
-    const parent = d3.select(this.refs.viewWrapper).node();
+    const parent = d3.select(this.viewWrapper).node();
     const width = parent.clientWidth;
     const height = parent.clientHeight;
 
@@ -645,7 +646,7 @@ class GraphView extends Component {
 
     var t = d3.zoomIdentity.translate(x, y).scale(k);
 
-    d3.select(this.refs.viewWrapper).select('svg')
+    d3.select(this.viewWrapper).select('svg')
       .transition()
       .duration(dur)
       .call(this.zoom.transform, t);
@@ -871,10 +872,10 @@ class GraphView extends Component {
     var edges = this.props.edges;
 
     // Update the view w/ new zoom/pan
-    const view = d3.select(this.refs.view)
+    const view = d3.select(this.view)
       .attr("transform", this.state.viewTransform);
 
-    const entities = d3.select(this.refs.entities);
+    const entities = d3.select(this.entities);
 
     this.renderNodes(entities, nodes);
     this.renderEdges(entities, edges);
@@ -886,7 +887,7 @@ class GraphView extends Component {
 
     return (
       <div  id='viewWrapper'
-            ref='viewWrapper'
+            ref={(el) => this.viewWrapper = el}
             style={[
               styles.wrapper.base,
               !!this.state.focused && styles.wrapper.focused,
@@ -937,18 +938,16 @@ class GraphView extends Component {
             </filter>
 
           </defs>
-          <g id='view' ref='view'>
+          <g id='view' ref={(el) => this.view = el}>
             <rect className='background'
                   x={-gridSize/4}
                   y={-gridSize/4}
                   width={ gridSize }
                   height={ gridSize }
                   fill="url(#grid)">
             </rect>
-            <g id='entities' ref='entities'></g>
+            <g id='entities' ref={(el) => this.entities = el}></g>
           </g>
-
-          }
         </svg>
         <GraphControls  primary={this.props.primary}
                         minZoom={minZoom} 
@@ -964,34 +963,34 @@ class GraphView extends Component {
 }
 
 GraphView.propTypes = {
-  primary: React.PropTypes.string,
-  light: React.PropTypes.string,
-  dark: React.PropTypes.string,
-  style: React.PropTypes.object,
-  nodeKey: React.PropTypes.string.isRequired,
-  emptyType: React.PropTypes.string.isRequired,
-  nodes: React.PropTypes.array.isRequired,
-  edges: React.PropTypes.array.isRequired,
-  readOnly: React.PropTypes.bool,
-  enableFocus: React.PropTypes.bool,
-  selected: React.PropTypes.object.isRequired,
-  nodeTypes: React.PropTypes.object.isRequired,
-  nodeSubtypes: React.PropTypes.object.isRequired,
-  edgeTypes: React.PropTypes.object.isRequired,
-  getViewNode: React.PropTypes.func.isRequired,
-  onSelectNode: React.PropTypes.func.isRequired,
-  onCreateNode: React.PropTypes.func.isRequired,
-  onUpdateNode: React.PropTypes.func.isRequired,
-  canDeleteNode: React.PropTypes.func,
-  onDeleteNode: React.PropTypes.func.isRequired,
-  onSelectEdge: React.PropTypes.func.isRequired,
-  canCreateEdge: React.PropTypes.func,
-  onCreateEdge: React.PropTypes.func.isRequired,
-  onSwapEdge: React.PropTypes.func.isRequired,
-  canDeleteEdge: React.PropTypes.func,
-  onDeleteEdge: React.PropTypes.func.isRequired,
-  maxTitleChars: React.PropTypes.number, // Per line.
-  transitionTime: React.PropTypes.number // D3 Enter/Exit duration
+  primary: PropTypes.string,
+  light: PropTypes.string,
+  dark: PropTypes.string,
+  style: PropTypes.object,
+  nodeKey: PropTypes.string.isRequired,
+  emptyType: PropTypes.string.isRequired,
+  nodes: PropTypes.array.isRequired,
+  edges: PropTypes.array.isRequired,
+  readOnly: PropTypes.bool,
+  enableFocus: PropTypes.bool,
+  selected: PropTypes.object.isRequired,
+  nodeTypes: PropTypes.object.isRequired,
+  nodeSubtypes: PropTypes.object.isRequired,
+  edgeTypes: PropTypes.object.isRequired,
+  getViewNode: PropTypes.func.isRequired,
+  onSelectNode: PropTypes.func.isRequired,
+  onCreateNode: PropTypes.func.isRequired,
+  onUpdateNode: PropTypes.func.isRequired,
+  canDeleteNode: PropTypes.func,
+  onDeleteNode: PropTypes.func.isRequired,
+  onSelectEdge: PropTypes.func.isRequired,
+  canCreateEdge: PropTypes.func,
+  onCreateEdge: PropTypes.func.isRequired,
+  onSwapEdge: PropTypes.func.isRequired,
+  canDeleteEdge: PropTypes.func,
+  onDeleteEdge: PropTypes.func.isRequired,
+  maxTitleChars: PropTypes.number, // Per line.
+  transitionTime: PropTypes.number // D3 Enter/Exit duration
 };
 
 GraphView.defaultProps = {

src/examples/graph.js

@@ -262,7 +262,7 @@ class Graph extends Component {
     return (
       <div id='graph' style={styles.graph}>
 
-        <GraphView  ref='GraphView'
+        <GraphView  ref={(el) => this.GraphView = el}
                     nodeKey={NODE_KEY}
                     emptyType={EMPTY_TYPE}
                     nodes={nodes}