createFactory and displayName for React elements

CHANGES.md

@@ -5,6 +5,7 @@
 * Update to [React 0.12.1](https://github.com/facebook/react/releases/tag/v0.12.1)
 * Move to [klayjs-noflo](https://github.com/noflo/klayjs-noflo)
 * Fix Windows build (#192)
+* `React.createFactory` and `displayName` for all React elements
 
 ## 0.3.5 (Durham, 2014 November 14)
 

the-graph/the-graph-app.js

@@ -63,7 +63,8 @@
     return TheGraph.ModalBG(options);
   }
 
-  TheGraph.App = React.createClass({
+  TheGraph.App = React.createFactory( React.createClass({
+    displayName: "TheGraphApp",
     mixins: [React.Animate],
     minZoom: 0.15,
     getInitialState: function() {
@@ -561,7 +562,7 @@
       containerOptions.className += " " + scaleClass;
       return TheGraph.factories.app.createAppContainer.call(this, containerOptions, appContents);
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-edge.js

@@ -69,7 +69,8 @@
 
   // Edge view
 
-  TheGraph.Edge = React.createClass({
+  TheGraph.Edge = React.createFactory( React.createClass({
+    displayName: "TheGraphEdge",
     mixins: [
       TheGraph.mixins.Tooltip
     ],
@@ -213,6 +214,6 @@
       return TheGraph.factories.edge.createEdgeGroup(containerOptions, [backgroundPath, foregroundPath, touchPath ]);
 
     }
-  });
+  }));
 
 })(this);

the-graph/the-graph-graph.js

@@ -80,7 +80,8 @@
 
   // Graph view
 
-  TheGraph.Graph = React.createClass({
+  TheGraph.Graph = React.createFactory( React.createClass({
+    displayName: "TheGraphGraph",
     mixins: [TheGraph.mixins.FakeMouse],
     getInitialState: function() {
       return {
@@ -830,6 +831,6 @@
       return TheGraph.factories.graph.createGraphContainerGroup.call(this, containerOptions, containerContents);
 
     }
-  });  
+  }));  
 
 })(this);

the-graph/the-graph-group.js

@@ -30,7 +30,8 @@
 
   // Group view
 
-  TheGraph.Group = React.createClass({
+  TheGraph.Group = React.createFactory( React.createClass({
+    displayName: "TheGraphGroup",
     componentDidMount: function () {
       // Move group
       if (this.props.isSelectionGroup) {
@@ -177,7 +178,7 @@
       return TheGraph.factories.group.createGroupGroup.call(this, containerOptions, groupContents);
 
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-iip.js

@@ -33,7 +33,8 @@
 
   // Edge view
 
-  TheGraph.IIP = React.createClass({
+  TheGraph.IIP = React.createFactory( React.createClass({
+    displayName: "TheGraphIIP",
     shouldComponentUpdate: function (nextProps, nextState) {
       // Only rerender if changed
 
@@ -70,6 +71,6 @@
       var containerOptions = TheGraph.merge(TheGraph.config.iip.container, {title: this.props.label});
       return TheGraph.factories.iip.createIIPContainer.call(this, containerOptions, containerContents);
     }
-  });
+  }));
 
 })(this);

the-graph/the-graph-menu.js

@@ -122,7 +122,8 @@
     return TheGraph.factories.menu.createMenuGroup.call(this, containerOptions);
   }
 
-  TheGraph.Menu = React.createClass({
+  TheGraph.Menu = React.createFactory( React.createClass({
+    displayName: "TheGraphMenu",
     radius: TheGraph.config.menu.radius,
     getInitialState: function() {
       // Use these in CSS for cursor and hover, and to attach listeners
@@ -241,7 +242,7 @@
       return TheGraph.factories.menu.createMenuGroup.call(this, containerOptions);
 
     }
-  });
+  }));
 
   TheGraph.config.modalBG = {
     container: {},
@@ -257,7 +258,8 @@
   };
 
 
-  TheGraph.ModalBG = React.createClass({
+  TheGraph.ModalBG = React.createFactory( React.createClass({
+    displayName: "TheGraphModalBG",
     componentDidMount: function () {
       var domNode = this.getDOMNode();
       var rectNode = this.refs.rect.getDOMNode();
@@ -288,7 +290,7 @@
       var containerOptions = TheGraph.merge(TheGraph.config.modalBG.container, {});
       return TheGraph.factories.modalBG.createModalBackgroundGroup.call(this, containerOptions, containerContents);
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-node-menu-port.js

@@ -24,7 +24,8 @@
   };
 
 
-  TheGraph.NodeMenuPort = React.createClass({
+  TheGraph.NodeMenuPort = React.createFactory( React.createClass({
+    displayName: "TheGraphNodeMenuPort",
     componentDidMount: function () {
       this.getDOMNode().addEventListener("up", this.edgeStart);
     },
@@ -89,7 +90,7 @@
       return TheGraph.factories.nodeMenuPort.createNodeMenuPortGroup.call(this, containerOptions, containerContents);
 
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-node-menu-ports.js

@@ -29,7 +29,8 @@
     return TheGraph.NodeMenuPort(options);
   }
 
-  TheGraph.NodeMenuPorts = React.createClass({
+  TheGraph.NodeMenuPorts = React.createFactory( React.createClass({
+    displayName: "TheGraphNodeMenuPorts",
     render: function() {
       var portViews = [];
       var lines = [];
@@ -91,7 +92,7 @@
       containerOptions = TheGraph.merge(TheGraph.config.nodeMenuPorts.container, containerOptions);
       return TheGraph.factories.menuPorts.createNodeMenuPortsGroup.call(this, containerOptions, containerContents);
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-node-menu.js

@@ -30,7 +30,8 @@
     return TheGraph.Menu(options);
   }
 
-  TheGraph.NodeMenu = React.createClass({
+  TheGraph.NodeMenu = React.createFactory( React.createClass({
+    displayName: "TheGraphNodeMenu",
     radius: 72,
     stopPropagation: function (event) {
       // Don't drag graph
@@ -102,7 +103,7 @@
       return TheGraph.factories.nodeMenu.createNodeMenuGroup.call(this, containerOptions);
 
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-node.js

@@ -93,7 +93,8 @@
   });
 
   // Node view
-  TheGraph.Node = React.createClass({
+  TheGraph.Node = React.createFactory( React.createClass({
+    displayName: "TheGraphNode",
     mixins: [
       TheGraph.mixins.Tooltip
     ],
@@ -147,6 +148,7 @@
       }
     },
     onTrack: function (event) {
+      console.log(event, this.key);
       // Don't fire on graph
       event.stopPropagation();
 
@@ -166,7 +168,7 @@
           this.props.graph.setOutportMetadata(this.props.exportKey, newPos);
         }
       } else {
-        this.props.graph.setNodeMetadata(this.props.key, {
+        this.props.graph.setNodeMetadata(this.key, {
           x: this.props.node.metadata.x + deltaX,
           y: this.props.node.metadata.y + deltaY
         });
@@ -196,7 +198,7 @@
             this.props.graph.setOutportMetadata(this.props.exportKey, newPos);
           }
         } else {
-          this.props.graph.setNodeMetadata(this.props.key, {
+          this.props.graph.setNodeMetadata(this.key, {
             x: Math.round(this.props.node.metadata.x/snap) * snap,
             y: Math.round(this.props.node.metadata.y/snap) * snap
           });
@@ -506,7 +508,7 @@
 
       return TheGraph.factories.node.createNodeGroup.call(this, nodeOptions, nodeContents);
     }
-  });
+  }));
 
   function buildLabelRectOptions(height, x, y, len, className) {
 

the-graph/the-graph-port.js

@@ -33,7 +33,8 @@
 
   // Port view
 
-  TheGraph.Port = React.createClass({
+  TheGraph.Port = React.createFactory( React.createClass({
+    displayName: "TheGraphPort",
     mixins: [
       TheGraph.mixins.Tooltip
     ],
@@ -135,7 +136,7 @@
       var style;
       if (this.props.label.length > 7) {
         var fontSize = 6 * (30 / (4 * this.props.label.length));
-        style = { "font-size": fontSize+"px" };
+        style = { 'fontSize': fontSize+'px' };
       }
       var r = 4;
       // Highlight matching ports
@@ -181,7 +182,7 @@
       return TheGraph.factories.port.createPortGroup.call(this, containerOptions, portContents);
 
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph-tooltip.js

@@ -27,7 +27,8 @@
 
   // Port view
 
-  TheGraph.Tooltip = React.createClass({
+  TheGraph.Tooltip = React.createFactory( React.createClass({
+    displayName: "TheGraphTooltip",
     render: function() {
 
       var rectOptions = TheGraph.merge(TheGraph.config.tooltip.rect, {width: this.props.label.length * 6});
@@ -46,7 +47,7 @@
       return TheGraph.factories.tooltip.createTooltipGroup.call(this, containerOptions, containerContents);
 
     }
-  });
+  }));
 
 
 })(this);

the-graph/the-graph.html

@@ -91,9 +91,8 @@
 
         // Setup app
         this.$.svgcontainer.innerHTML = "";
-        var App = React.createFactory(window.TheGraph.App);
         this.appView = React.render(
-          App({
+          window.TheGraph.App({
             graph: this.graph,
             width: this.width,
             height: this.height,

the-graph/the-graph.js

@@ -279,7 +279,8 @@
 
 
   // Reusable React classes
-  TheGraph.SVGImage = React.createClass({
+  TheGraph.SVGImage = React.createFactory( React.createClass({
+    displayName: "TheGraphSVGImage",
     render: function() {
         var html = '<image ';
         html = html +'xlink:href="'+ this.props.src + '"';
@@ -293,9 +294,10 @@
             dangerouslySetInnerHTML:{__html: html}
         });
     }
-  });
+  }));
 
-  TheGraph.TextBG = React.createClass({
+  TheGraph.TextBG = React.createFactory( React.createClass({
+    displayName: "TheGraphTextBG",
     render: function() {
       var text = this.props.text;
       if (!text) {
@@ -340,7 +342,7 @@
         })
       );
     }
-  });
+  }));
 
   // The `merge` function provides simple property merging.
   TheGraph.merge = function(src, dest, overwrite) {