react-d3-tree
react-d3-tree copied to clipboard
LeafNode not targeted correctly
trafficstars
Allows for additional className(s) to be passed to all leaf nodes (nodes without children).
The link above defines leafnodes as nodes without children. however.
{
name: 'Foreman',
attributes: {
department: 'Fabrication',
},
children: [
{
name: 'Worker',
children: []
}
]
}
having data in the example above. essentially a node with the children property but is just an empty array. should technically count as a leaf node.
however as of react-d3-tree - v3.3.2 this is not the case.
it will consider the worker node a branch node
adding the leafNodeClassName property to the tree will not target the worker node correctly.
steps to reproduce
css ---
.node__root > circle {
fill: red;
}
.node__branch > circle {
fill: yellow;
}
.node__leaf > circle {
fill: green;
/*
}
css --
function DTree() {
let data = {
name: 'Foreman',
attributes: {
department: 'Fabrication',
},
children: [
{
name: 'Worker',
children: []
}
]
}
return <Tree data={data}
orientation={"vertical"}
rootNodeClassName="node__root"
branchNodeClassName="node__branch"
leafNodeClassName="node__leaf"
}
offending function appears to be this.
getNodeClassName = (parent: HierarchyPointNode<TreeNodeDatum>, nodeDatum: TreeNodeDatum) => {
const { rootNodeClassName, branchNodeClassName, leafNodeClassName } = this.props;
const hasParent = parent !== null && parent !== undefined;
if (hasParent) {
return nodeDatum.children ? branchNodeClassName : leafNodeClassName;
} else {
return rootNodeClassName;
}
};
src/Tree/index.tsx
lines 486-494
truthy check on
return nodeDatum.children ? branchNodeClassName : leafNodeClassName;