react-treeview-semantic v1.0.5

react-treeview

React Tree View Component, Configurable, Customizable.

How To Use ?

// install
npm install --save react-treeview-semantic;

// import
import SourceTree from 'react-treeview-semantic';

// instantiation
<SourceTree
  setActiveItem={this.setActiveItem}
  baseIcon={null}
  baseColor={null}
  checkable={true}
  singleChecked={true}
  treeData={treeData}
  getChecked={this.getChecked}
/>

Attributes

1. treeData - Array - isRequired

   data the component needs to build the tree view.

2. baseIcon - String

   you can customize icon of the base-item(which flag is 'base' or not declared in treeData, also called default icon, all icon you can found in semantic.

3. baseColor - String

   you can customize icon color for baseIcon.

4. checkable - Bool

   the component supports selection for all tree nodes, default it's multiselect status, also it can be singleselect by singleChecked attr below.

5. singleChecked - Bool

   both checkable and singleChecked attr need to be true if you want to use single checkbox, only tree nodes which flag attr is not 'base' and none can be chosen.

6. getChecked - Function callback

   if the component is in single or multi status, the getChecked fuction(you define) will be called when user select or deselect any tree nodes. in your own getChecked func, just 'console.log(arguments)', and you can get checkedArray(all seleced item) data and rootItem(the root node of the checked) data.

7. setActiveItem - Function callback

   any time, you click the tree nodes, the setActiveItem func(you define) will be called. in your own getChecked func, just 'console.log(arguments)', and you can get item(item you clicked) data, flag(see some flag in 'treeData example' below) data and root(the root of item you clicked) data.

treeData

1. flag - base | file | table

   default it's 'base', other choises: 'file', 'table'(just three current), different flag has different icon, lick 'base', it's a folder(default). in setActiveItem func you can get the flag of tree node.

2. name

   name is isRequired, it doesn't matter whether repeat name exits.

3. children

   the children nodes of curren node.

4. example

treeData: [
  {
    name: 'index',
    flag: 'base',
    children: [
      {name: 'solej'},
      {
        name: 'sdfds',
        children: [
          {name: 'exits', children: [{name: 'lalal', flag: 'table'}]},
          {name: '_default_', flag: 'file'},
          {name: 'exits2', children: [{name: 'lalal2', flag: 'table'}]},
        ]
      }
    ]
  },

  {
    name: '23qe2jewrjsdf-sdfjksdfsjdf-sdfkjsdfjsd',
    flag: 'base',
    children: [
      {name: 'sdf'},
      {
        name: 'dkdkdkd',
        children: [
          {name: 'cayman-sdfjksdfjkdk-sdfsdfkdkd-dk',flag: 'table'},
          {name: '_default_', flag: 'table'}
        ]
      }
    ]
  }
]