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 |