feat: Tree/TreeSelect/Select support virtual prop to disable virtual scroll (#21955)

* feat: support disable virtual scroll

* update snapshot
This commit is contained in:
二货机器人 2020-03-07 11:32:04 +08:00 committed by GitHub
parent 4e8170b93c
commit 8f09465b87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 98 additions and 92 deletions

View File

@ -372,7 +372,7 @@ exports[`List.pagination should change page size work 2`] = `
<div>
<div
class="ant-select-dropdown"
style="width: 0px; opacity: 0;"
style="min-width: 0; opacity: 0;"
>
<div>
<div

View File

@ -30,7 +30,7 @@ Select component to select value from options.
| defaultValue | Initial selected option. | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - | |
| disabled | Whether disabled select | boolean | false | |
| dropdownClassName | className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - | |
| dropdownStyle | style of dropdown menu | object | - | |
| dropdownMenuStyle | additional style applied to dropdown menu | object | - | |
@ -56,6 +56,7 @@ Select component to select value from options.
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
| value | Current selected option. | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.1.0 |
| onBlur | Called when blur | function | - | |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) | - | |
| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only. | function(string\|number\|LabeledValue) | - | |
@ -81,12 +82,12 @@ Select component to select value from options.
### Option props
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | Disable this option | boolean | false | |
| title | `title` of Select after select this Option | string | - | |
| value | default to filter with this property | string\|number | - | |
| className | additional class to option | string | - | |
| Property | Description | Type | Default | Version |
| --------- | ------------------------------------------ | -------------- | ------- | ------- |
| disabled | Disable this option | boolean | false | |
| title | `title` of Select after select this Option | string | - | |
| value | default to filter with this property | string\|number | - | |
| className | additional class to option | string | - | |
### OptGroup props

View File

@ -31,7 +31,7 @@ title: Select
| defaultValue | 指定默认选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - | |
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | |
@ -57,6 +57,7 @@ title: Select
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
| value | 指定当前选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.1.0 |
| onBlur | 失去焦点时回调 | function | - | |
| onChange | 选中 option或 input 的 value 变化combobox 模式下)时,调用此函数 | function(value, option:Option/Array&lt;Option>) | - | |
| onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 | function(string\|number\|LabeledValue) | - | |
@ -84,12 +85,12 @@ title: Select
### Option props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false | |
| title | 选中该 Option 后Select 的 title | string | - | |
| value | 默认根据此属性值进行筛选 | string\|number | - | |
| className | Option 器类名 | string | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | --------------------------------- | -------------- | ------ | ---- |
| disabled | 是否禁用 | boolean | false | |
| title | 选中该 Option 后Select 的 title | string | - | |
| value | 默认根据此属性值进行筛选 | string\|number | - | |
| className | Option 器类名 | string | - | |
### OptGroup props

View File

@ -22,7 +22,7 @@ Tree selection control.
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - | |
| disabled | Disabled or not | boolean | false | |
| dropdownClassName | className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. | boolean | true | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
| dropdownStyle | To set the style of the dropdown menu | object | - | |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
@ -49,6 +49,7 @@ Tree selection control.
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | |
| treeNodeLabelProp | Will render as content of select | string | 'title' | |
| value | To set the current selected treeNode(s). | string\|string\[] | - | |
| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.1.0 |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
| onSearch | A callback function, can be executed when the search input changes. | function(value: string) | - | |
| onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | - | |

View File

@ -23,7 +23,7 @@ title: TreeSelect
| defaultValue | 指定默认选中的条目 | string/string\[] | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。 | boolean | true | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width``false` 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownStyle | 下拉菜单的样式 | object | - | |
| filterTreeNode | 是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
@ -50,6 +50,7 @@ title: TreeSelect
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | |
| value | 指定当前选中的条目 | string/string\[] | - | |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.1.0 |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
| onSelect | 被选中时调用 | function(value, node, extra) | - | |

View File

@ -14,42 +14,43 @@ Almost anything can be represented in a tree structure. Examples include directo
### Tree props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false |
| checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] |
| defaultExpandParent | auto expand parent treeNodes when init | bool | true |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] |
| disabled | whether disabled the tree | bool | false |
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
| loadData | Load data asynchronously | function(node) | - |
| loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] |
| multiple | Allows selecting multiple treeNodes | boolean | false |
| selectable | whether can be selected | boolean | true |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
| switcherIcon | customize collapse/expand icon of tree node | React.ReactElement | - |
| showLine | Shows a connecting line | boolean | false |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - |
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
| onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - |
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
| treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array\<{ key, title, children, \[disabled, selectable] }> | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true | |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |
| checkable | Adds a `Checkbox` before the treeNodes | boolean | false | |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] | |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] | |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] | |
| defaultExpandParent | auto expand parent treeNodes when init | bool | true | |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] | |
| disabled | whether disabled the tree | bool | false | |
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] | |
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | |
| loadData | Load data asynchronously | function(node) | - | |
| loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] | |
| multiple | Allows selecting multiple treeNodes | boolean | false | |
| selectable | whether can be selected | boolean | true | |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - | |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| switcherIcon | customize collapse/expand icon of tree node | React.ReactElement | - | |
| showLine | Shows a connecting line | boolean | false | |
| treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array\<{ key, title, children, \[disabled, selectable] }> | - | |
| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.1.0 |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - | |
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - | |
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - | |
| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - | |
| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - | |
| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - | |
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - | |
| onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - | |
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - | |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
### TreeNode props

View File

@ -15,42 +15,43 @@ subtitle: 树形控件
### Tree props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoExpandParent | 是否自动展开父节点 | boolean | true |
| blockNode | 是否节点占据一行 | boolean | false |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
| checkedKeys | (受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key则子节点自动选中相应当子节点 key 都传入,父节点也自动选中。当设置`checkable`和`checkStrictly`,它是一个有`checked`和`halfChecked`属性的对象,并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
| checkStrictly | checkable 状态下节点选择完全受控(父子节点选中状态不再关联) | boolean | false |
| defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
| defaultExpandAll | 默认展开所有树节点 | boolean | false |
| defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] |
| defaultExpandParent | 默认展开父节点 | bool | true |
| defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] |
| disabled | 将树禁用 | bool | false |
| draggable | 设置节点可拖拽IE>8 | boolean | false |
| expandedKeys | (受控)展开指定的树节点 | string\[] | \[] |
| filterTreeNode | 按需筛选树节点(高亮),返回 true | function(node) | - |
| loadData | 异步加载数据 | function(node) | - |
| loadedKeys | (受控)已经加载的节点,需要配合 `loadData` 使用 | string\[] | \[] |
| multiple | 支持点选多个节点(节点本身) | boolean | false |
| selectable | 是否可选中 | boolean | true |
| selectedKeys | (受控)设置选中的树节点 | string\[] | - |
| showIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true需要自行定义图标相关样式 | boolean | false |
| switcherIcon | 自定义树节点的展开/折叠图标 | React.ReactElement | - |
| showLine | 是否展示连接线 | boolean | false |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - |
| onDragEnd | dragend 触发时调用 | function({event, node}) | - |
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
| onDragOver | dragover 触发时调用 | function({event, node}) | - |
| onDragStart | 开始拖拽时调用 | function({event, node}) | - |
| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
| onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - |
| onRightClick | 响应右键点击 | function({event, node}) | - |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点key 在整个树范围内唯一) | array\<{key, title, children, \[disabled, selectable]}> | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoExpandParent | 是否自动展开父节点 | boolean | true | |
| blockNode | 是否节点占据一行 | boolean | false | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |
| checkedKeys | (受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key则子节点自动选中相应当子节点 key 都传入,父节点也自动选中。当设置`checkable`和`checkStrictly`,它是一个有`checked`和`halfChecked`属性的对象,并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] | |
| checkStrictly | checkable 状态下节点选择完全受控(父子节点选中状态不再关联) | boolean | false | |
| defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] | |
| defaultExpandAll | 默认展开所有树节点 | boolean | false | |
| defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] | |
| defaultExpandParent | 默认展开父节点 | bool | true | |
| defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] | |
| disabled | 将树禁用 | bool | false | |
| draggable | 设置节点可拖拽IE>8 | boolean | false | |
| expandedKeys | (受控)展开指定的树节点 | string\[] | \[] | |
| filterTreeNode | 按需筛选树节点(高亮),返回 true | function(node) | - | |
| loadData | 异步加载数据 | function(node) | - | |
| loadedKeys | (受控)已经加载的节点,需要配合 `loadData` 使用 | string\[] | \[] | |
| multiple | 支持点选多个节点(节点本身) | boolean | false | |
| selectable | 是否可选中 | boolean | true | |
| selectedKeys | (受控)设置选中的树节点 | string\[] | - | |
| showIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true需要自行定义图标相关样式 | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | React.ReactElement | - | |
| showLine | 是否展示连接线 | boolean | false | |
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点key 在整个树范围内唯一) | array\<{key, title, children, \[disabled, selectable]}> | - | |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.1.0 |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | dragend 触发时调用 | function({event, node}) | - | |
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | |
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - | |
| onDragOver | dragover 触发时调用 | function({event, node}) | - | |
| onDragStart | 开始拖拽时调用 | function({event, node}) | - | |
| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - | |
| onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - | |
| onRightClick | 响应右键点击 | function({event, node}) | - | |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
### TreeNode props

View File

@ -119,15 +119,15 @@
"rc-progress": "~2.5.0",
"rc-rate": "~2.5.1",
"rc-resize-observer": "^0.1.0",
"rc-select": "~10.0.0",
"rc-select": "~10.1.0",
"rc-slider": "~9.2.1",
"rc-steps": "~3.5.0",
"rc-switch": "~1.9.0",
"rc-table": "~7.2.0",
"rc-tabs": "~10.0.0",
"rc-tooltip": "~4.0.0",
"rc-tree": "~3.0.0",
"rc-tree-select": "~3.0.0",
"rc-tree": "~3.1.0",
"rc-tree-select": "~3.1.0",
"rc-trigger": "~4.0.0",
"rc-upload": "~3.0.0",
"rc-util": "^4.20.0",