Merge branch 'feature/svg-shape-none'

Author: bkrem

.eslintrc.js

@@ -41,13 +41,13 @@ module.exports = {
     "import/no-named-as-default": 0,
     "import/no-unresolved": 2,
     "import/prefer-default-export": 0,
-    "indent": [
-      2,
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
+    // "indent": [
+    //   2,
+    //   2,
+    //   {
+    //     "SwitchCase": 1
+    //   }
+    // ],
     "jsx-a11y/aria-props": 2,
     "jsx-a11y/heading-has-content": 0,
     "jsx-a11y/href-no-hash": 0,

README.md

@@ -129,6 +129,8 @@ const svgSquare = {
 <Tree data={myTreeData} nodeSvgShape={svgSquare}>
 ```
 
+To avoid rendering any node element, simply set `nodeSvgShape` to `{ shape: 'none' }`.
+
 ### Overridable `shapeProps`
  `shapeProps` is currently merged with `node.circle`/`leafNode.circle` (see [Styling](#styling)).  
 

src/Node/index.js

@@ -74,6 +74,21 @@ export default class Node extends React.Component {
     }
   }
 
+  renderNodeElement(nodeStyle) {
+    const { circleRadius, nodeSvgShape } = this.props;
+    /* TODO: DEPRECATE <circle /> */
+    if (circleRadius) {
+      return <circle r={circleRadius} style={nodeStyle.circle} />;
+    }
+
+    return nodeSvgShape.shape === 'none'
+      ? null
+      : React.createElement(nodeSvgShape.shape, {
+          ...nodeSvgShape.shapeProps,
+          ...nodeStyle.circle,
+        });
+  }
+
   handleClick() {
     this.props.onClick(this.props.nodeData.id);
   }
@@ -96,14 +111,7 @@ export default class Node extends React.Component {
   }
 
   render() {
-    const {
-      nodeData,
-      nodeSvgShape,
-      nodeSize,
-      nodeLabelComponent,
-      allowForeignObjects,
-      styles,
-    } = this.props;
+    const { nodeData, nodeSize, nodeLabelComponent, allowForeignObjects, styles } = this.props;
     const nodeStyle = nodeData._children ? { ...styles.node } : { ...styles.leafNode };
     return (
       <g
@@ -118,15 +126,7 @@ export default class Node extends React.Component {
         onMouseOver={this.handleOnMouseOver}
         onMouseOut={this.handleOnMouseOut}
       >
-        {/* TODO: DEPRECATE <circle /> */}
-        {this.props.circleRadius ? (
-          <circle r={this.props.circleRadius} style={nodeStyle.circle} />
-        ) : (
-          React.createElement(nodeSvgShape.shape, {
-            ...nodeSvgShape.shapeProps,
-            ...nodeStyle.circle,
-          })
-        )}
+        {this.renderNodeElement(nodeStyle)}
 
         {allowForeignObjects && nodeLabelComponent ? (
           <ForeignObjectElement nodeData={nodeData} nodeSize={nodeSize} {...nodeLabelComponent} />

src/Node/tests/index.test.js

@@ -209,6 +209,30 @@ describe('<Node />', () => {
     expect(nodeComponent.find('.nodeNameBase').prop('style')).toBe(fixture.node.name);
   });
 
+  describe('Node Element', () => {
+    // TODO: DEPRECATE in v2
+    it('renders legacy `<circle />` if `props.circleRadius` is defined', () => {
+      const props = { ...mockProps, circleRadius: 99 };
+      const renderedComponent = shallow(<Node {...props} />);
+
+      expect(renderedComponent.find('circle').length).toBe(1);
+      expect(renderedComponent.find('circle').prop('r')).toBe(99);
+    });
+
+    it('renders the appropriate SVG element if `props.nodeSvgShape` is defined', () => {
+      const props = { ...mockProps, nodeSvgShape: { shape: 'rect', shapeProps: { y: 123 } } };
+      const renderedComponent = shallow(<Node {...props} />);
+      expect(renderedComponent.find('rect').length).toBe(1);
+      expect(renderedComponent.find('rect').prop('y')).toBe(123);
+    });
+
+    it('renders nothing if `nodeSvgShape.shape` is set to `none`', () => {
+      const props = { ...mockProps, nodeSvgShape: { shape: 'none' } };
+      const renderedComponent = shallow(<Node {...props} />);
+      expect(renderedComponent.instance().renderNodeElement({})).toBe(null);
+    });
+  });
+
   describe('Node Label', () => {
     it('renders a SvgTextElement by default', () => {
       const renderedComponent = shallow(<Node {...mockProps} />);
@@ -223,15 +247,6 @@ describe('<Node />', () => {
     });
   });
 
-  // TODO: DEPRECATE in v2
-  it('falls back to legacy `<circle />` prop only if `circleRadius` is defined', () => {
-    const props = { ...mockProps, circleRadius: 99 };
-    const renderedComponent = shallow(<Node {...props} />);
-
-    expect(renderedComponent.find('circle').length).toBe(1);
-    expect(renderedComponent.find('circle').prop('r')).toBe(99);
-  });
-
   // TODO: Find a way to meaningfully test `componentWillLeave`
 
   // it('regresses to its parent coords when unmounting/leaving', () => {