mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
docs: tree-select supports onPopupScroll (#48636)
* docs: tree-select supports onPopupScroll props * docs: update demo * docs: update version * test: update snapshots * fix: update demo --------- Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
Wanpan
GitHub
parent
97b89138ad
commit
4020f658a8
@ -423,7 +423,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
@ -451,6 +451,126 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-switcher ant-select-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
|
||||
title="leaf3"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-title"
|
||||
>
|
||||
leaf3
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-switcher ant-select-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
|
||||
title="leaf4"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-title"
|
||||
>
|
||||
leaf4
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-switcher ant-select-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
|
||||
title="leaf5"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-title"
|
||||
>
|
||||
leaf5
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
|
||||
draggable="false"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-tree-switcher ant-select-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
|
||||
title="leaf6"
|
||||
>
|
||||
<span
|
||||
class="ant-select-tree-title"
|
||||
>
|
||||
leaf6
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-grabbed="false"
|
||||
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
|
||||
@ -527,7 +647,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
|
||||
<b
|
||||
style="color: rgb(0, 136, 204);"
|
||||
>
|
||||
leaf3
|
||||
leaf11
|
||||
</b>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import type { SyntheticEvent } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { TreeSelect } from 'antd';
|
||||
|
||||
@ -18,6 +19,22 @@ const treeData = [
|
||||
value: 'leaf2',
|
||||
title: 'leaf2',
|
||||
},
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: 'leaf3',
|
||||
},
|
||||
{
|
||||
value: 'leaf4',
|
||||
title: 'leaf4',
|
||||
},
|
||||
{
|
||||
value: 'leaf5',
|
||||
title: 'leaf5',
|
||||
},
|
||||
{
|
||||
value: 'leaf6',
|
||||
title: 'leaf6',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -25,8 +42,8 @@ const treeData = [
|
||||
title: 'parent 1-1',
|
||||
children: [
|
||||
{
|
||||
value: 'leaf3',
|
||||
title: <b style={{ color: '#08c' }}>leaf3</b>,
|
||||
value: 'leaf11',
|
||||
title: <b style={{ color: '#08c' }}>leaf11</b>,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -40,6 +57,10 @@ const App: React.FC = () => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const onPopupScroll = (e: SyntheticEvent) => {
|
||||
console.log('onPopupScroll', e);
|
||||
};
|
||||
|
||||
return (
|
||||
<TreeSelect
|
||||
showSearch
|
||||
@ -51,6 +72,7 @@ const App: React.FC = () => {
|
||||
treeDefaultExpandAll
|
||||
onChange={onChange}
|
||||
treeData={treeData}
|
||||
onPopupScroll={onPopupScroll}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -86,6 +86,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| 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) | - | |
|
||||
| onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - | |
|
||||
| onPopupScroll | Called when dropdown scrolls | (event: MouseEvent) => void | - | 5.17.0 |
|
||||
|
||||
### Tree Methods
|
||||
|
||||
|
||||
@ -87,6 +87,7 @@ demo:
|
||||
| onSearch | 文本框值变化时的回调 | function(value: string) | - | |
|
||||
| onSelect | 被选中时调用 | function(value, node, extra) | - | |
|
||||
| onTreeExpand | 展示节点时调用 | function(expandedKeys) | - | |
|
||||
| onPopupScroll | 下拉列表滚动时的回调 | (event: MouseEvent) => void | - | 5.17.0 |
|
||||
|
||||
### Tree 方法
|
||||
|
||||
|
||||
@ -159,7 +159,7 @@
|
||||
"rc-textarea": "~1.6.3",
|
||||
"rc-tooltip": "~6.2.0",
|
||||
"rc-tree": "~5.8.5",
|
||||
"rc-tree-select": "~5.19.0",
|
||||
"rc-tree-select": "~5.20.0",
|
||||
"rc-upload": "~4.5.2",
|
||||
"rc-util": "^5.39.1",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user