import React from 'react'
import FSRoot from 'react-fs-tree'

const FSTree = () => (
  <FSRoot
    childNodes={[
      { name: 'file' },
      { name: 'added file', mode: 'a' },
      { name: 'deleted file', mode: 'd' },
      { name: 'modified file', mode: 'm' },
      {
        name: 'folder',
        opened: true,
        childNodes: [{ name: 'foo' }, { name: 'bar', selected: true }, { name: 'baz' }]
      }
    ]}
  />
)

export default FSTree

/* FSBranch.js - will be loaded first */
import React from 'react';
import FSNode from './FSNode';

// implementation...

export default FSBranch;

/* FSNode.js - will be loaded second */
import React from 'react';
// The following will be undefined since it's the caller module and was yet to be loaded
import FSBranch from './FSBranch';

// implementation...

export default FSNode;

```tsx filename="FSBranch.js"
import React from 'react'
import { exports } from './module'

class FSBranch extends React.Component {
  render() {
    return <exports.FSNode />
  }
}

exports.FSBranch = FSBranch

## Style

There are two methods to implement the staircase effect:

*   Using a floating tree — where each branch has a constant left-margin and completely floats.
*   Using a padded tree — where each branch doesn't move further away but has an incremental padding.

A floating tree makes complete sense. It nicely vertically aligns the nodes within it based on the
deepness level we're currently at. The deeper we go the further away we'll get from the left edge,
which will result in this nice staircase effect.

![](https://the-guild.dev/medium/97a3475a06a03454f868d7b3f894c1d3.png "A floating tree")

However, as you can see in the illustrated tree, when selecting a node it will not be fully
stretched to the left, as it completely floats with the branch. The solutions for that would be a
padded tree.

Unlike the floating tree, each branch in the padded tree would fully stretch to the left, and the
deeper we go the more we're going to increase the pad between the current branch and the left edge.
This way the nodes will still be vertically aligned like a staircase, but now when we select them,
the highlight would appear all across the container. It's less intuitive and slightly harder to
implement, but it does the job.

![](https://the-guild.dev/medium/e02fcb8858f8f24b40d4259001c474f0.png "A padded tree")

Programmatically speaking, this would require us to pass a counter that will indicate how deep the
current branch is (n), and multiply it by a constant value for each of its nodes (x) (See
[implementation](https://github.com/DAB0mB/react-fs-tree/blob/475c394c51dca52dda205dd1ceaba2ede679609b/src/fs-node.js#L263)).

## Event Handling

One of the things that I was looking to have in my tree was an easy way to update it, for example,
if one node was selected, deselected the previous one, so selection can be unique. There are many
ways that this could be achieved, the most naive one would be updating one of the node's data and
then resetting the state of the tree from its root.

There's nothing necessarily bad with that solution, and it's actually a great pattern, however, if
not implemented or used correctly, this can cause the entire DOM tree to be re-rendered, which is
completely unnecessary. Instead, why not just use the node's component as a controller?

You heard me right. Directly grabbing the reference from the React.Component's callback and use the
methods on its prototype. Sounds tricky, but it works fast and efficiently (see
[implementation](https://github.com/DAB0mB/react-fs-tree/blob/475c394c51dca52dda205dd1ceaba2ede679609b/src/fs-node.js#L146)).



```js
function onSelect(node) {
  // A React.Component is used directly as a controller
  assert(node instanceof React.Component)
  assert(node instanceof FSNode)

  if (this.state.selectedNode) {
    this.state.selectedNode.deselect()
  }

  this.setState({
    selectedNode: node
  })
}

function onDeselect() {
  this.setState({
    selectedNode: null
  })
}