From 2a99ad17d80ca3dd5a8c15399297f8b4cbf06ef4 Mon Sep 17 00:00:00 2001 From: Zyf665 <1246271707@qq.com> Date: Sat, 9 Nov 2024 15:56:48 +0800 Subject: [PATCH 1/4] feat:correct type annotation for treeTitleRender And add missing documentation for treeTitleRender prop --- README.md | 126 ++++++++++++++++++++++----------------------- src/TreeSelect.tsx | 2 +- 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 3b973d8f..c2db38ff 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,6 @@ React TreeSelect Component - ## Development ``` @@ -55,75 +54,76 @@ online example: https://tree-select-react-component.vercel.app/ ### 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. Default set `min-width` same as input | bool | true | -|dropdownClassName | additional className applied to dropdown | String | - | -|dropdownStyle | additional style applied to dropdown | Object | {} | -|onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` | -|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 | -|maxTagTextLength | max tag text length to show | number | - | -|maxTagCount | max tag count to show | number | - | -|maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | -|multiple | whether multiple select (true when enable treeCheckable) | bool | false | -|disabled | whether disabled select | bool | false | -|searchValue | work with `onSearch` to make search value controlled. | string | '' | -|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 | - | -|onTreeExpand | called when tree node expand | function(expandedKeys) | - | -|onPopupScroll | called when popup scroll | function(event) | - | -|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 | -|treeDefaultExpandedKeys | default expanded treeNode keys | Array | - | -|treeExpandedKeys | set tree expanded keys | Array | - | -|treeExpandAction | Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree` | string \| boolean | `click` | -|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 | '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. (value should be unique across the whole array) | array<{value,label,children, [disabled,selectable]}> | [] | -|treeDataSimpleMode | enable 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 | -|loadData | load data asynchronously | function(node) | - | -|getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | -|autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | -| suffixIcon | specify the select arrow icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| clearIcon | specify the clear icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| removeIcon | specify the remove icon | ReactNode \| (props: TreeProps) => ReactNode | - | -|switcherIcon| specify the switcher icon | ReactNode \| (props: TreeProps) => ReactNode | - | -|virtual| Disable virtual when `false` | false | - | - +| 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. Default set `min-width` same as input | bool | true | +| dropdownClassName | additional className applied to dropdown | String | - | +| dropdownStyle | additional style applied to dropdown | Object | {} | +| onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` | +| 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 | +| maxTagTextLength | max tag text length to show | number | - | +| maxTagCount | max tag count to show | number | - | +| maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | +| multiple | whether multiple select (true when enable treeCheckable) | bool | false | +| disabled | whether disabled select | bool | false | +| searchValue | work with `onSearch` to make search value controlled. | string | '' | +| 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 | - | +| onTreeExpand | called when tree node expand | function(expandedKeys) | - | +| onPopupScroll | called when popup scroll | function(event) | - | +| 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 | +| treeDefaultExpandedKeys | default expanded treeNode keys | Array | - | +| treeExpandedKeys | set tree expanded keys | Array | - | +| treeExpandAction | Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree` | string \| boolean | `click` | +| 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 | '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. (value should be unique across the whole array) | array<{value,label,children, [disabled,selectable]}> | [] | +| treeDataSimpleMode | enable 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 | +| loadData | load data asynchronously | function(node) | - | +| getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | +| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | +| suffixIcon | specify the select arrow icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| clearIcon | specify the clear icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| removeIcon | specify the remove icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| switcherIcon | specify the switcher icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| virtual | Disable virtual when `false` | false | - | +| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | - | ### 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 | +> 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 | ## 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`. + - 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 diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx index e8046954..db63f710 100644 --- a/src/TreeSelect.tsx +++ b/src/TreeSelect.tsx @@ -93,7 +93,7 @@ export interface TreeSelectProps void; - treeTitleRender?: (node: ValueType) => React.ReactNode; + treeTitleRender?: (node: OptionType) => React.ReactNode; // >>> Tree treeLine?: boolean; From c65bf29516a9a75f34247ab0f8d4aa5c88a177e8 Mon Sep 17 00:00:00 2001 From: Zyf665 <1246271707@qq.com> Date: Sat, 9 Nov 2024 17:45:11 +0800 Subject: [PATCH 2/4] Format markdown tables and documentation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c2db38ff..f8d34f7a 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ online example: https://tree-select-react-component.vercel.app/ | 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,selectable]}> | [] | | treeDataSimpleMode | enable 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 | +| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | - | | loadData | load data asynchronously | function(node) | - | | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | @@ -104,7 +105,6 @@ online example: https://tree-select-react-component.vercel.app/ | removeIcon | specify the remove icon | ReactNode \| (props: TreeProps) => ReactNode | - | | switcherIcon | specify the switcher icon | ReactNode \| (props: TreeProps) => ReactNode | - | | virtual | Disable virtual when `false` | false | - | -| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | - | ### TreeNode props From b05379770b04411315bc6c7bcd329532cd66b7e8 Mon Sep 17 00:00:00 2001 From: zyf <81416635+Zyf665@users.noreply.github.com> Date: Sat, 9 Nov 2024 10:08:01 +0000 Subject: [PATCH 3/4] Format markdown tables and documentation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f8d34f7a..c4d8a3c2 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ online example: https://tree-select-react-component.vercel.app/ | 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,selectable]}> | [] | | treeDataSimpleMode | enable 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 | -| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | - | +| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | | loadData | load data asynchronously | function(node) | - | | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | From 8389c8f1d73fb5daffdf7534f08134064165fb6c Mon Sep 17 00:00:00 2001 From: zyf <81416635+Zyf665@users.noreply.github.com> Date: Sat, 9 Nov 2024 10:29:07 +0000 Subject: [PATCH 4/4] Format markdown tables and documentation --- README.md | 129 +++++++++++++++++++++++++++--------------------------- 1 file changed, 65 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index c4d8a3c2..2ea7eedc 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ React TreeSelect Component + ## Development ``` @@ -54,76 +55,76 @@ online example: https://tree-select-react-component.vercel.app/ ### 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. Default set `min-width` same as input | bool | true | -| dropdownClassName | additional className applied to dropdown | String | - | -| dropdownStyle | additional style applied to dropdown | Object | {} | -| onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` | -| 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 | -| maxTagTextLength | max tag text length to show | number | - | -| maxTagCount | max tag count to show | number | - | -| maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | -| multiple | whether multiple select (true when enable treeCheckable) | bool | false | -| disabled | whether disabled select | bool | false | -| searchValue | work with `onSearch` to make search value controlled. | string | '' | -| 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 | - | -| onTreeExpand | called when tree node expand | function(expandedKeys) | - | -| onPopupScroll | called when popup scroll | function(event) | - | -| 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 | -| treeDefaultExpandedKeys | default expanded treeNode keys | Array | - | -| treeExpandedKeys | set tree expanded keys | Array | - | -| treeExpandAction | Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree` | string \| boolean | `click` | -| 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 | '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. (value should be unique across the whole array) | array<{value,label,children, [disabled,selectable]}> | [] | -| treeDataSimpleMode | enable 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 | -| treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | -| loadData | load data asynchronously | function(node) | - | -| getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | -| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | -| suffixIcon | specify the select arrow icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| clearIcon | specify the clear icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| removeIcon | specify the remove icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| switcherIcon | specify the switcher icon | ReactNode \| (props: TreeProps) => ReactNode | - | -| virtual | Disable virtual when `false` | false | - | +| 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. Default set `min-width` same as input | bool | true | +|dropdownClassName | additional className applied to dropdown | String | - | +|dropdownStyle | additional style applied to dropdown | Object | {} | +|onDropdownVisibleChange | control dropdown visible | function | `() => { return true; }` | +|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 | +|maxTagTextLength | max tag text length to show | number | - | +|maxTagCount | max tag count to show | number | - | +|maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | +|multiple | whether multiple select (true when enable treeCheckable) | bool | false | +|disabled | whether disabled select | bool | false | +|searchValue | work with `onSearch` to make search value controlled. | string | '' | +|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 | - | +|onTreeExpand | called when tree node expand | function(expandedKeys) | - | +|onPopupScroll | called when popup scroll | function(event) | - | +|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 | +|treeDefaultExpandedKeys | default expanded treeNode keys | Array | - | +|treeExpandedKeys | set tree expanded keys | Array | - | +|treeExpandAction | Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree` | string \| boolean | `click` | +|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 | '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. (value should be unique across the whole array) | array<{value,label,children, [disabled,selectable]}> | [] | +|treeDataSimpleMode | enable 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 | +|treeTitleRender | Custom render nodes | (nodeData: OptionType) => ReactNode | +|loadData | load data asynchronously | function(node) | - | +|getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | +|autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | +| suffixIcon | specify the select arrow icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| clearIcon | specify the clear icon | ReactNode \| (props: TreeProps) => ReactNode | - | +| removeIcon | specify the remove icon | ReactNode \| (props: TreeProps) => ReactNode | - | +|switcherIcon| specify the switcher icon | ReactNode \| (props: TreeProps) => ReactNode | - | +|virtual| Disable virtual when `false` | false | - | -### TreeNode props +### 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 | +| 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 | -## note +## 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`. + - 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 @@ -136,4 +137,4 @@ http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front ## License -rc-tree-select is released under the MIT license. +rc-tree-select is released under the MIT license. \ No newline at end of file