uxcore-tree

0.4.7-beta.2 • Public • Published

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

Package Sidebar

Install

npm i uxcore-tree

Weekly Downloads

21

Version

0.4.7-beta.2

License

MIT

Unpacked Size

75.8 kB

Total Files

22

Last publish

Collaborators

  • dongruiyang
  • eternalsky
  • ex90rts
  • lecepin
  • surfacew
  • taoqili
  • vincent.bian