@salesframe/react-folder-tree

This is a forked repository, and modified it to our needs. 

Extra props documentation

prop	type	isRequired	description
rootClassName	:string	false	adds an extra class to the top level div container
folderTextClassName	:string	false	adds an extra class to the names of the folders
folderTextSelectedClassName	:string	false	adds an extra class to the selected names of the folders
listClassName	:string	false	adds an extra class to the ul dom element
isEditable	:bool	false	allow to disable the editable mode

Introduction

This is a folder tree written in ReactJS.

We can do:

• click each carat to expand/collapse the folder
• click the checkbox to (un)check each folder and file. (un)check each folder will automatically (un)check all sub-folders, including all the files in these folders. If part of the sub-folders or files in a folder are checked, this folder will display a half check.
• click the folder/file name to select it, and it will be hightlighted in blue
• click the pencil beside the folder/file to rename it
• click the delete button to delete the selected folder/file
• click the Add button to add new file in the selected folder/file. Adding a file-2 to a file-1 will change file-1 to a folder; if all sub folder/files of a folder are deleted, this folder will become a file. The new file's check status is same as its parent

Props

• data: initial data to construct the tree. Sample data can be found below
• onChange(data): It will call this function after any of these four actions: (un)check, add, delete, or rename. Where data is the object representing the tree of all selected files/folders (filtered out all unchecked files/folders).
• FileComponent & FolderComponent: you can inject your own components here. Default file/folder component is already provided.

Sample Tree:

To Install:

npm install --save react-folder-tree

To Run:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Remember to include the above link in your html page. Otherwise the icons won't show up.

import React from 'react';
import ReactDOM from 'react-dom';
import FolderTree from 'react-folder-tree';

const testData = YOUR DATA;

ReactDOM.render(		 	
  <FolderTree      
    data={testData}       
  />,        
	document.getElementById('root')      
)     

Data Format:

{				 
	id: number,    			
	filename: string,	     		
	children: array of *this*	  [optional]    				
}		

Sample Data:

const testData = {
  "id": 1,
  "filename": "All Categories",
  "children": [
    {
      "id": 2,
      "filename": "For Sale",
      "children": [
        {
          "id": 3,
          "filename": "Audio & Stereo",
          "children": [
    {
      "id": 4,
      "filename": "For Sale",
      "children": [
        {
          "id": 5,
          "filename": "Audio & Stereo",
        },
        {
          "id": 6,
          "filename": "Baby & Kids Stuff",
        },
        {
          "id": 7,
          "filename": "Music, Films, Books & Games",
        }
      ]
    },
    {
      "id": 8,
      "filename": "Motors",
      "children": [
        {
          "id": 9,
          "filename": "Car Parts & Accessories",
        },
        {
          "id": 10,
          "filename": "Cars",
        },
        {
          "id": 11,
          "filename": "Motorbike Parts & Accessories",
        }
      ]
    },
    {
      "id": 12,
      "filename": "Jobs",
      "children": [
        {
          "id": 13,
          "filename": "Accountancy",
        },
        {
          "id": 14,
          "filename": "Financial Services & Insurance",
        },
        {
          "id": 15,
          "filename": "Bar Staff & Management", 
        }
      ]
    }
  ]
        },
        {
          "id": 16,
          "filename": "Baby & Kids Stuff",
        },
        {
          "id": 17,
          "filename": "Music, Films, Books & Games",
        }
      ]
    },
    {
      "id": 18,
      "filename": "Motors",
      "children": [
        {
          "id": 19,
          "filename": "Car Parts & Accessories",
        },
        {
          "id": 20,
          "filename": "Cars",
        },
        {
          "id": 21,
          "filename": "Motorbike Parts & Accessories",
        }
      ]
    },
    {
      "id": 22,
      "filename": "Jobs",
      "children": [
        {
          "id": 23,
          "filename": "Accountancy",
        },
        {
          "id": 24,
          "filename": "Financial Services & Insurance",
        },
        {
          "id": 25,
          "filename": "Bar Staff & Management", 
        }
      ]
    }
  ]
}

Resources

Testing data is from here

Icons are from here

Contribution

Any contributions are welcomed! Please upload issues or pull requests on the github page, thank you!

TODO

• css modules of font awesome
• in editing mode the inputbox doesn't hover automatically
• press enter to confirm (now must click the confirm icon)
• fully test all funtionalities
• change structure: since now each Treenode has path, there should exist more concise way to handle check
• remove excessive dependencies