uxcore-tree

TL;DR

tree ui component for react, based on rc-tree

setup develop environment

$ git clone https://github.com/uxcore/uxcore-tree
$ cd uxcore-tree
$ npm install
$ gulp server

Usage

var Tree = require('uxcore-tree');
var TreeNode = Tree.TreeNode;
React.render(
  <Tree>
    <TreeNode>leaf </TreeNode>
    <TreeNode>leaf </TreeNode>
  <Tree/>, container);

demo

http://uxcore.github.io/uxcore/components/tree/

Props

Tree props

| name | description | type | default | |----------|----------------|----------|--------------| |className | additional css class of root dom node | String | '' | |prefixCls | prefix class | String | '' | |disabled | whether disabled the tree | bool | false | |showLine | whether show line | bool | true | |showIcon | whether show icon | bool | true | |selectable | whether can be selected | bool | true | |multiple | whether multiple select | bool | false | |checkable | whether support checked | bool/React Node | false | |defaultExpandAll | expand all treeNodes | bool | false | |defaultExpandedKeys | expand specific treeNodes | String[] | - | |defaultExpandParent | auto expand parent treeNodes when init | bool | True | |expandedKeys | Controlled expand specific treeNodes | String[] | - | |autoExpandParent | whether auto expand parent treeNodes | bool | true | |checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array. | String[]/{checked:Array,halfChecked:Array} | [] | |defaultCheckedKeys | default checked treeNodes | String[] | [] | |checkStrictly | check node precisely, parent and children nodes are not associated | bool | false | |selectedKeys | Controlled selected treeNodes(After setting, defaultSelectedKeys will not work) | String[] | [] | |defaultSelectedKeys | default selected treeNodes | String[] | [] | |icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props) | - | |onExpand | fire on treeNode expand or not | function(expandedKeys, {expanded: bool, node}) | - | |onCheck | click the treeNode/checkbox to fire | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - | |onSelect | click the treeNode to fire | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - | |loadData | load data asynchronously and the return value should be a promise | function(node) | - | |onRightClick | select current treeNode and show customized contextmenu | function({event,node}) | - | |onMouseEnter | call when mouse enter a treeNode | function({event,node}) | - | |onMouseLeave | call when mouse leave a treeNode | function({event,node}) | - | |draggable | whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.) | bool | false | |onDragStart | it execs when fire the tree's dragstart event | function({event,node}) | - | |onDragEnter | it execs when fire the tree's dragenter event | function({event,node,expandedKeys}) | - | |onDragOver | it execs when fire the tree's dragover event | function({event,node}) | - | |onDragLeave | it execs when fire the tree's dragleave event | function({event,node}) | - | |onDragEnd | it execs when fire the tree's dragend event | function({event,node}) | - | |onDrop | it execs when fire the tree's drop event | function({event, node, dragNode, dragNodesKeys}) | - |

TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom.

| name | description | type | default | |----------|----------------|----------|--------------| |className | additional class to treeNode | String | '' | |disabled | whether disabled the treeNode | bool | false | |disableCheckbox | whether disable the treeNode' checkbox | bool | false | |title | tree/subTree's title | String/node | '---' | |key | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes | String | treeNode's position | |isLeaf | whether it's leaf node | bool | false | |icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props) | - |

ActionTreeNode props

| name | description | type | default | | --------------- | ------------------------------------------------------------ | ----------------------- | ------------------- | | className | additional class to treeNode | String | '' | | disabled | whether disabled the treeNode | bool | false | | disableCheckbox | whether disable the treeNode' checkbox | bool | false | | title | tree/subTree's title | String/node | '---' | | key | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes | String | treeNode's position | | isLeaf | whether it's leaf node | bool | false | | icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | element/Function(props) | - | | actionAble | whether the node has actions | Bool | False | | actionIcon | the uxcore item name for the dropdown menu trigger to show actions | String | 'shezhi' | | actions | actions of current node | Array/Object | |