feat(nodetypes): custome types

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#ff6060', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
   </div>
-));
+);

src/NodeRenderer/NodeTypes/InputNode.js

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#9999ff', padding: '10px', ...style }}>
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
   </div>
-));
+);

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#55ff99', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
   </div>
-));
+);

src/NodeRenderer/index.js

@@ -1,30 +1,11 @@
 import React, { PureComponent } from 'react';
 
 import { Consumer } from '../GraphContext';
-import DefaultNode from './NodeTypes/DefaultNode';
-import InputNode from './NodeTypes/InputNode';
-import OutputNode from './NodeTypes/OutputNode';
-
 class NodeRenderer extends PureComponent {
 
   renderNode(d, onNodeClick) {
     const nodeType = d.data.type || 'default';
-    let NodeComponent = null;
-
-    switch (nodeType) {
-      case 'input': {
-        NodeComponent = this.props.nodeTypes.input || InputNode; break;
-      }
-      case 'default': {
-        NodeComponent = this.props.nodeTypes.default || DefaultNode; break;
-      }
-      case 'output': {
-        NodeComponent = this.props.nodeTypes.output || OutputNode; break;
-      }
-      default: {
-        NodeComponent = this.props.nodeTypes[nodeType] || DefaultNode;
-      }
-    }
+    const NodeComponent = this.props.nodeTypes[nodeType];
 
     return (
       <NodeComponent
@@ -55,12 +36,4 @@ class NodeRenderer extends PureComponent {
   }
 }
 
-NodeRenderer.defaultProps = {
-  nodeTypes: {
-    input: InputNode,
-    default: DefaultNode,
-    output: OutputNode
-  }
-};
-
 export default NodeRenderer;

src/NodeRenderer/utils.js

@@ -0,0 +1,26 @@
+import DefaultNode from './NodeTypes/DefaultNode';
+import InputNode from './NodeTypes/InputNode';
+import OutputNode from './NodeTypes/OutputNode';
+import wrapNode from './NodeTypes/wrapNode';
+
+export function createNodeTypes(nodeTypes) {
+  const standardTypes = {
+    input: wrapNode(nodeTypes.input || InputNode),
+    default: wrapNode(nodeTypes.default || DefaultNode),
+    output: wrapNode(nodeTypes.output || OutputNode)
+  };
+
+  const specialTypes = Object
+    .keys(nodeTypes)
+    .filter(k => !['input', 'default', 'output'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode(nodeTypes[key]);
+
+      return res;
+    }, {});
+
+  return {
+    ...standardTypes,
+    ...specialTypes
+  };
+}