uxcore-tree-select

uxcore-tree-select component for uxcore.

Usage no npm install needed!

<script type="module">
  import uxcoreTreeSelect from 'https://cdn.skypack.dev/uxcore-tree-select';
</script>

README

uxcore-tree-select

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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