react-tree-file-system

A basic tree file system that allows customisation

• custom CSS and classNames
• drag and drop available
• demo available

1 Demo

Version 1.1.0

Version 1.0.6

You can also try out here

2 Get Started

# To download, either
npm install --save react-tree-file-system
# or
yarn add react-tree-file-system

In your code

import Tree from 'react-tree-file-system';

// import stylesheet
import 'react-tree-file-system/index.css';

Uncontrolled component

• you can toggle folder to open or close by using recursion

const recursiveSetState = (tree, indexes, currIndex, key, value) => {
  const dupTree= tree.slice();
  const getIndex = indexes[currIndex];
  if (currIndex === indexes.length - 1) {
    dupTree[getIndex][key] = value;
    return tree;
  }
  dupTree[getIndex].children = recursiveSetState(
    (dupTree[getIndex].children || []).slice(0),
    indexes,
    currIndex + 1, key, value
  );
  return dupTree;
}

// ...

class YourClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeValue: [
        {
          title: 'folder name'
          type: 'folder',
          children: [
            {
              title: 'child 1'
            },
            {
              title: 'child 2'
            },
            {
              title: 'child 3'
            }
          ]
        }
      ]
    }
  }

  render() {
    return (
      // ...

      <Tree
        value={this.state.treeValue}
        folderOnClick={(_, indexes, state) => {
          this.setState(prevState => {
            return {
              treeValue: recursiveSetState(prevState.treeValue, indexes, 0, 'isOpen', state);
            }
          });
        }}
      />

      // ...
    )
  }
}

• you can support on drag with recursion

const recursivelySetChild = (tree, toIndexes, currIndex, extractData) => {
  const dupTree= tree.slice();
  const getIndex = toIndexes[currIndex];
  if (currIndex === toIndexes.length - 1) {
    dupTree[getIndex].children.push(extractData);
    return tree;
  }
  dupTree[getIndex].children = recursivelySetChild((dupTree[getIndex].children || []).slice(0), toIndexes, currIndex + 1, extractData);
  return dupTree;
}

const getRecursiveItem = (tree, fromIndexes, currIndex) => {
  const dupTree = tree.slice(0);
  const getIndex = fromIndexes[currIndex];
  if(currIndex === fromIndexes.length - 1) {
    const child = dupTree.filter((_, i) => i === getIndex);
    return child[0];
  }
  return getRecursiveItem((dupTree[getIndex].children || []).slice(0), fromIndexes, currIndex + 1);
}

const popRecursiveItem = (tree, fromIndexes, currIndex) => {
  const dupTree = tree.slice(0);
  const getIndex = fromIndexes[currIndex];
  if(currIndex === fromIndexes.length - 1) {
    const filtered = dupTree.filter((_, i) => i !== getIndex);
    return filtered;
  }
  const children = popRecursiveItem((dupTree[getIndex].children || []).slice(0), fromIndexes, currIndex + 1);
  dupTree[getIndex].children = children;
  return dupTree;
}


// ...

class YourClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      treeValue: [
        {
          title: 'folder name'
          type: 'folder',
          children: [
            {
              title: 'child 1'
            },
            {
              title: 'child 2'
            },
            {
              title: 'child 3'
            }
          ]
        }
      ]
    }
  }

  render() {
    return (
      // ...

      <Tree
        value={this.state.treeValue}
        onDrag={(fromIndexes, toIndexes) => {
          this.setState(prevState => {
            const extractData = getRecursiveItem(prevState.defaultTree, fromIndexes, 0);
            const extraData = recursivelySetChild(prevState.defaultTree, toIndexes, 0, extractData);
            const newData = popRecursiveItem(prevState.defaultTree, fromIndexes, 0);
            return {
              defaultTree: newData
            }
          })
        }}
      />

      // ...
    )
  }
}

4 Tree Structure

// Node
interface Node {
  title: string,
  isOpen?: boolean,
  // isLocked?: boolean, // No support yet
  // isHidden?: boolean, // No support yet
  children?: Node[],
  folderIcon?: React.Element,
  fileIcon?: React.Element,
  style?: React.CSSProperties,
  className?: string,
  // able to add anything here
}

// Example
[
  {
    title: 'main', // what is displayed
    isOpen: false, // optional
    type: 'folder',
    folderIcon: <FolderIcon /> // optional
    children: [
      {
        title: 'Child 1',
      },
      {
        title: 'Readme.md',
        fileIcon: <FileIcon />, // optional
        text: 'demo text'
      },
    ]
  },
  // ... repeat Node
]

5 API

| Property | Description | Type | Default | | :------: | :------: | :------: | :------: | | value | The Tree structure given in point 4 | Node[] | undefined | | fileOnClick | Called when file is clicked | (event, indexes: number[], value: Node) => void | undefined | | folderOnClick | Called when folder is clicked | (event, indexes: number[], state: boolean, value: Node) => void | undefined | | onDrop | Called when something is dragged on folder [Replace onDrag] | (event, fromIndexes, toIndexes) => void | undefined | | onDrag | Called when something is dragged on folder [Depreciated] | (event, fromIndexes, toIndexes) => void | undefined | | folderIcon | Replace the default folder icon | JSX.Element | undefined | | fileIcon | Replace the default file icon | JSX.Element | undefined | | style | customize the general style | React.CSSProperties | undefined | | isDraggable | customize the general style | React.CSSProperties | false | | selected | Enable highlighting of cell clicked. Basically just store the indexes as indexes.join(',') | string | undefined | | selectedClassName | customize the highlighted style with your own className | string | undefined |