Refactors style props to simplify API (#11)

Author: bkrem

src/Node/index.js

@@ -65,66 +65,62 @@ export default class Node extends React.Component {
   }
 
   render() {
-    const { nodeData } = this.props;
+    const { nodeData, styles } = this.props;
+    const nodeStyle = nodeData._children ?
+      { ...this.state.initialStyle, ...styles.node } :
+      { ...this.state.initialStyle, ...styles.leafNode };
 
     return (
       <g
         id={nodeData.id}
         ref={(n) => { this.node = n; }}
-        style={this.state.initialStyle}
+        style={nodeStyle}
         className={nodeData._children ? 'nodeBase' : 'leafNodeBase'}
         transform={this.state.transform}
         onClick={this.handleClick}
       >
         <text
-          className="primaryLabelBase"
+          className="nodeNameBase"
           textAnchor={this.props.textAnchor}
-          style={this.props.primaryLabelStyle}
+          style={styles.name}
           x="10"
           y="-10"
           dy=".35em"
         >
-          {this.props.primaryLabel}
+          {this.props.name}
         </text>
 
         <circle
           r={this.props.circleRadius}
-          style={nodeData._children ? this.props.circleStyle : this.props.leafCircleStyle}
+          style={nodeData._children ? styles.circle : styles.leafCircle}
         />
 
         <text
-          className="secondaryLabelsBase"
+          className="nodeAttributesBase"
           y="0"
           textAnchor={this.props.textAnchor}
-          style={this.props.secondaryLabelsStyle}
+          style={styles.attributes}
         >
-          {this.props.secondaryLabels && Object.keys(this.props.secondaryLabels).map((labelKey) =>
-            <tspan x="10" dy="1.2em" key={uuid.v4()}>
-              {labelKey}: {this.props.secondaryLabels[labelKey]}
-            </tspan>
-          )}
+          {
+            this.props.attributes &&
+            Object.keys(this.props.attributes).map((labelKey) =>
+              <tspan x="10" dy="1.2em" key={uuid.v4()}>
+                {labelKey}: {this.props.attributes[labelKey]}
+              </tspan>
+            )
+          }
         </text>
       </g>
     );
   }
 }
 
 Node.defaultProps = {
-  depthFactor: undefined,
   circleRadius: 10,
-  circleStyle: {
-    stroke: '#000',
-    strokeWidth: 2,
-    fill: 'grey',
-  },
-  leafCircleStyle: {
-    stroke: '#000',
-    strokeWidth: 2,
-    fill: 'transparent',
-  },
+  textAnchor: 'start',
+  attributes: undefined,
 };
 
-/* eslint-disable */
 Node.propTypes = {
   nodeData: PropTypes.object.isRequired,
   orientation: PropTypes.oneOf([
@@ -133,14 +129,9 @@ Node.propTypes = {
   ]).isRequired,
   transitionDuration: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
-  depthFactor: PropTypes.number,
-  primaryLabel: PropTypes.string,
-  primaryLabelStyle: PropTypes.object,
-  secondaryLabels: PropTypes.object,
-  secondaryLabelsStyle: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  attributes: PropTypes.object,
   textAnchor: PropTypes.string,
   circleRadius: PropTypes.number,
-  circleStyle: PropTypes.object,
-  leafCircleStyle: PropTypes.object,
+  styles: PropTypes.object.isRequired,
 };
-/* eslint-enable */

src/Node/style.css

@@ -1,16 +1,24 @@
 .nodeBase {
   cursor: pointer;
+  fill: #777;
+  stroke: #000;
+  stroke-width: 2;
 }
 
 .leafNodeBase {
   cursor: pointer;
+  fill: transparent;
+  stroke: #000;
+  stroke-width: 2;
 }
 
-.primaryLabelBase {
-  fill: #000;
+.nodeNameBase {
+  stroke: #000;
+  stroke-width: 1;
 }
 
-.secondaryLabelsBase {
-  fill: #777;
+.nodeAttributesBase {
+  stroke: #777;
+  stroke-width: 1;
   font-size: smaller;
-}
+}

src/Node/tests/index.test.js

@@ -18,9 +18,11 @@ describe('<Node />', () => {
 
   const mockProps = {
     nodeData,
+    name: nodeData.name,
     orientation: 'horizontal',
     transitionDuration: 500,
     onClick: () => {},
+    styles: {},
   };
 
 
@@ -56,26 +58,25 @@ describe('<Node />', () => {
 
 
   it('applies correct <circle> style prop if `nodeData._children` is defined', () => {
-    const leafCircleStyle = { fill: 'blue' };
-    const circleStyle = { fill: 'green' };
+    const leafCircle = { fill: 'blue' };
+    const circle = { fill: 'green' };
+    const styles = { circle, leafCircle };
     const noChildrenComponent = shallow(
       <Node
         {...mockProps}
-        leafCircleStyle={leafCircleStyle}
-        circleStyle={circleStyle}
+        styles={styles}
       />
     );
     const withChildrenComponent = shallow(
       <Node
         {...mockProps}
         nodeData={{ ...nodeData, _children: [] }}
-        leafCircleStyle={leafCircleStyle}
-        circleStyle={circleStyle}
+        styles={styles}
       />
     );
 
-    expect(noChildrenComponent.find('circle').prop('style')).toBe(leafCircleStyle);
-    expect(withChildrenComponent.find('circle').prop('style')).toBe(circleStyle);
+    expect(noChildrenComponent.find('circle').prop('style')).toBe(leafCircle);
+    expect(withChildrenComponent.find('circle').prop('style')).toBe(circle);
   });
 
 
@@ -122,17 +123,17 @@ describe('<Node />', () => {
   });
 
 
-  it('maps each `props.secondaryLabels` to a <tspan> element', () => {
+  it('maps each `props.attributes` to a <tspan> element', () => {
     const fixture = { keyA: 'valA', keyB: 'valB' };
     const renderedComponent = shallow(
       <Node
         {...mockProps}
-        secondaryLabels={fixture}
+        attributes={fixture}
       />
     );
     const textNode = renderedComponent
       .find('text')
-      .findWhere((n) => n.prop('className') === 'secondaryLabelsBase');
+      .findWhere((n) => n.prop('className') === 'nodeAttributesBase');
 
     expect(textNode.findWhere((n) =>
       n.text() === `keyA: ${fixture.keyA}`).length

src/Tree/index.js

@@ -230,9 +230,9 @@ export default class Tree extends React.Component {
       orientation,
       translate,
       pathFunc,
-      depthFactor,
       transitionDuration,
       zoomable,
+      styles,
     } = this.props;
 
     return (
@@ -247,13 +247,13 @@ export default class Tree extends React.Component {
               <Node
                 key={nodeData.id}
                 orientation={orientation}
-                depthFactor={depthFactor}
                 transitionDuration={transitionDuration}
                 textAnchor="start"
                 nodeData={nodeData}
-                primaryLabel={nodeData.name}
-                secondaryLabels={nodeData.attributes}
+                name={nodeData.name}
+                attributes={nodeData.attributes}
                 onClick={this.handleNodeToggle}
+                styles={styles.nodes}
               />
             )}
 
@@ -264,6 +264,7 @@ export default class Tree extends React.Component {
                 pathFunc={pathFunc}
                 linkData={linkData}
                 transitionDuration={transitionDuration}
+                styles={styles.links}
               />
             )}
           </TransitionGroup>
@@ -283,6 +284,10 @@ Tree.defaultProps = {
   initialDepth: undefined,
   zoomable: true,
   scaleExtent: { min: 0.1, max: 1 },
+  styles: {
+    nodes: {},
+    links: {},
+  },
 };
 
 Tree.propTypes = {
@@ -308,4 +313,8 @@ Tree.propTypes = {
     min: PropTypes.number,
     max: PropTypes.number,
   }),
+  styles: PropTypes.shape({
+    nodes: PropTypes.object,
+    links: PropTypes.object,
+  }),
 };