feature/custom-classnames – added ability to add custom classes (#323)

Author: deshaser

docs/components/Link.md

@@ -31,6 +31,11 @@ type: `func`
 type: `enum('horizontal'|'vertical')`
 
 
+### `pathClass`
+
+type: `func`
+
+
 ### `pathFunc` (required)
 
 type: `union(enum|func)`

docs/components/Tree.md

@@ -18,6 +18,12 @@ type: `number`
 defaultValue: `undefined`
 
 
+### `className`
+
+type: `string`
+defaultValue: `undefined`
+
+
 ### `collapsible`
 
 type: `bool`
@@ -112,6 +118,11 @@ type: `enum('horizontal'|'vertical')`
 defaultValue: `'horizontal'`
 
 
+### `pathClass`
+
+type: `func`
+
+
 ### `pathFunc`
 
 type: `union(enum|func)`

lib/react-d3-tree.min.js

@@ -17,6 +17,7 @@ declare module "react-d3-tree" {
   type ReactD3TreeTranslate = {x: number, y: number}
 
   type ReactD3TreeProps = {
+    className?: string,
     data: ReactD3TreeItem[] | ReactD3TreeItem,
     nodeSvgShape?: NodeSvgShape,
     nodeLabelComponent?: object,
@@ -30,6 +31,7 @@ declare module "react-d3-tree" {
     orientation?: "horizontal" | "vertical",
     translate?: Partial<ReactD3TreeTranslate>,
     pathFunc?: ("diagonal" | "elbow" | "straight" | "step") | ((...args: any[]) => any),
+    pathClass?: ((...args: any[]) => any),
     transitionDuration?: number,
     depthFactor?: number,
     collapsible?: boolean,
@@ -60,7 +62,7 @@ declare module "react-d3-tree" {
   };
 
   var Tree: React.ComponentClass<ReactD3TreeProps>;
-  
+
   export {Tree, ReactD3TreeProps, ReactD3TreeItem, ReactD3TreeTranslate, NodeSvgShape};
   export default Tree;
-}
+}

react-d3-tree.d.ts

@@ -98,6 +98,17 @@ export default class Link extends React.PureComponent {
     return this.drawDiagonalPath(linkData, orientation);
   }
 
+  getClassNames() {
+    const { linkData, pathClass } = this.props;
+    const classNames = ['linkBase'];
+
+    if (typeof pathClass === 'function') {
+      classNames.push(pathClass(linkData));
+    }
+
+    return classNames.join(' ');
+  }
+
   handleOnClick = evt => {
     this.props.onClick(this.props.linkData.source, this.props.linkData.target, evt);
   };
@@ -118,7 +129,7 @@ export default class Link extends React.PureComponent {
           this.link = l;
         }}
         style={{ ...this.state.initialStyle, ...styles }}
-        className="linkBase"
+        className={this.getClassNames()}
         d={this.drawPath()}
         onClick={this.handleOnClick}
         onMouseOver={this.handleOnMouseOver}
@@ -132,11 +143,13 @@ export default class Link extends React.PureComponent {
 
 Link.defaultProps = {
   styles: {},
+  pathClass: undefined,
 };
 
 Link.propTypes = {
   linkData: T.object.isRequired,
   orientation: T.oneOf(['horizontal', 'vertical']).isRequired,
+  pathClass: T.func,
   pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight', 'step']), T.func]).isRequired,
   transitionDuration: T.number.isRequired,
   onClick: T.func.isRequired,

src/Link/index.js

@@ -485,10 +485,12 @@ class Tree extends React.Component {
     const { nodes, links } = this.generateTree();
     const { rd3tSvgClassName, rd3tGClassName } = this.state;
     const {
+      className,
       nodeSvgShape,
       nodeLabelComponent,
       orientation,
       pathFunc,
+      pathClass,
       transitionDuration,
       zoomable,
       textLayout,
@@ -504,7 +506,7 @@ class Tree extends React.Component {
     const subscriptions = { ...nodeSize, ...separation, depthFactor, initialDepth };
     return (
       <div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
-        <svg className={rd3tSvgClassName} width="100%" height="100%">
+        <svg className={[rd3tSvgClassName, className].join(' ')} width="100%" height="100%">
           <NodeWrapper
             transitionDuration={transitionDuration}
             component="g"
@@ -516,6 +518,7 @@ class Tree extends React.Component {
                 key={uuid.v4()}
                 orientation={orientation}
                 pathFunc={pathFunc}
+                pathClass={pathClass}
                 linkData={linkData}
                 onClick={this.handleOnLinkClickCb}
                 onMouseOver={this.handleOnLinkMouseOverCb}
@@ -554,6 +557,7 @@ class Tree extends React.Component {
 }
 
 Tree.defaultProps = {
+  className: undefined,
   nodeSvgShape: {
     shape: 'circle',
     shapeProps: {
@@ -570,6 +574,7 @@ Tree.defaultProps = {
   onUpdate: undefined,
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
+  pathClass: undefined,
   pathFunc: 'diagonal',
   transitionDuration: 500,
   depthFactor: undefined,
@@ -594,6 +599,7 @@ Tree.defaultProps = {
 };
 
 Tree.propTypes = {
+  className: T.string,
   data: T.oneOfType([T.array, T.object]).isRequired,
   nodeSvgShape: T.shape({
     shape: T.string,
@@ -612,6 +618,7 @@ Tree.propTypes = {
     x: T.number,
     y: T.number,
   }),
+  pathClass: T.func,
   pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight', 'step']), T.func]),
   transitionDuration: T.number,
   depthFactor: T.number,