Package Exports

react-tree-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tree-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tree

React Multi Level Tree component

Basic useful feature list:

Expand and collapsing tree
Supporting partial selection
Select all children when parent is selected
Preload Tree State
TODO: Search and select
TODO:Selecting particular item into tree and scroll into the item
TODO:Unit test cases.

setup

npm install react-tree-components

   import Tree from "react-tree-components";
   import React, {PropTypes, Component} from "react";
   import ReactDOM from 'react-dom';
   let app = document.getElementById('app');
   const  items = [] ;let i=1 ,item;
       while(i <1000){
           items.push({id:i,name:'item '+i});
           i++;
       }

       const treeList = [] ;
       let children = [] ,hasChild,n=0;
       i =1;
       while (i<30){

           item = {id:i,name:'state' +i, hasChild:false};
           if(i%5 ===0){
               children = []
               for(let j=i;j<i+5;j++){
                   if(j%5===0){
                       let subchild =[]
                       for(n=j;n<j+5;n++){
                           subchild.push({id:'sc'+n,name:'carrier'+n,parentId:'c'+j})
                       }    
                       children.push({id:'c'+j,name:'city'+j,parentId:i,hasChild:true,children:subchild});
                   }
                   else{
                       children.push({id:'c'+j,name:'city'+j,parentId:i});
                   }


               }
               item = {...item,hasChild:true,children:children}
           }
           treeList.push(item);
           i++;
       }

       let selectTreeItems =[];
       selectTreeItems.push({id:1,name:'state' + 1});
       selectTreeItems.push({id:2,name:'state' + 2});
       selectTreeItems.push({id:3,name:'state' + 3});
       selectTreeItems.push({id:4,name:'state' + 4});
       selectTreeItems.push({id:5,name:'state' + 5});
       selectTreeItems.push({id:'c5',name:'city' + 5});
       selectTreeItems.push({id:'sc5',name:'carrier' + 5});


   ReactDOM.render(<Tree showSearch={true} selectTreeItems={selectTreeItems} items={treeList} multiSelect={true}></Tree>,app)

Tree Sample Example
Repo:repo