1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| import VirtualList from 'virtual-list';
<Select
value={value}
autoFocus
open={open}
onBlur={() => setOpen(false)}
onMouseEnter={() => setOpen(true)}
style={{minWidth: 200}}
dropdownRender={() => (
<div onMouseDown={(e) => e.preventDefault()}>
<div style={{minHeight: 200}}>
<VirtualList {...val} />{' '}
</div>
<small>
总数：{total} 已加载：{data.length}
</small>
</div>
)}
/>
// virtual-list 组件
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {List, AutoSizer, InfiniteLoader, CellMeasurer, CellMeasurerCache} from 'react-virtualized';
const RowCell = styled.div`
position: relative;
display: block;
overflow: hidden;
color: rgba(0, 0, 0, 0.65);
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
`;
const VirtualList = (props) => {
const cache = new CellMeasurerCache({
defaultHeight: 40,
minHeight: 0,
fixedWidth: true
});
const {total, data, handleChange, handleMore, optionText} = props;
function RowRenderer(opj) {
const {index, key, parent, style} = opj;
return (
<CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
<RowCell
style={style}
onClick={() => {
handleChange({index: index, item: data[index]});
}}
>
{optionText(data[index], index)}
</RowCell>
</CellMeasurer>
);
}
function handleHeight(height) {
return Math.min(data.length * cache.defaultHeight + 40, height);
}
return (
<AutoSizer style={{minHeight: 'max-content'}}>
{({width, height}) => {
return (
<InfiniteLoader
isRowLoaded={({index}) => {
return index < data.length;
}}
loadMoreRows={() => handleMore()}
rowCount={total}
threshold={2}
>
{({onRowsRendered, registerChild}) => {
return (
<List
height={handleHeight(height)}
onRowsRendered={onRowsRendered}
ref={registerChild}
rowCount={data.length}
rowHeight={cache.rowHeight}
deferredMeasurementCache={cache}
rowRenderer={RowRenderer}
width={width}
/>
);
}}
</InfiniteLoader>
);
}}
</AutoSizer>
);
};
VirtualList.propTypes = {
handleMore: PropTypes.func,
handleChange: PropTypes.func,
optionText: PropTypes.func,
data: PropTypes.array,
total: PropTypes.number
};
VirtualList.defaultProps = {
handleMore: () => {},
handleChange: () => {},
optionText: () => {},
data: [],
total: 0
};
export default VirtualList;
|
