iannbing / iannbing/react-simple-tree-menu

Vertical lines to show connection between nodes

Open
#155 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
138
Forks
44
PR merge metrics
No merged PRs in 30d

Description

Hi. Is it possible to make a tree which contains vertical lines connected between nodes with the current implementation?

F.e. add some flag to toggle the structure of `items` from renderProps to the "nested tree" type. Every item will have a `childNodes` property ?
```js
[
{
"index": 0,
"parent": "",
"level": 0,
"key": "1",
....otherInjectedProps
},
{
"index": 1,
"parent": "",
"level": 0,
"key": "2",
....otherInjectedProps
},
{
"index": 1,
"parent": "2",
"level": 1,
"key": "2/7",
....otherInjectedProps
},
{
"index": 2,
"parent": "",
"level": 0,
"key": "4",
}
]
```
to
```
[
{
"index": 0,
"parent": "",
"level": 0,
"key": "1",
....otherInjectedProps
},
{
"index": 1,
"parent": "",
"level": 0,
"key": "2",
childNodes: [
{
"index": 1,
"parent": "2",
"level": 1,
"key": "2/7",
....otherInjectedProps
}
],
....otherInjectedProps
},

{
"index": 2,
"parent": "",
"level": 0,
"key": "4",
}
]
```

And than use some sort of component recursion
```js
const TreeItem = ({data}) => (


    {data && data.map(item => (

  • {item.label}
    {item.childNodes && }

  • ))}

);
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.