Uxcore-tree-select NPM

uxcore-tree-select

TL;DR

uxcore-tree-select ui component for react

setup develop environment

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

Usage

demo

http://uxcore.github.io/

API

TreeSelect props

name	description	type	default	since Ver.
className	additional css class of root dom node	String	''
prefixCls	prefix class	String	'uxcore-tree-select'
animation	dropdown animation name. only support slide-up now	String	''
transitionName	dropdown css animation name	String	''
choiceTransitionName	css animation name for selected items at multiple mode	String	''
dropdownMatchSelectWidth	whether dropdown's with is same with select	bool	false
dropdownClassName	additional className applied to dropdown	String	-
dropdownStyle	additional style applied to dropdown	Object	{}
dropdownPopupAlign	specify alignment for dropdown	Object	-
notFoundContent	specify content to show when no result matches.	String	'Not Found'
showSearch	whether show search input in single mode	bool	false
allowClear	whether allowClear	bool	false
maxTagTextLength	max tag text length to show	number	-
multiple	whether multiple select (true when enable treeCheckable)	bool	false
disabled	whether disabled select	bool	false
inputValue	if enable search, you can set default input's value, if set to null, auto clear input value when finish select/unselect operation	string/null	''
defaultValue	initial selected treeNode(s)	same as value type	-
value	current selected treeNode(s).	normal: String/Array. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>.	-
labelInValue	whether to embed label in value, see above value type	Bool	false
onChange	called when select treeNode or input value change	function(value, label(null), extra)	-
onSelect	called when select treeNode	function(value, node, extra)	-
onSearch	called when input changed	function	-
onAllClear	called when click all clear	function	-
showCheckedStrategy	`TreeSelect.SHOW_ALL`: show all checked treeNodes (Include parent treeNode). `TreeSelect.SHOW_PARENT`: show checked treeNodes (Just show parent treeNode). Default just show child.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
treeIcon	show tree icon	bool	false
treeLine	show tree line	bool	false
treeDefaultExpandAll	default expand all treeNode	bool	false
treeCheckable	whether tree show checkbox (select callback will not fire)	bool	false
treeCheckStrictly	check node precisely, parent and children nodes are not associated	bool	false
filterTreeNode	whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value	bool/Function(inputValue:string, treeNode:TreeNode)	Function
treeNodeFilterProp	which prop value of treeNode will be used for filter if filterTreeNode return true	String	'title'
treeNodeLabelProp	which prop value of treeNode will render as content of select	String	'title'
treeData	treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)	array<{value,label,children, disabled}>	[]
treeDataSimpleMode	enable simple mode of treeData.(treeData should be like this: {"id":1, "pId":0, "label":"test1"},..., `pId` is parent node's id)	bool/object{id:'id', pId:'pId', rootPId:null}	false
loadData	load data asynchronously	function(node)	-
resultsPanelAllClearBtn	在下拉框右半部分中是否显示清除按钮	bool	true	0.2.0
resultsPanelTitle	在下拉框右半部分中显示标题/说明	string	''	0.2.0
resultsPanelTitleStyle	下拉框右半部分中的标题/说明的样式	object	{}	0.2.0
filterResultsPanel	下拉框右半部分中的结果是否受inputValue影响，如果为true，则右边树形结果也会根据inputValue过滤	bool	true	0.2.0
locale	国际化，枚举值 `'en-us'` `'zh-cn'`	string	`'zh-cn'`	0.2.2
size	尺寸 `'large'` `'middle'` `'small'`	string	`'large'`	0.4.15

TreeNode props

note: you'd better to use treeData instead of using TreeNode.

name	description	type	default
disabled	disable treeNode	bool	false
key	it's value must be unique across the tree's all TreeNode, you must set it	String	-
value	default as treeNodeFilterProp (be unique across the tree's all TreeNode)	String	''
title	tree/subTree's title	String/element	'---'
isLeaf	whether it's leaf node	bool	false