npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

rc-tree-select

v2.9.3

Published

tree-select ui component for react

Downloads

1,050,254

Readme

rc-tree-select


React TreeSelect Component

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

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

install

rc-tree-select

API

TreeSelect props

namedescriptiontypedefault
classNameadditional css class of root dom nodeString''
prefixClsprefix classString''
animationdropdown animation name. only support slide-up nowString''
transitionNamedropdown css animation nameString''
choiceTransitionNamecss animation name for selected items at multiple modeString''
dropdownMatchSelectWidthwhether dropdown's with is same with select. Default set min-width same as inputbool-
dropdownClassNameadditional className applied to dropdownString-
dropdownStyleadditional style applied to dropdownObject{}
dropdownPopupAlignspecify alignment for dropdown (alignConfig of dom-align)Object-
onDropdownVisibleChangecontrol dropdown visiblefunction() => { return true; }
notFoundContentspecify content to show when no result matches.String'Not Found'
showSearchwhether show search input in single modebooltrue
allowClearwhether allowClearboolfalse
maxTagTextLengthmax tag text length to shownumber-
maxTagCountmax tag count to shownumber-
maxTagPlaceholderplaceholder for omitted valuesReactNode/function(omittedValues)-
multiplewhether multiple select (true when enable treeCheckable)boolfalse
disabledwhether disabled selectboolfalse
searchValuework with onSearch to make search value controlled.string''
defaultValueinitial selected treeNode(s)same as value type-
valuecurrent 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}>.-
labelInValuewhether to embed label in value, see above value typeBoolfalse
onChangecalled when select treeNode or input value changefunction(value, label(null), extra)-
onSelectcalled when select treeNodefunction(value, node, extra)-
onSearchcalled when input changedfunction-
onTreeExpandcalled when tree node expandfunction(expandedKeys)-
showCheckedStrategyTreeSelect.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
treeIconshow tree iconboolfalse
treeLineshow tree lineboolfalse
treeDefaultExpandAlldefault expand all treeNodeboolfalse
treeDefaultExpandedKeysdefault expanded treeNode keysArray-
treeExpandedKeysset tree expanded keysArray-
treeCheckablewhether tree show checkbox (select callback will not fire)boolfalse
treeCheckStrictlycheck node precisely, parent and children nodes are not associatedboolfalse
filterTreeNodewhether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's valuebool/Function(inputValue:string, treeNode:TreeNode)Function
treeNodeFilterPropwhich prop value of treeNode will be used for filter if filterTreeNode return trueString'value'
treeNodeLabelPropwhich prop value of treeNode will render as content of selectString'title'
treeDatatreeNodes 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,selectable}>[]
treeDataSimpleModeenable simple mode of treeData.(treeData should be like this: {id:1, pId:0, value:'1', label:"test1",...},..., pId is parent node's id)bool/object{id:'id', pId:'pId', rootPId:null}false
loadDataload data asynchronouslyfunction(node)-
getPopupContainercontainer which popup select menu rendered intofunction(trigger:Node):Nodefunction(){return document.body;}
autoClearSearchValueauto clear search input value when multiple select is selected/deselectedbooleantrue
inputIconspecify the select arrow iconReactNode | (props: TreeProps) => ReactNode-
clearIconspecify the clear iconReactNode | (props: TreeProps) => ReactNode-
removeIconspecify the remove iconReactNode | (props: TreeProps) => ReactNode-
switcherIconspecify the switcher iconReactNode | (props: TreeProps) => ReactNode-

TreeNode props

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

namedescriptiontypedefault
disableddisable treeNodeboolfalse
keyit's value must be unique across the tree's all TreeNode, you must set itString-
valuedefault as treeNodeFilterProp (be unique across the tree's all TreeNode)String''
titletree/subTree's titleString/element'---'
isLeafwhether it's leaf nodeboolfalse

note

  1. Optimization tips(when there are large amounts of data, like more than 5000 nodes)
    • Do not Expand all nodes.
    • Recommend not exist many TreeSelect components in a page at the same time.
    • Recommend not use treeCheckable mode, or use treeCheckStrictly.
  2. In treeCheckable mode, It has the same effect when click x(node in Selection box) or uncheck in the treeNode(in dropdown panel), but the essence is not the same. So, even if both of them trigger onChange method, but the parameters (the third parameter) are different. (中文:在treeCheckable模式下,已选择节点上的x删除操作、和相应 treeNode 节点上 checkbox 的 uncheck 操作,最终效果相同,但本质不一样。前者跟弹出的 tree 组件可以“毫无关系”(例如 dropdown 没展开过,tree 也就没渲染好),而后者是 tree 组件上的节点 uncheck 事件。所以、即便两者都会触发onChange方法、但它们的参数(第三个参数)是不同的。)

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.