Creating a directory tree component in react
I am working on a music player using electron and decided to give an answer to try it, but I am stuck on creating a directory tree.
I am using readdirp to recursively list all directories, but I have no idea how to build a tree; readdirp creates an array of objects with the following properties:
// dir.fullPath : 'D:/Music/Artist/Album/name',
// dir.fullParentDir : 'D:/Music/Artist/Album',
// dir.path : 'Artist/Album/name',
// dir.parentDir : 'Artist/Album',
// dir.name : 'name',
Tree structure:
D:/Music/Artist1
D:/Music/Artist1/Album1
D:/Music/Artist1/Album1/cd1
D:/Music/Artist1/Album1/cd2
D:/Music/Artist1/Album2
D:/Music/Artist2
D:/Music/Artist2/Album1
D:/Music/Artist2/Album2
With vanilla JS, I loop over the array:
In the 1st iteration, I create an element with id = D: / Music / Artist1 (dir.fullPath), I am looking for an element with id = D: / Music / (dir.fullParentDir), it doesn't exist, so I add the element to the element default.
Second iteration I create an element with id = D: / Music / Artist1 / Album1 , I am looking for an element with id = D: / Music / Artist1 , it exists, so I add it to the found element.
This gives me proper nesting.
<div id="default">
<div id="D:/Music/Artist1">
<div id="D:/Music/Artist1/Album1">
<div id="D:/Music/Artist1/Album1/cd1"></div>
<div id="D:/Music/Artist1/Album1/cd2"></div>
</div>
<div id="D:/Music/Artist1/Album2"></div>
</div>
<div id="D:/Music/Artist2">
<div id="D:/Music/Artist2/Album1"></div>
<div id="D:/Music/Artist2/Album2"></div>
</div>
</div>
How can I achieve the same in reaction?
Edit
Here ( https://imgur.com/a/hS1pe ) is an array of objects returned by readdirp, object 1 is the parent object type 17 and object 18.
Nesting can be more than 1 level (updated examples above).
source to share
I think this is a potential solution to what you are looking for ...
It seems reasonable to me to use a package directory-tree
as opposed to a package readdirp
.
Pass the component with the TreeView
root support so that<TreeView root='c:\' />
import React, { Component } from 'react';
import dirTree from 'directory-tree'; // use this istead of 'readdirp`
export default class TreeView extends Component {
constructor() {
super();
this.state = {
tree: null //initialize tree
}
this.renderTreeNodes = this.renderTreeNodes.bind(this);
}
componentWillMount() {
const { root } = this.props;
const tree = dirTree(root);
this.setState({ tree });
}
renderTreeNodes(children) {
if (children.length === 0) return null;
return (
children.map(child => {
return (
<div key={child.path} id={child.path}>
{ child.hasOwnProperty('children') && child.type === 'directory'?
this.renderTreeNodes(child.children) : null}
</div>
)
})
)
}
render() {
const { tree } = this.state;
return (
<div id="default">
<div id={tree.path}>
{ this.renderTreeNodes(tree.children) }
</div>
</div>
);
}
}
source to share