Skip to content

Commit eb6a094

Browse files
bkrembkrem
committed
refactor: renames new className-focused props to align with v2, adds docs (#323)
- rename `className` -> `svgClassName` - rename `pathClass` -> `pathClassFunc`
1 parent dd0e208 commit eb6a094

File tree

3 files changed

+15
-13
lines changed

3 files changed

+15
-13
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ class MyComponent extends React.Component {
9292
| Property | Type | Options | Required? | Default | Description |
9393
|:------------------------------|:-----------------------|:---------------------------------------------------------------------------------------|:----------|:--------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
9494
| `data` | `array`<br/>`object` | | required | `undefined` | Single-element array containing the root node object (see `myTreeData` above). <br/> Passing the root node object without an array wrapping it is also possible. <br /><br /> `react-d3-tree` will automatically attach a unique `id` attribute to each node in the DOM, as well as `data-source-id` & `data-target-id` attributes to each link connecting two nodes. |
95+
| `svgClassName` | `string` | | | `undefined` | Allows for additional className(s) to be passed to the `svg` element wrapping the tree. |
9596
| `nodeSvgShape` | `object` | see [Node shapes](#node-shapes) | | `{shape: 'circle', shapeProps: {r: 10}}` | Sets a specific SVG shape element + shapeProps to be used for each node. |
9697
| `nodeLabelComponent` | `object` | see [Using foreignObjects](#using-foreignobjects) | | `null` | Allows using a React component as a node label; requires `allowForeignObjects` to be set. |
9798
| `onClick` | `func` | | | `undefined` | Callback function to be called when a node is clicked. <br /><br />Has the function signature `(nodeData, evt)`. The clicked node's data object is passed as first parameter, event object as second. |
@@ -103,6 +104,7 @@ class MyComponent extends React.Component {
103104
| `onUpdate` | `func` | | | `undefined` | Callback function to be called when the inner D3 component updates. That is - on every zoom or translate event, or when tree branches are toggled. <br /><br />Has the function signature `(updateTarget: {targetNode, currentTranslate, currentZoom})`. |
104105
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
105106
| `translate` | `object` | | | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner). |
107+
| `pathClassFunc` | `func` | `customFunc(linkData, orientation)` | | `undefined` | Allows for additional className(s) to be passed to links. |
106108
| `pathFunc` | `string (enum)`/`func` | `diagonal`<br/>`elbow`<br/>`straight`<br/>`customFunc(linkData, orientation)` | | `diagonal` | `diagonal` - Smooth, curved edges between parent-child nodes. <br /><br /> `elbow` - Sharp edges at right angles between parent-child nodes. <br /><br /> `straight` - Straight lines between parent-child nodes. <br /><br /> `customFunc` - Custom draw function that accepts `linkData` as its first param and `orientation` as its second. |
107109
| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
108110
| `useCollapseData` | `bool` | see [Pre-defining a node's `_collapsed` state](#pre-defining-a-nodes-_collapsed-state) | | `false` | Toggles whether the tree should automatically use any `_collapsed: bool` properties it finds on nodes in the passed data set to configure its initial layout. |

‎src/Link/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,11 @@ export default class Link extends React.PureComponent {
9999
}
100100

101101
getClassNames() {
102-
const { linkData, pathClass } = this.props;
102+
const { linkData, orientation, pathClassFunc } = this.props;
103103
const classNames = ['linkBase'];
104104

105-
if (typeof pathClass === 'function') {
106-
classNames.push(pathClass(linkData));
105+
if (typeof pathClassFunc === 'function') {
106+
classNames.push(pathClassFunc(linkData, orientation));
107107
}
108108

109109
return classNames.join(' ');
@@ -143,13 +143,13 @@ export default class Link extends React.PureComponent {
143143

144144
Link.defaultProps = {
145145
styles: {},
146-
pathClass: undefined,
146+
pathClassFunc: undefined,
147147
};
148148

149149
Link.propTypes = {
150150
linkData: T.object.isRequired,
151151
orientation: T.oneOf(['horizontal', 'vertical']).isRequired,
152-
pathClass: T.func,
152+
pathClassFunc: T.func,
153153
pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight', 'step']), T.func]).isRequired,
154154
transitionDuration: T.number.isRequired,
155155
onClick: T.func.isRequired,

‎src/Tree/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -485,12 +485,12 @@ class Tree extends React.Component {
485485
const { nodes, links } = this.generateTree();
486486
const { rd3tSvgClassName, rd3tGClassName } = this.state;
487487
const {
488-
className,
488+
svgClassName,
489489
nodeSvgShape,
490490
nodeLabelComponent,
491491
orientation,
492492
pathFunc,
493-
pathClass,
493+
pathClassFunc,
494494
transitionDuration,
495495
zoomable,
496496
textLayout,
@@ -506,7 +506,7 @@ class Tree extends React.Component {
506506
const subscriptions = { ...nodeSize, ...separation, depthFactor, initialDepth };
507507
return (
508508
<div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
509-
<svg className={[rd3tSvgClassName, className].join(' ')} width="100%" height="100%">
509+
<svg className={[rd3tSvgClassName, svgClassName].join(' ')} width="100%" height="100%">
510510
<NodeWrapper
511511
transitionDuration={transitionDuration}
512512
component="g"
@@ -518,7 +518,7 @@ class Tree extends React.Component {
518518
key={uuid.v4()}
519519
orientation={orientation}
520520
pathFunc={pathFunc}
521-
pathClass={pathClass}
521+
pathClassFunc={pathClassFunc}
522522
linkData={linkData}
523523
onClick={this.handleOnLinkClickCb}
524524
onMouseOver={this.handleOnLinkMouseOverCb}
@@ -557,7 +557,7 @@ class Tree extends React.Component {
557557
}
558558

559559
Tree.defaultProps = {
560-
className: undefined,
560+
svgClassName: undefined,
561561
nodeSvgShape: {
562562
shape: 'circle',
563563
shapeProps: {
@@ -574,7 +574,7 @@ Tree.defaultProps = {
574574
onUpdate: undefined,
575575
orientation: 'horizontal',
576576
translate: { x: 0, y: 0 },
577-
pathClass: undefined,
577+
pathClassFunc: undefined,
578578
pathFunc: 'diagonal',
579579
transitionDuration: 500,
580580
depthFactor: undefined,
@@ -599,7 +599,7 @@ Tree.defaultProps = {
599599
};
600600

601601
Tree.propTypes = {
602-
className: T.string,
602+
svgClassName: T.string,
603603
data: T.oneOfType([T.array, T.object]).isRequired,
604604
nodeSvgShape: T.shape({
605605
shape: T.string,
@@ -618,7 +618,7 @@ Tree.propTypes = {
618618
x: T.number,
619619
y: T.number,
620620
}),
621-
pathClass: T.func,
621+
pathClassFunc: T.func,
622622
pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight', 'step']), T.func]),
623623
transitionDuration: T.number,
624624
depthFactor: T.number,

0 commit comments

Comments
 (0)