rc-tree-select

React TreeSelect Component

Browser Support

| | | | | | | --- | --- | --- | --- | --- | | IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

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

Feature

• support ie8,ie8+,chrome,firefox,safari

Keyboard

install

Usage

see examples

API

TreeSelect props

| name | description | type | default | |----------|----------------|----------|--------------| |className | additional css class of root dom node | String | '' | |prefixCls | prefix class | String | '' | |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 | true | |dropdownClassName | additional className applied to dropdown | String | - | |dropdownStyle | additional style applied to dropdown | Object | {} | |notFoundContent | specify content to show when no result matches. | String | 'Not Found' | |showSearch | whether show search input in single mode | bool | true | |allowClear | whether allowClear | bool | false | |tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false | |maxTagTextLength | max tag text length to show | number | - | |combobox | enable combobox mode(can not set multiple at the same time) | bool | false | |multiple | whether multiple select | bool | false | |disabled | whether disabled select | bool | false | |defaultValue | initial selected option(s) | String/Array | - | |value | current selected option(s) | String/Array | - | |onChange | called when select treeNode or input value change(combobox) | function(value, label) | - | |onSelect | called when select treeNode | function(value, node) | - | |onSearch | called when input changed | function | - | |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 | |filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - | |treeNodeFilterProp | which prop value of treeNode will be used for filter if filterTreeNode return true | String | 'value' | |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. (if value is not unique of the whole array, you must provide key as unique id) | array<{value, label, children}> | [] | |loadData | load data asynchronously | function(node) | - |

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 | String | '' | |title | tree/subTree's title | String | '---' | |isLeaf | whether it's leaf node | bool | false |

Test Case

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

Coverage

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

License

rc-tree-select is released under the MIT license.