0.0.3 • Published 5 years ago

pps-rc-tree v0.0.3

Weekly downloads
7
License
MIT
Repository
github
Last release
5 years ago

rc-tree


tree ui component for react

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Feature

  • Support all popular browsers, including Internet Explorer 9 and above.

Example

http://localhost:8018/examples/

online example: http://react-component.github.io/tree/examples/

install

rc-tree

Usage

see examples

API

Tree props

namedescriptiontypedefault
autoExpandParentwhether auto expand parent treeNodesboolfalse
checkablewhether support checkedbool/React Nodefalse
checkedKeysControlled 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}[]
checkStrictlycheck node precisely, parent and children nodes are not associatedboolfalse
classNameadditional css class of root dom nodeString''
defaultCheckedKeysdefault checked treeNodesString[][]
defaultExpandedKeysexpand specific treeNodesString[]-
defaultExpandAllexpand all treeNodesboolfalse
defaultExpandParentauto expand parent treeNodes when initbooltrue
defaultSelectedKeysdefault selected treeNodesString[][]
disabledwhether disabled the treeboolfalse
draggablewhether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.)boolfalse
expandedKeysControlled expand specific treeNodesString[]-
filterTreeNodefilter some treeNodes as you need. it should return truefunction(node)-
iconcustomize icon. When you pass component, whose render will receive full TreeNode props as component propselement/Function(props)-
loadedKeysMark node is loaded when loadData is truestring[]-
loadDataload data asynchronously and the return value should be a promisefunction(node)-
multiplewhether multiple selectboolfalse
prefixClsprefix classString'rc-tree'
selectablewhether can be selectedbooltrue
selectedKeysControlled selected treeNodes(After setting, defaultSelectedKeys will not work)String[][]
showIconwhether show iconbooltrue
showLinewhether show lineboolfalse
treeDatatreeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)array<{key,title,children, disabled, selectable}>-
onCheckclick the treeNode/checkbox to firefunction(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent})-
onExpandfire on treeNode expand or notfunction(expandedKeys, {expanded: bool, node, nativeEvent})-
onDragEndit execs when fire the tree's dragend eventfunction({event,node})-
onDragEnterit execs when fire the tree's dragenter eventfunction({event,node,expandedKeys})-
onDragLeaveit execs when fire the tree's dragleave eventfunction({event,node})-
onDragOverit execs when fire the tree's dragover eventfunction({event,node})-
onDragStartit execs when fire the tree's dragstart eventfunction({event,node})-
onDropit execs when fire the tree's drop eventfunction({event, node, dragNode, dragNodesKeys})-
onLoadTrigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loopfunction(loadedKeys, {event, node})-
onMouseEntercall when mouse enter a treeNodefunction({event,node})-
onMouseLeavecall when mouse leave a treeNodefunction({event,node})-
onRightClickselect current treeNode and show customized contextmenufunction({event,node})-
onSelectclick the treeNode to firefunction(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent})-
switcherIconspecific the switcher icon.ReactNode / (props: TreeNodeAttribute) => ReactNode-

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.

namedescriptiontypedefault
classNameadditional class to treeNodeString''
styleset style to treeNodeObject''
disabledwhether disabled the treeNodeboolfalse
disableCheckboxwhether disable the treeNode' checkboxboolfalse
titletree/subTree's titleString/element'---'
keyit'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 treeNodesStringtreeNode's position
isLeafwhether it's leaf nodeboolfalse
iconcustomize icon. When you pass component, whose render will receive full TreeNode props as component propselement/Function(props)-
switcherIconspecific the switcher icon.ReactNode / (props: TreeNodeAttribute) => ReactNode-

note

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing. But, this bring some restrictions, when you async load treeNodes, you should render tree like this {this.state.treeData.length ? <Tree ...>{this.state.treeData.map(t => <TreeNode ... />)}</Tree> : 'loading tree'}

Development

npm install
npm start

Test Case

http://localhost:8018/tests/runner.html?coverage

Coverage

http://localhost:8018/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8018/tests/runner.html?coverage

License

rc-tree is released under the MIT license.

other tree view