react-virtuoso 4.12.3 → 4.12.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -95
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +432 -486
- package/dist/index.mjs +2688 -3916
- package/package.json +30 -41
package/dist/index.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { default as default_2 } from 'react';
|
|
2
2
|
|
|
3
|
-
export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign |
|
|
3
|
+
export declare type CalculateViewLocation = (params: CalculateViewLocationParams) => IndexLocationWithAlign | null | number;
|
|
4
4
|
|
|
5
5
|
export declare interface CalculateViewLocationParams {
|
|
6
|
-
itemTop: number;
|
|
7
6
|
itemBottom: number;
|
|
8
|
-
|
|
9
|
-
viewportBottom: number;
|
|
7
|
+
itemTop: number;
|
|
10
8
|
locationParams: {
|
|
11
|
-
align?: '
|
|
9
|
+
align?: 'center' | 'end' | 'start';
|
|
12
10
|
behavior?: 'auto' | 'smooth';
|
|
13
11
|
} & ({
|
|
14
|
-
index: number;
|
|
15
|
-
} | {
|
|
16
12
|
groupIndex: number;
|
|
13
|
+
} | {
|
|
14
|
+
index: number;
|
|
17
15
|
});
|
|
16
|
+
viewportBottom: number;
|
|
17
|
+
viewportTop: number;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/**
|
|
@@ -22,72 +22,56 @@ export declare interface CalculateViewLocationParams {
|
|
|
22
22
|
*/
|
|
23
23
|
export declare interface Components<Data = unknown, Context = unknown> {
|
|
24
24
|
/**
|
|
25
|
-
* Set to render a
|
|
26
|
-
*
|
|
27
|
-
* The header remains above the top items and does not remain sticky.
|
|
25
|
+
* Set to render a custom UI when the list is empty.
|
|
28
26
|
*/
|
|
29
|
-
|
|
30
|
-
context?: Context;
|
|
31
|
-
}>;
|
|
27
|
+
EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
|
|
32
28
|
/**
|
|
33
29
|
* Set to render a component at the bottom of the list.
|
|
34
30
|
*/
|
|
35
|
-
Footer?: default_2.ComponentType<
|
|
36
|
-
context?: Context;
|
|
37
|
-
}>;
|
|
38
|
-
/**
|
|
39
|
-
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
|
|
40
|
-
*/
|
|
41
|
-
Item?: default_2.ComponentType<ItemProps<Data> & {
|
|
42
|
-
context?: Context;
|
|
43
|
-
}>;
|
|
31
|
+
Footer?: default_2.ComponentType<ContextProp<Context>>;
|
|
44
32
|
/**
|
|
45
33
|
* Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`.
|
|
46
34
|
*/
|
|
47
|
-
Group?: default_2.ComponentType<GroupProps &
|
|
48
|
-
context?: Context;
|
|
49
|
-
}>;
|
|
35
|
+
Group?: default_2.ComponentType<GroupProps & ContextProp<Context>>;
|
|
50
36
|
/**
|
|
51
|
-
* Set to
|
|
52
|
-
*
|
|
37
|
+
* Set to render a component at the top of the list.
|
|
38
|
+
*
|
|
39
|
+
* The header remains above the top items and does not remain sticky.
|
|
53
40
|
*/
|
|
54
|
-
|
|
55
|
-
context?: Context;
|
|
56
|
-
}>;
|
|
41
|
+
Header?: default_2.ComponentType<ContextProp<Context>>;
|
|
57
42
|
/**
|
|
58
|
-
* Set to customize the
|
|
59
|
-
* as the component passes its HTML attribute props to it.
|
|
43
|
+
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
|
|
60
44
|
*/
|
|
61
|
-
|
|
62
|
-
context?: Context;
|
|
63
|
-
}>;
|
|
45
|
+
Item?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
|
|
64
46
|
/**
|
|
65
47
|
* Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
|
|
66
48
|
*/
|
|
67
|
-
List?: default_2.ComponentType<ListProps &
|
|
68
|
-
context?: Context;
|
|
69
|
-
}>;
|
|
49
|
+
List?: default_2.ComponentType<ListProps & ContextProp<Context>>;
|
|
70
50
|
/**
|
|
71
|
-
* Set to
|
|
51
|
+
* Set to customize the outermost scrollable element. This should not be necessary in general,
|
|
52
|
+
* as the component passes its HTML attribute props to it.
|
|
72
53
|
*/
|
|
73
|
-
|
|
74
|
-
context?: Context;
|
|
75
|
-
}>;
|
|
54
|
+
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
|
|
76
55
|
/**
|
|
77
56
|
* Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
|
|
78
57
|
*/
|
|
79
|
-
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps &
|
|
80
|
-
|
|
81
|
-
|
|
58
|
+
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
|
|
59
|
+
/**
|
|
60
|
+
* Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div`
|
|
61
|
+
* or you want to set a custom z-index for the sticky position.
|
|
62
|
+
*/
|
|
63
|
+
TopItemList?: default_2.ComponentType<TopItemListProps & ContextProp<Context>>;
|
|
82
64
|
}
|
|
83
65
|
|
|
84
|
-
export declare
|
|
85
|
-
|
|
66
|
+
export declare type ComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
|
|
67
|
+
|
|
68
|
+
export declare interface ContextProp<C> {
|
|
69
|
+
context: C;
|
|
86
70
|
}
|
|
87
71
|
|
|
88
72
|
export declare interface ElementDimensions {
|
|
89
|
-
width: number;
|
|
90
73
|
height: number;
|
|
74
|
+
width: number;
|
|
91
75
|
}
|
|
92
76
|
|
|
93
77
|
/**
|
|
@@ -105,7 +89,7 @@ export declare interface FlatIndexLocationWithAlign extends LocationOptions {
|
|
|
105
89
|
/**
|
|
106
90
|
* The index of the item to scroll to.
|
|
107
91
|
*/
|
|
108
|
-
index:
|
|
92
|
+
index: 'LAST' | number;
|
|
109
93
|
}
|
|
110
94
|
|
|
111
95
|
export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
|
|
@@ -116,141 +100,110 @@ export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType
|
|
|
116
100
|
|
|
117
101
|
export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
|
|
118
102
|
|
|
119
|
-
export declare type FollowOutputScalarType =
|
|
103
|
+
export declare type FollowOutputScalarType = 'auto' | 'smooth' | boolean;
|
|
120
104
|
|
|
121
105
|
export declare interface Gap {
|
|
122
|
-
row: number;
|
|
123
106
|
column: number;
|
|
107
|
+
row: number;
|
|
124
108
|
}
|
|
125
109
|
|
|
126
110
|
export declare interface GridComponents<Context = any> {
|
|
127
111
|
/**
|
|
128
|
-
* Set to
|
|
112
|
+
* Set to render a component at the bottom of the list.
|
|
129
113
|
*/
|
|
130
|
-
|
|
131
|
-
context?: Context;
|
|
132
|
-
}>;
|
|
114
|
+
Footer?: default_2.ComponentType<ContextProp<Context>>;
|
|
133
115
|
/**
|
|
134
|
-
* Set to
|
|
135
|
-
*
|
|
116
|
+
* Set to render a component at the top of the list.
|
|
117
|
+
*
|
|
118
|
+
* The header remains above the top items and does not remain sticky.
|
|
136
119
|
*/
|
|
137
|
-
|
|
138
|
-
context?: Context;
|
|
139
|
-
}>;
|
|
120
|
+
Header?: default_2.ComponentType<ContextProp<Context>>;
|
|
140
121
|
/**
|
|
141
|
-
* Set to customize the
|
|
122
|
+
* Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
|
|
142
123
|
*/
|
|
143
|
-
|
|
144
|
-
context?: Context;
|
|
145
|
-
}>;
|
|
124
|
+
Item?: default_2.ComponentType<GridItemProps & ContextProp<Context>>;
|
|
146
125
|
/**
|
|
147
|
-
* Set to
|
|
148
|
-
*
|
|
149
|
-
* The header remains above the top items and does not remain sticky.
|
|
126
|
+
* Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
|
|
150
127
|
*/
|
|
151
|
-
|
|
152
|
-
context?: Context;
|
|
153
|
-
}>;
|
|
128
|
+
List?: default_2.ComponentType<GridListProps & ContextProp<Context>>;
|
|
154
129
|
/**
|
|
155
|
-
* Set to
|
|
130
|
+
* Set to customize the outermost scrollable element. This should not be necessary in general,
|
|
131
|
+
* as the component passes its HTML attribute props to it.
|
|
156
132
|
*/
|
|
157
|
-
|
|
158
|
-
context?: Context;
|
|
159
|
-
}>;
|
|
133
|
+
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
|
|
160
134
|
/**
|
|
161
135
|
* Set to render an item placeholder when the user scrolls fast.
|
|
162
136
|
* See the `scrollSeekConfiguration` property for more details.
|
|
163
137
|
*/
|
|
164
|
-
ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps &
|
|
165
|
-
context?: Context;
|
|
166
|
-
}>;
|
|
138
|
+
ScrollSeekPlaceholder?: default_2.ComponentType<GridScrollSeekPlaceholderProps & ContextProp<Context>>;
|
|
167
139
|
}
|
|
168
140
|
|
|
169
|
-
export declare
|
|
170
|
-
(index: number, item: D, context: C): default_2.Key;
|
|
171
|
-
}
|
|
141
|
+
export declare type GridComputeItemKey<D, C> = (index: number, item: D, context: C) => default_2.Key;
|
|
172
142
|
|
|
173
143
|
export declare type GridIndexLocation = FlatIndexLocationWithAlign | number;
|
|
174
144
|
|
|
175
145
|
export declare interface GridItem<D> {
|
|
176
|
-
index: number;
|
|
177
146
|
data?: D;
|
|
147
|
+
index: number;
|
|
178
148
|
}
|
|
179
149
|
|
|
180
|
-
export declare
|
|
181
|
-
(index: number, data: D, context: C): default_2.ReactNode;
|
|
182
|
-
}
|
|
150
|
+
export declare type GridItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
|
|
183
151
|
|
|
184
152
|
/**
|
|
185
153
|
* Passed to the Components.Item custom component
|
|
186
154
|
*/
|
|
187
|
-
export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, '
|
|
155
|
+
export declare type GridItemProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
188
156
|
'data-index': number;
|
|
189
|
-
}
|
|
157
|
+
};
|
|
190
158
|
|
|
191
159
|
/**
|
|
192
160
|
* Passed to the Components.List custom component
|
|
193
161
|
*/
|
|
194
|
-
export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, '
|
|
162
|
+
export declare type GridListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
195
163
|
'data-testid': string;
|
|
196
|
-
}
|
|
164
|
+
};
|
|
197
165
|
|
|
198
|
-
export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, '
|
|
166
|
+
export declare type GridRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
|
|
199
167
|
|
|
200
168
|
/**
|
|
201
169
|
* Passed to the GridComponents.ScrollSeekPlaceholder custom component
|
|
202
170
|
*/
|
|
203
171
|
export declare interface GridScrollSeekPlaceholderProps {
|
|
204
|
-
index: number;
|
|
205
172
|
height: number;
|
|
173
|
+
index: number;
|
|
206
174
|
width: number;
|
|
207
175
|
}
|
|
208
176
|
|
|
209
177
|
export declare interface GridStateSnapshot {
|
|
210
|
-
viewport: ElementDimensions;
|
|
211
|
-
item: ElementDimensions;
|
|
212
178
|
gap: Gap;
|
|
179
|
+
item: ElementDimensions;
|
|
213
180
|
scrollTop: number;
|
|
181
|
+
viewport: ElementDimensions;
|
|
214
182
|
}
|
|
215
183
|
|
|
216
|
-
export declare
|
|
217
|
-
(index: number, context: C): default_2.ReactNode;
|
|
218
|
-
}
|
|
184
|
+
export declare type GroupContent<C> = (index: number, context: C) => default_2.ReactNode;
|
|
219
185
|
|
|
220
186
|
export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions {
|
|
221
187
|
groupIndex: number;
|
|
222
188
|
}
|
|
223
189
|
|
|
224
190
|
export declare const GroupedVirtuoso: <ItemData = any, Context = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
|
|
225
|
-
ref?: default_2.Ref<GroupedVirtuosoHandle
|
|
191
|
+
ref?: default_2.Ref<GroupedVirtuosoHandle>;
|
|
226
192
|
}) => default_2.ReactElement;
|
|
227
193
|
|
|
228
194
|
export declare interface GroupedVirtuosoHandle {
|
|
229
|
-
scrollToIndex(location: number | IndexLocationWithAlign): void;
|
|
230
|
-
scrollIntoView(location: number | ScrollIntoViewLocation): void;
|
|
231
|
-
scrollTo(location: ScrollToOptions): void;
|
|
232
|
-
scrollBy(location: ScrollToOptions): void;
|
|
233
195
|
autoscrollToBottom(): void;
|
|
234
196
|
/**
|
|
235
197
|
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
236
198
|
*/
|
|
237
199
|
getState(stateCb: StateCallback): void;
|
|
200
|
+
scrollBy(location: ScrollToOptions): void;
|
|
201
|
+
scrollIntoView(location: number | ScrollIntoViewLocation): void;
|
|
202
|
+
scrollTo(location: ScrollToOptions): void;
|
|
203
|
+
scrollToIndex(location: IndexLocationWithAlign | number): void;
|
|
238
204
|
}
|
|
239
205
|
|
|
240
|
-
export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, '
|
|
241
|
-
/**
|
|
242
|
-
* Specifies the amount of items in each group (and, actually, how many groups are there).
|
|
243
|
-
* For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
|
|
244
|
-
*/
|
|
245
|
-
groupCounts?: number[];
|
|
246
|
-
/**
|
|
247
|
-
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
|
|
248
|
-
*/
|
|
249
|
-
groupContent?: GroupContent<C>;
|
|
250
|
-
/**
|
|
251
|
-
* Specifies how each each item gets rendered.
|
|
252
|
-
*/
|
|
253
|
-
itemContent?: GroupItemContent<D, C>;
|
|
206
|
+
export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'itemContent' | 'totalCount'> {
|
|
254
207
|
/**
|
|
255
208
|
* Use when implementing inverse infinite scrolling, decrease the value this property
|
|
256
209
|
* in combination with a change in `groupCounts` to prepend groups items to the top of the list.
|
|
@@ -265,6 +218,19 @@ export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D
|
|
|
265
218
|
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
|
|
266
219
|
*/
|
|
267
220
|
firstItemIndex?: number;
|
|
221
|
+
/**
|
|
222
|
+
* Specifies how each each group header gets rendered. The callback receives the zero-based index of the group.
|
|
223
|
+
*/
|
|
224
|
+
groupContent?: GroupContent<C>;
|
|
225
|
+
/**
|
|
226
|
+
* Specifies the amount of items in each group (and, actually, how many groups are there).
|
|
227
|
+
* For example, passing [20, 30] will display 2 groups with 20 and 30 items each.
|
|
228
|
+
*/
|
|
229
|
+
groupCounts?: number[];
|
|
230
|
+
/**
|
|
231
|
+
* Specifies how each each item gets rendered.
|
|
232
|
+
*/
|
|
233
|
+
itemContent?: GroupItemContent<D, C>;
|
|
268
234
|
}
|
|
269
235
|
|
|
270
236
|
export declare interface GroupIndexLocationWithAlign extends LocationOptions {
|
|
@@ -275,15 +241,13 @@ export declare interface GroupIndexLocationWithAlign extends LocationOptions {
|
|
|
275
241
|
}
|
|
276
242
|
|
|
277
243
|
export declare interface GroupItem<D> extends Item<D> {
|
|
278
|
-
type: 'group';
|
|
279
244
|
originalIndex?: number;
|
|
245
|
+
type: 'group';
|
|
280
246
|
}
|
|
281
247
|
|
|
282
|
-
export declare
|
|
283
|
-
(index: number, groupIndex: number, data: D, context: C): default_2.ReactNode;
|
|
284
|
-
}
|
|
248
|
+
export declare type GroupItemContent<D, C> = (index: number, groupIndex: number, data: D, context: C) => default_2.ReactNode;
|
|
285
249
|
|
|
286
|
-
export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, '
|
|
250
|
+
export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
|
|
287
251
|
'data-index': number;
|
|
288
252
|
'data-item-index': number;
|
|
289
253
|
'data-known-size': number;
|
|
@@ -292,49 +256,47 @@ export declare type GroupProps = Pick<default_2.ComponentProps<'div'>, 'style' |
|
|
|
292
256
|
export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign;
|
|
293
257
|
|
|
294
258
|
export declare interface Item<D> {
|
|
259
|
+
data?: D;
|
|
295
260
|
index: number;
|
|
296
261
|
offset: number;
|
|
297
262
|
size: number;
|
|
298
|
-
data?: D;
|
|
299
263
|
}
|
|
300
264
|
|
|
301
|
-
export declare
|
|
302
|
-
(index: number, data: D, context: C): default_2.ReactNode;
|
|
303
|
-
}
|
|
265
|
+
export declare type ItemContent<D, C> = (index: number, data: D, context: C) => default_2.ReactNode;
|
|
304
266
|
|
|
305
|
-
export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, '
|
|
267
|
+
export declare type ItemProps<D> = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & {
|
|
306
268
|
'data-index': number;
|
|
307
|
-
'data-item-index': number;
|
|
308
269
|
'data-item-group-index'?: number;
|
|
270
|
+
'data-item-index': number;
|
|
309
271
|
'data-known-size': number;
|
|
310
272
|
item: D;
|
|
311
273
|
};
|
|
312
274
|
|
|
313
|
-
export declare type ListItem<D> =
|
|
275
|
+
export declare type ListItem<D> = GroupItem<D> | RecordItem<D>;
|
|
314
276
|
|
|
315
277
|
/**
|
|
316
278
|
* Passed to the Components.List custom component
|
|
317
279
|
*/
|
|
318
|
-
export declare type ListProps = Pick<default_2.ComponentProps<'div'>, '
|
|
280
|
+
export declare type ListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
319
281
|
'data-testid': string;
|
|
320
|
-
}
|
|
282
|
+
};
|
|
321
283
|
|
|
322
284
|
export declare interface ListRange {
|
|
323
|
-
startIndex: number;
|
|
324
285
|
endIndex: number;
|
|
286
|
+
startIndex: number;
|
|
325
287
|
}
|
|
326
288
|
|
|
327
|
-
export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, '
|
|
289
|
+
export declare type ListRootProps = Omit<default_2.HTMLProps<HTMLDivElement>, 'data' | 'ref'>;
|
|
328
290
|
|
|
329
291
|
export declare interface LocationOptions {
|
|
330
292
|
/**
|
|
331
293
|
* How to position the item in the viewport.
|
|
332
294
|
*/
|
|
333
|
-
align?: '
|
|
295
|
+
align?: 'center' | 'end' | 'start';
|
|
334
296
|
/**
|
|
335
297
|
* Set 'smooth' to have an animated transition to the specified location.
|
|
336
298
|
*/
|
|
337
|
-
behavior?: '
|
|
299
|
+
behavior?: 'auto' | 'smooth';
|
|
338
300
|
/**
|
|
339
301
|
* The offset to scroll.
|
|
340
302
|
*/
|
|
@@ -349,10 +311,10 @@ export declare enum LogLevel {
|
|
|
349
311
|
}
|
|
350
312
|
|
|
351
313
|
export declare interface RecordItem<D> extends Item<D> {
|
|
352
|
-
|
|
314
|
+
data?: D;
|
|
353
315
|
groupIndex?: number;
|
|
354
316
|
originalIndex?: number;
|
|
355
|
-
|
|
317
|
+
type?: undefined;
|
|
356
318
|
}
|
|
357
319
|
|
|
358
320
|
export declare interface ScrollContainerState {
|
|
@@ -364,20 +326,16 @@ export declare interface ScrollContainerState {
|
|
|
364
326
|
/**
|
|
365
327
|
* Passed to the Components.Scroller custom component
|
|
366
328
|
*/
|
|
367
|
-
export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, '
|
|
329
|
+
export declare type ScrollerProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style' | 'tabIndex'> & default_2.RefAttributes<HTMLDivElement> & {
|
|
368
330
|
'data-testid'?: string;
|
|
369
331
|
'data-virtuoso-scroller'?: boolean;
|
|
370
|
-
}
|
|
332
|
+
};
|
|
371
333
|
|
|
372
334
|
export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation;
|
|
373
335
|
|
|
374
336
|
export declare interface ScrollIntoViewLocationOptions {
|
|
375
|
-
align?: '
|
|
337
|
+
align?: 'center' | 'end' | 'start';
|
|
376
338
|
behavior?: 'auto' | 'smooth';
|
|
377
|
-
/**
|
|
378
|
-
* Will be called when the scroll is done, or immediately if no scroll is needed.
|
|
379
|
-
*/
|
|
380
|
-
done?: () => void;
|
|
381
339
|
/**
|
|
382
340
|
* Use this function to fine-tune the scrollIntoView behavior.
|
|
383
341
|
* The function receives the item's top and bottom position in the viewport, and the viewport top/bottom.
|
|
@@ -402,17 +360,21 @@ export declare interface ScrollIntoViewLocationOptions {
|
|
|
402
360
|
*```
|
|
403
361
|
*/
|
|
404
362
|
calculateViewLocation?: CalculateViewLocation;
|
|
363
|
+
/**
|
|
364
|
+
* Will be called when the scroll is done, or immediately if no scroll is needed.
|
|
365
|
+
*/
|
|
366
|
+
done?: () => void;
|
|
405
367
|
}
|
|
406
368
|
|
|
407
369
|
export declare interface ScrollSeekConfiguration {
|
|
408
|
-
/**
|
|
409
|
-
* Callback to determine if the list should enter "scroll seek" mode.
|
|
410
|
-
*/
|
|
411
|
-
enter: ScrollSeekToggle;
|
|
412
370
|
/**
|
|
413
371
|
* called during scrolling in scroll seek mode - use to display a hint where the list is.
|
|
414
372
|
*/
|
|
415
373
|
change?: (velocity: number, range: ListRange) => void;
|
|
374
|
+
/**
|
|
375
|
+
* Callback to determine if the list should enter "scroll seek" mode.
|
|
376
|
+
*/
|
|
377
|
+
enter: ScrollSeekToggle;
|
|
416
378
|
/**
|
|
417
379
|
* Callback to determine if the list should exit "scroll seek" mode.
|
|
418
380
|
*/
|
|
@@ -423,23 +385,21 @@ export declare interface ScrollSeekConfiguration {
|
|
|
423
385
|
* Passed to the Components.ScrollSeekPlaceholder custom component
|
|
424
386
|
*/
|
|
425
387
|
export declare interface ScrollSeekPlaceholderProps {
|
|
426
|
-
index: number;
|
|
427
|
-
height: number;
|
|
428
388
|
groupIndex?: number;
|
|
389
|
+
height: number;
|
|
390
|
+
index: number;
|
|
429
391
|
type: 'group' | 'item';
|
|
430
392
|
}
|
|
431
393
|
|
|
432
|
-
export declare
|
|
433
|
-
(velocity: number, range: ListRange): boolean;
|
|
434
|
-
}
|
|
394
|
+
export declare type ScrollSeekToggle = (velocity: number, range: ListRange) => boolean;
|
|
435
395
|
|
|
436
396
|
/** Calculates the height of `el`, which will be the `Item` element in the DOM. */
|
|
437
397
|
export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
|
|
438
398
|
|
|
439
399
|
export declare interface SizeRange {
|
|
440
|
-
startIndex: number;
|
|
441
400
|
endIndex: number;
|
|
442
401
|
size: number;
|
|
402
|
+
startIndex: number;
|
|
443
403
|
}
|
|
444
404
|
|
|
445
405
|
export declare type StateCallback = (state: StateSnapshot) => void;
|
|
@@ -452,160 +412,113 @@ export declare interface StateSnapshot {
|
|
|
452
412
|
/**
|
|
453
413
|
* Passed to the Components.TableBody custom component
|
|
454
414
|
*/
|
|
455
|
-
export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, '
|
|
415
|
+
export declare type TableBodyProps = Pick<default_2.ComponentProps<'tbody'>, 'children' | 'className' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & {
|
|
456
416
|
'data-testid': string;
|
|
457
|
-
}
|
|
417
|
+
};
|
|
458
418
|
|
|
459
419
|
/**
|
|
460
420
|
* Customize the TableVirtuoso rendering by passing a set of custom components.
|
|
461
421
|
*/
|
|
462
422
|
export declare interface TableComponents<Data = unknown, Context = unknown> {
|
|
463
423
|
/**
|
|
464
|
-
* Set to
|
|
465
|
-
*
|
|
424
|
+
* Set to render a custom UI when the list is empty.
|
|
466
425
|
*/
|
|
467
|
-
|
|
468
|
-
context?: Context;
|
|
469
|
-
}>;
|
|
426
|
+
EmptyPlaceholder?: default_2.ComponentType<ContextProp<Context>>;
|
|
470
427
|
/**
|
|
471
|
-
* Set to render
|
|
472
|
-
*
|
|
428
|
+
* Set to render an empty item placeholder.
|
|
473
429
|
*/
|
|
474
|
-
|
|
475
|
-
context?: Context;
|
|
476
|
-
} & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
430
|
+
FillerRow?: default_2.ComponentType<FillerRowProps & ContextProp<Context>>;
|
|
477
431
|
/**
|
|
478
|
-
* Set to
|
|
432
|
+
* Set to customize the outermost scrollable element. This should not be necessary in general,
|
|
433
|
+
* as the component passes its HTML attribute props to it.
|
|
479
434
|
*/
|
|
480
|
-
|
|
481
|
-
context?: Context;
|
|
482
|
-
} & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
435
|
+
Scroller?: default_2.ComponentType<ScrollerProps & ContextProp<Context>>;
|
|
483
436
|
/**
|
|
484
|
-
* Set to
|
|
437
|
+
* Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details.
|
|
485
438
|
*/
|
|
486
|
-
|
|
487
|
-
context?: Context;
|
|
488
|
-
}>;
|
|
439
|
+
ScrollSeekPlaceholder?: default_2.ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>;
|
|
489
440
|
/**
|
|
490
|
-
* Set to customize the
|
|
491
|
-
*
|
|
441
|
+
* Set to customize the wrapping `table` element.
|
|
442
|
+
*
|
|
492
443
|
*/
|
|
493
|
-
|
|
494
|
-
context?: Context;
|
|
495
|
-
}>;
|
|
444
|
+
Table?: default_2.ComponentType<TableProps & ContextProp<Context>>;
|
|
496
445
|
/**
|
|
497
446
|
* Set to customize the items wrapper. Default is `tbody`.
|
|
498
447
|
*/
|
|
499
|
-
TableBody?: default_2.ComponentType<TableBodyProps &
|
|
500
|
-
context?: Context;
|
|
501
|
-
}>;
|
|
448
|
+
TableBody?: default_2.ComponentType<TableBodyProps & ContextProp<Context>>;
|
|
502
449
|
/**
|
|
503
|
-
* Set to render a
|
|
450
|
+
* Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents
|
|
504
451
|
*/
|
|
505
|
-
|
|
506
|
-
context?: Context;
|
|
507
|
-
}>;
|
|
452
|
+
TableFoot?: default_2.ComponentType<Pick<default_2.ComponentProps<'tfoot'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
|
|
508
453
|
/**
|
|
509
|
-
* Set to render
|
|
454
|
+
* Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderContent]] to set the contents
|
|
455
|
+
*
|
|
510
456
|
*/
|
|
511
|
-
|
|
512
|
-
context?: Context;
|
|
513
|
-
}>;
|
|
457
|
+
TableHead?: default_2.ComponentType<Pick<default_2.ComponentProps<'thead'>, 'children' | 'style'> & default_2.RefAttributes<HTMLTableSectionElement> & ContextProp<Context>>;
|
|
514
458
|
/**
|
|
515
|
-
* Set to
|
|
459
|
+
* Set to customize the item wrapping element. Default is `tr`.
|
|
516
460
|
*/
|
|
517
|
-
|
|
518
|
-
context?: Context;
|
|
519
|
-
}>;
|
|
461
|
+
TableRow?: default_2.ComponentType<ItemProps<Data> & ContextProp<Context>>;
|
|
520
462
|
}
|
|
521
463
|
|
|
522
|
-
export declare type TableProps = Pick<default_2.ComponentProps<'table'>, '
|
|
464
|
+
export declare type TableProps = Pick<default_2.ComponentProps<'table'>, 'children' | 'style'>;
|
|
523
465
|
|
|
524
|
-
export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, '
|
|
466
|
+
export declare type TableRootProps = Omit<default_2.HTMLProps<HTMLTableElement>, 'data' | 'ref'>;
|
|
525
467
|
|
|
526
468
|
export declare const TableVirtuoso: <ItemData = any, Context = any>(props: TableVirtuosoProps<ItemData, Context> & {
|
|
527
|
-
ref?: default_2.Ref<TableVirtuosoHandle
|
|
469
|
+
ref?: default_2.Ref<TableVirtuosoHandle>;
|
|
528
470
|
}) => default_2.ReactElement;
|
|
529
471
|
|
|
530
472
|
export declare interface TableVirtuosoHandle {
|
|
531
|
-
scrollIntoView(location: number | FlatScrollIntoViewLocation): void;
|
|
532
|
-
scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
|
|
533
|
-
scrollTo(location: ScrollToOptions): void;
|
|
534
|
-
scrollBy(location: ScrollToOptions): void;
|
|
535
473
|
/**
|
|
536
474
|
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
537
475
|
*/
|
|
538
476
|
getState(stateCb: StateCallback): void;
|
|
477
|
+
scrollBy(location: ScrollToOptions): void;
|
|
478
|
+
scrollIntoView(location: FlatScrollIntoViewLocation | number): void;
|
|
479
|
+
scrollTo(location: ScrollToOptions): void;
|
|
480
|
+
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
|
|
539
481
|
}
|
|
540
482
|
|
|
541
483
|
export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag'> {
|
|
542
484
|
/**
|
|
543
|
-
*
|
|
544
|
-
|
|
545
|
-
components?: TableComponents<D, C>;
|
|
546
|
-
/**
|
|
547
|
-
* Set the contents of the table header.
|
|
548
|
-
*/
|
|
549
|
-
fixedHeaderContent?: FixedHeaderContent;
|
|
550
|
-
/**
|
|
551
|
-
* Set the contents of the table footer.
|
|
552
|
-
*/
|
|
553
|
-
fixedFooterContent?: FixedFooterContent;
|
|
554
|
-
/**
|
|
555
|
-
* Set the amount of items to remain fixed at the top of the table.
|
|
556
|
-
*/
|
|
557
|
-
topItemCount?: number;
|
|
558
|
-
/**
|
|
559
|
-
* The total amount of items to be rendered.
|
|
485
|
+
* Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
|
|
486
|
+
* Use `followOutput` property to keep the list aligned when new items are appended.
|
|
560
487
|
*/
|
|
561
|
-
|
|
488
|
+
alignToBottom?: boolean;
|
|
562
489
|
/**
|
|
563
|
-
*
|
|
490
|
+
* Called with true / false when the list has reached the bottom / gets scrolled up.
|
|
491
|
+
* Can be used to load newer items, like `tail -f`.
|
|
564
492
|
*/
|
|
565
|
-
|
|
493
|
+
atBottomStateChange?: (atBottom: boolean) => void;
|
|
566
494
|
/**
|
|
567
|
-
*
|
|
568
|
-
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
569
|
-
* Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
|
|
570
|
-
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
|
|
495
|
+
* By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
|
|
571
496
|
*/
|
|
572
|
-
|
|
573
|
-
main: number;
|
|
574
|
-
reverse: number;
|
|
575
|
-
};
|
|
497
|
+
atBottomThreshold?: number;
|
|
576
498
|
/**
|
|
577
|
-
*
|
|
578
|
-
* The property causes the component to render more items than the necessary, but can help with slow loading content.
|
|
579
|
-
* Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
|
|
499
|
+
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
|
|
580
500
|
*/
|
|
581
|
-
|
|
582
|
-
top: number;
|
|
583
|
-
bottom: number;
|
|
584
|
-
};
|
|
501
|
+
atTopStateChange?: (atTop: boolean) => void;
|
|
585
502
|
/**
|
|
586
|
-
*
|
|
587
|
-
* Pass in an object to achieve additional effects similar to `scrollToIndex`.
|
|
503
|
+
* By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
|
|
588
504
|
*/
|
|
589
|
-
|
|
505
|
+
atTopThreshold?: number;
|
|
590
506
|
/**
|
|
591
|
-
*
|
|
592
|
-
* Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
|
|
593
|
-
* If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
|
|
507
|
+
* Use the `components` property for advanced customization of the elements rendered by the table.
|
|
594
508
|
*/
|
|
595
|
-
|
|
509
|
+
components?: TableComponents<D, C>;
|
|
596
510
|
/**
|
|
597
|
-
*
|
|
598
|
-
* regardless of the container / item size.
|
|
511
|
+
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
599
512
|
*/
|
|
600
|
-
|
|
513
|
+
computeItemKey?: ComputeItemKey<D, C>;
|
|
601
514
|
/**
|
|
602
|
-
*
|
|
515
|
+
* Pass a reference to a scrollable parent element, so that the table won't wrap in its own.
|
|
603
516
|
*/
|
|
604
|
-
|
|
517
|
+
customScrollParent?: HTMLElement;
|
|
605
518
|
/**
|
|
606
|
-
* If
|
|
519
|
+
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
607
520
|
*/
|
|
608
|
-
|
|
521
|
+
data?: readonly D[];
|
|
609
522
|
/**
|
|
610
523
|
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
|
|
611
524
|
*
|
|
@@ -617,25 +530,33 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
617
530
|
*/
|
|
618
531
|
defaultItemHeight?: number;
|
|
619
532
|
/**
|
|
620
|
-
*
|
|
533
|
+
* Gets called when the user scrolls to the end of the list.
|
|
534
|
+
* Receives the last item index as an argument. Can be used to implement endless scrolling.
|
|
535
|
+
*/
|
|
536
|
+
endReached?: (index: number) => void;
|
|
537
|
+
/**
|
|
538
|
+
* Use when implementing inverse infinite scrolling - decrease the value this property
|
|
539
|
+
* in combination with `data` or `totalCount` to prepend items to the top of the list.
|
|
621
540
|
*
|
|
622
|
-
*
|
|
541
|
+
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
|
|
623
542
|
*/
|
|
624
|
-
|
|
543
|
+
firstItemIndex?: number;
|
|
544
|
+
/**
|
|
545
|
+
* Set the contents of the table footer.
|
|
546
|
+
*/
|
|
547
|
+
fixedFooterContent?: FixedFooterContent;
|
|
548
|
+
/**
|
|
549
|
+
* Set the contents of the table header.
|
|
550
|
+
*/
|
|
551
|
+
fixedHeaderContent?: FixedHeaderContent;
|
|
625
552
|
/**
|
|
626
553
|
* Can be used to improve performance if the rendered items are of known size.
|
|
627
554
|
* Setting it causes the component to skip item measurements.
|
|
628
555
|
*/
|
|
629
556
|
fixedItemHeight?: number;
|
|
630
557
|
/**
|
|
631
|
-
*
|
|
632
|
-
*
|
|
633
|
-
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
634
|
-
*/
|
|
635
|
-
scrollSeekConfiguration?: ScrollSeekConfiguration | false;
|
|
636
|
-
/**
|
|
637
|
-
* If set to `true`, the list automatically scrolls to bottom if the total count is changed.
|
|
638
|
-
* Set to `"smooth"` for an animated scrolling.
|
|
558
|
+
* If set to `true`, the list automatically scrolls to bottom if the total count is changed.
|
|
559
|
+
* Set to `"smooth"` for an animated scrolling.
|
|
639
560
|
*
|
|
640
561
|
* By default, `followOutput` scrolls down only if the list is already at the bottom.
|
|
641
562
|
* To implement an arbitrary logic behind that, pass a function:
|
|
@@ -653,140 +574,160 @@ export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D,
|
|
|
653
574
|
*/
|
|
654
575
|
followOutput?: FollowOutput;
|
|
655
576
|
/**
|
|
656
|
-
*
|
|
657
|
-
*
|
|
658
|
-
*
|
|
659
|
-
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
|
|
660
|
-
*/
|
|
661
|
-
firstItemIndex?: number;
|
|
662
|
-
/**
|
|
663
|
-
* Called when the list starts/stops scrolling.
|
|
577
|
+
* Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
|
|
578
|
+
* The property causes the component to render more items than the necessary, but can help with slow loading content.
|
|
579
|
+
* Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
|
|
664
580
|
*/
|
|
665
|
-
|
|
581
|
+
increaseViewportBy?: number | {
|
|
582
|
+
bottom: number;
|
|
583
|
+
top: number;
|
|
584
|
+
};
|
|
666
585
|
/**
|
|
667
|
-
*
|
|
668
|
-
*
|
|
586
|
+
* Use for server-side rendering - if set, the list will render the specified amount of items
|
|
587
|
+
* regardless of the container / item size.
|
|
669
588
|
*/
|
|
670
|
-
|
|
589
|
+
initialItemCount?: number;
|
|
671
590
|
/**
|
|
672
|
-
*
|
|
591
|
+
* Set this value to offset the initial location of the list.
|
|
592
|
+
* Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
|
|
593
|
+
* If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
|
|
673
594
|
*/
|
|
674
|
-
|
|
595
|
+
initialScrollTop?: number;
|
|
675
596
|
/**
|
|
676
|
-
*
|
|
597
|
+
* Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
|
|
598
|
+
* Pass in an object to achieve additional effects similar to `scrollToIndex`.
|
|
677
599
|
*/
|
|
678
|
-
|
|
600
|
+
initialTopMostItemIndex?: IndexLocationWithAlign | number;
|
|
679
601
|
/**
|
|
680
|
-
* Called
|
|
681
|
-
* Can be used to load newer items, like `tail -f`.
|
|
602
|
+
* Called when the list starts/stops scrolling.
|
|
682
603
|
*/
|
|
683
|
-
|
|
604
|
+
isScrolling?: (isScrolling: boolean) => void;
|
|
684
605
|
/**
|
|
685
|
-
*
|
|
606
|
+
* Set the callback to specify the contents of the item.
|
|
686
607
|
*/
|
|
687
|
-
|
|
608
|
+
itemContent?: ItemContent<D, C>;
|
|
688
609
|
/**
|
|
689
|
-
*
|
|
610
|
+
* Allows customizing the height/width calculation of `Item` elements.
|
|
611
|
+
*
|
|
612
|
+
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
|
|
690
613
|
*/
|
|
691
|
-
|
|
614
|
+
itemSize?: SizeFunction;
|
|
692
615
|
/**
|
|
693
616
|
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
694
617
|
*/
|
|
695
618
|
itemsRendered?: (items: ListItem<D>[]) => void;
|
|
696
619
|
/**
|
|
697
|
-
*
|
|
698
|
-
*
|
|
620
|
+
* Set the overscan property to make the component "chunk" the rendering of new items on scroll.
|
|
621
|
+
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
622
|
+
* Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
|
|
623
|
+
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`).
|
|
699
624
|
*/
|
|
700
|
-
|
|
625
|
+
overscan?: number | {
|
|
626
|
+
main: number;
|
|
627
|
+
reverse: number;
|
|
628
|
+
};
|
|
701
629
|
/**
|
|
702
|
-
*
|
|
630
|
+
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
703
631
|
*/
|
|
704
|
-
|
|
632
|
+
rangeChanged?: (range: ListRange) => void;
|
|
705
633
|
/**
|
|
706
|
-
*
|
|
634
|
+
* pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
|
|
635
|
+
* Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
|
|
636
|
+
* This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
|
|
707
637
|
*/
|
|
708
|
-
|
|
638
|
+
restoreStateFrom?: StateSnapshot;
|
|
709
639
|
/**
|
|
710
640
|
* Provides access to the root DOM element
|
|
711
641
|
*/
|
|
712
|
-
scrollerRef?: (ref: HTMLElement |
|
|
642
|
+
scrollerRef?: (ref: HTMLElement | null | Window) => any;
|
|
713
643
|
/**
|
|
714
|
-
*
|
|
644
|
+
* Use to display placeholders if the user scrolls fast through the list.
|
|
645
|
+
*
|
|
646
|
+
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
715
647
|
*/
|
|
716
|
-
|
|
648
|
+
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
|
|
717
649
|
/**
|
|
718
|
-
*
|
|
650
|
+
* Called when the user scrolls to the start of the list.
|
|
719
651
|
*/
|
|
720
|
-
|
|
652
|
+
startReached?: (index: number) => void;
|
|
721
653
|
/**
|
|
722
|
-
*
|
|
723
|
-
* Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
|
|
724
|
-
* This is useful when you want to keep the list state when the component is unmounted and remounted, for example when navigating to a different page.
|
|
654
|
+
* Set the amount of items to remain fixed at the top of the table.
|
|
725
655
|
*/
|
|
726
|
-
|
|
656
|
+
topItemCount?: number;
|
|
657
|
+
/**
|
|
658
|
+
* The total amount of items to be rendered.
|
|
659
|
+
*/
|
|
660
|
+
totalCount?: number;
|
|
661
|
+
/**
|
|
662
|
+
* Called when the total list height is changed due to new items or viewport resize.
|
|
663
|
+
*/
|
|
664
|
+
totalListHeightChanged?: (height: number) => void;
|
|
665
|
+
/**
|
|
666
|
+
* Uses the document scroller rather than wrapping the list in its own.
|
|
667
|
+
*/
|
|
668
|
+
useWindowScroll?: boolean;
|
|
727
669
|
}
|
|
728
670
|
|
|
729
|
-
export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, '
|
|
671
|
+
export declare type TopItemListProps = Pick<default_2.ComponentProps<'div'>, 'children' | 'style'>;
|
|
730
672
|
|
|
731
673
|
export declare const Virtuoso: <ItemData = any, Context = any>(props: VirtuosoProps<ItemData, Context> & {
|
|
732
|
-
ref?: default_2.Ref<VirtuosoHandle
|
|
674
|
+
ref?: default_2.Ref<VirtuosoHandle>;
|
|
733
675
|
}) => default_2.ReactElement;
|
|
734
676
|
|
|
735
677
|
export declare const VirtuosoGrid: <ItemData = any, Context = any>(props: VirtuosoGridProps<ItemData, Context> & {
|
|
736
|
-
ref?: default_2.Ref<VirtuosoGridHandle
|
|
678
|
+
ref?: default_2.Ref<VirtuosoGridHandle>;
|
|
737
679
|
}) => default_2.ReactElement;
|
|
738
680
|
|
|
739
681
|
export declare interface VirtuosoGridHandle {
|
|
740
|
-
scrollToIndex(location: GridIndexLocation): void;
|
|
741
|
-
scrollTo(location: ScrollToOptions): void;
|
|
742
682
|
scrollBy(location: ScrollToOptions): void;
|
|
683
|
+
scrollTo(location: ScrollToOptions): void;
|
|
684
|
+
scrollToIndex(location: GridIndexLocation): void;
|
|
743
685
|
}
|
|
744
686
|
|
|
745
687
|
export declare const VirtuosoGridMockContext: default_2.Context<VirtuosoGridMockContextValue | undefined>;
|
|
746
688
|
|
|
747
689
|
export declare interface VirtuosoGridMockContextValue {
|
|
748
|
-
viewportHeight: number;
|
|
749
|
-
viewportWidth: number;
|
|
750
690
|
itemHeight: number;
|
|
751
691
|
itemWidth: number;
|
|
692
|
+
viewportHeight: number;
|
|
693
|
+
viewportWidth: number;
|
|
752
694
|
}
|
|
753
695
|
|
|
754
696
|
export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps {
|
|
755
697
|
/**
|
|
756
|
-
*
|
|
698
|
+
* Called with true / false when the list has reached the bottom / gets scrolled up.
|
|
699
|
+
* Can be used to load newer items, like `tail -f`.
|
|
757
700
|
*/
|
|
758
|
-
|
|
701
|
+
atBottomStateChange?: (atBottom: boolean) => void;
|
|
759
702
|
/**
|
|
760
|
-
*
|
|
703
|
+
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
|
|
761
704
|
*/
|
|
762
|
-
|
|
705
|
+
atTopStateChange?: (atTop: boolean) => void;
|
|
763
706
|
/**
|
|
764
|
-
*
|
|
707
|
+
* Use the `components` property for advanced customization of the elements rendered by the list.
|
|
765
708
|
*/
|
|
766
|
-
|
|
709
|
+
components?: GridComponents<C>;
|
|
767
710
|
/**
|
|
768
|
-
*
|
|
769
|
-
* regardless of the container / item size.
|
|
711
|
+
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
770
712
|
*/
|
|
771
|
-
|
|
713
|
+
computeItemKey?: GridComputeItemKey<D, C>;
|
|
772
714
|
/**
|
|
773
|
-
*
|
|
715
|
+
* Additional context available in the custom components and content callbacks
|
|
774
716
|
*/
|
|
775
|
-
|
|
717
|
+
context?: C;
|
|
776
718
|
/**
|
|
777
|
-
*
|
|
719
|
+
* Pass a reference to a scrollable parent element, so that the grid won't wrap in its own.
|
|
778
720
|
*/
|
|
779
|
-
|
|
721
|
+
customScrollParent?: HTMLElement;
|
|
780
722
|
/**
|
|
781
|
-
*
|
|
782
|
-
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
783
|
-
* Setting `{ main: number, reverse: number }` lets you extend the grid in both the main and the reverse scrollable directions.
|
|
784
|
-
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
|
|
723
|
+
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
785
724
|
*/
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
725
|
+
data?: readonly D[];
|
|
726
|
+
/**
|
|
727
|
+
* Gets called when the user scrolls to the end of the list.
|
|
728
|
+
* Receives the last item index as an argument. Can be used to implement endless scrolling.
|
|
729
|
+
*/
|
|
730
|
+
endReached?: (index: number) => void;
|
|
790
731
|
/**
|
|
791
732
|
*
|
|
792
733
|
* *The property accepts pixel values.*
|
|
@@ -797,190 +738,165 @@ export declare interface VirtuosoGridProps<D, C = unknown> extends GridRootProps
|
|
|
797
738
|
*
|
|
798
739
|
*/
|
|
799
740
|
increaseViewportBy?: number | {
|
|
800
|
-
top: number;
|
|
801
741
|
bottom: number;
|
|
742
|
+
top: number;
|
|
802
743
|
};
|
|
803
744
|
/**
|
|
804
|
-
*
|
|
805
|
-
|
|
806
|
-
computeItemKey?: GridComputeItemKey<D, C>;
|
|
807
|
-
/**
|
|
808
|
-
* Use to display placeholders if the user scrolls fast through the list.
|
|
809
|
-
*
|
|
810
|
-
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
745
|
+
* Use for server-side rendering - if set, the list will render the specified amount of items
|
|
746
|
+
* regardless of the container / item size.
|
|
811
747
|
*/
|
|
812
|
-
|
|
748
|
+
initialItemCount?: number;
|
|
749
|
+
initialTopMostItemIndex?: GridIndexLocation;
|
|
813
750
|
/**
|
|
814
751
|
* Called when the list starts/stops scrolling.
|
|
815
752
|
*/
|
|
816
753
|
isScrolling?: (isScrolling: boolean) => void;
|
|
817
754
|
/**
|
|
818
|
-
*
|
|
819
|
-
* Receives the last item index as an argument. Can be used to implement endless scrolling.
|
|
755
|
+
* Sets the grid items' className
|
|
820
756
|
*/
|
|
821
|
-
|
|
757
|
+
itemClassName?: string;
|
|
822
758
|
/**
|
|
823
|
-
*
|
|
759
|
+
* Set the callback to specify the contents of the item.
|
|
824
760
|
*/
|
|
825
|
-
|
|
761
|
+
itemContent?: GridItemContent<D, C>;
|
|
826
762
|
/**
|
|
827
|
-
*
|
|
763
|
+
* Sets the className for the list DOM element
|
|
828
764
|
*/
|
|
829
|
-
|
|
765
|
+
listClassName?: string;
|
|
830
766
|
/**
|
|
831
|
-
*
|
|
767
|
+
* set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
|
|
768
|
+
*
|
|
769
|
+
* Ensure that you have "all levels" enabled in the browser console too see the messages.
|
|
832
770
|
*/
|
|
833
|
-
|
|
834
|
-
restoreStateFrom?: GridStateSnapshot | undefined | null;
|
|
771
|
+
logLevel?: LogLevel;
|
|
835
772
|
/**
|
|
836
|
-
*
|
|
837
|
-
*
|
|
773
|
+
* Set the overscan property to make the component "chunk" the rendering of new items on scroll.
|
|
774
|
+
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
775
|
+
* Setting `{ main: number, reverse: number }` lets you extend the grid in both the main and the reverse scrollable directions.
|
|
776
|
+
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
|
|
838
777
|
*/
|
|
839
|
-
|
|
778
|
+
overscan?: number | {
|
|
779
|
+
main: number;
|
|
780
|
+
reverse: number;
|
|
781
|
+
};
|
|
840
782
|
/**
|
|
841
|
-
* Called with
|
|
783
|
+
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
842
784
|
*/
|
|
843
|
-
|
|
785
|
+
rangeChanged?: (range: ListRange) => void;
|
|
844
786
|
/**
|
|
845
|
-
*
|
|
787
|
+
* invoked with true after the grid has done the initial render and the items have been measured.
|
|
846
788
|
*/
|
|
847
|
-
|
|
789
|
+
readyStateChanged?: (ready: boolean) => void;
|
|
790
|
+
restoreStateFrom?: GridStateSnapshot | null | undefined;
|
|
848
791
|
/**
|
|
849
|
-
*
|
|
792
|
+
* Provides access to the root DOM element
|
|
850
793
|
*/
|
|
851
|
-
|
|
794
|
+
scrollerRef?: (ref: HTMLElement | null) => any;
|
|
852
795
|
/**
|
|
853
|
-
*
|
|
796
|
+
* Use to display placeholders if the user scrolls fast through the list.
|
|
797
|
+
*
|
|
798
|
+
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
854
799
|
*/
|
|
855
|
-
|
|
800
|
+
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
|
|
856
801
|
/**
|
|
857
|
-
*
|
|
802
|
+
* Called when the user scrolls to the start of the list.
|
|
858
803
|
*/
|
|
859
|
-
|
|
804
|
+
startReached?: (index: number) => void;
|
|
860
805
|
/**
|
|
861
|
-
*
|
|
806
|
+
* reports when the grid state changes. The reported value can be stored and passed back to `restoreStateFrom` to restore the grid to the same state.
|
|
862
807
|
*/
|
|
863
|
-
|
|
808
|
+
stateChanged?: (state: GridStateSnapshot) => void;
|
|
864
809
|
/**
|
|
865
|
-
*
|
|
866
|
-
*
|
|
867
|
-
* Ensure that you have "all levels" enabled in the browser console too see the messages.
|
|
810
|
+
* The total amount of items to be rendered.
|
|
868
811
|
*/
|
|
869
|
-
|
|
870
|
-
initialTopMostItemIndex?: GridIndexLocation;
|
|
812
|
+
totalCount?: number;
|
|
871
813
|
/**
|
|
872
|
-
*
|
|
814
|
+
* Uses the document scroller rather than wrapping the grid in its own.
|
|
873
815
|
*/
|
|
874
|
-
|
|
816
|
+
useWindowScroll?: boolean;
|
|
875
817
|
}
|
|
876
818
|
|
|
877
819
|
export declare interface VirtuosoHandle {
|
|
878
820
|
/**
|
|
879
|
-
*
|
|
880
|
-
*/
|
|
881
|
-
scrollToIndex(location: number | FlatIndexLocationWithAlign): void;
|
|
882
|
-
/**
|
|
883
|
-
* Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
|
|
821
|
+
* Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method.
|
|
884
822
|
*/
|
|
885
|
-
|
|
823
|
+
autoscrollToBottom(): void;
|
|
886
824
|
/**
|
|
887
|
-
*
|
|
825
|
+
* Obtains the internal size state of the component, so that it can be restored later. This does not include the data items.
|
|
888
826
|
*/
|
|
889
|
-
|
|
827
|
+
getState(stateCb: StateCallback): void;
|
|
890
828
|
/**
|
|
891
829
|
* Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
|
|
892
830
|
*/
|
|
893
831
|
scrollBy(location: ScrollToOptions): void;
|
|
894
832
|
/**
|
|
895
|
-
*
|
|
833
|
+
* Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
|
|
896
834
|
*/
|
|
897
|
-
|
|
835
|
+
scrollIntoView(location: FlatScrollIntoViewLocation): void;
|
|
898
836
|
/**
|
|
899
|
-
*
|
|
837
|
+
* Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions)
|
|
900
838
|
*/
|
|
901
|
-
|
|
839
|
+
scrollTo(location: ScrollToOptions): void;
|
|
840
|
+
/**
|
|
841
|
+
* Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options.
|
|
842
|
+
*/
|
|
843
|
+
scrollToIndex(location: FlatIndexLocationWithAlign | number): void;
|
|
902
844
|
}
|
|
903
845
|
|
|
904
846
|
export declare const VirtuosoMockContext: default_2.Context<VirtuosoMockContextValue | undefined>;
|
|
905
847
|
|
|
906
848
|
export declare interface VirtuosoMockContextValue {
|
|
907
|
-
viewportHeight: number;
|
|
908
849
|
itemHeight: number;
|
|
850
|
+
viewportHeight: number;
|
|
909
851
|
}
|
|
910
852
|
|
|
911
853
|
export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
912
854
|
/**
|
|
913
|
-
*
|
|
914
|
-
|
|
915
|
-
totalCount?: number;
|
|
916
|
-
/**
|
|
917
|
-
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
855
|
+
* Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport.
|
|
856
|
+
* Use `followOutput` property to keep the list aligned when new items are appended.
|
|
918
857
|
*/
|
|
919
|
-
|
|
858
|
+
alignToBottom?: boolean;
|
|
920
859
|
/**
|
|
921
|
-
*
|
|
860
|
+
* Called with true / false when the list has reached the bottom / gets scrolled up.
|
|
861
|
+
* Can be used to load newer items, like `tail -f`.
|
|
922
862
|
*/
|
|
923
|
-
|
|
863
|
+
atBottomStateChange?: (atBottom: boolean) => void;
|
|
924
864
|
/**
|
|
925
865
|
* *The property accepts pixel values.*
|
|
926
866
|
*
|
|
927
|
-
*
|
|
928
|
-
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
929
|
-
* Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
|
|
930
|
-
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
|
|
931
|
-
*
|
|
867
|
+
* By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom.
|
|
932
868
|
*/
|
|
933
|
-
|
|
934
|
-
main: number;
|
|
935
|
-
reverse: number;
|
|
936
|
-
};
|
|
869
|
+
atBottomThreshold?: number;
|
|
937
870
|
/**
|
|
938
|
-
*
|
|
939
|
-
* *The property accepts pixel values.*
|
|
940
|
-
*
|
|
941
|
-
* Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
|
|
942
|
-
* The property causes the component to render more items than the necessary, but can help with slow loading content.
|
|
943
|
-
* Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
|
|
944
|
-
*
|
|
871
|
+
* Called with `true` / `false` when the list has reached the top / gets scrolled down.
|
|
945
872
|
*/
|
|
946
|
-
|
|
947
|
-
top: number;
|
|
948
|
-
bottom: number;
|
|
949
|
-
};
|
|
873
|
+
atTopStateChange?: (atTop: boolean) => void;
|
|
950
874
|
/**
|
|
951
|
-
*
|
|
875
|
+
* *The property accepts pixel values.*
|
|
952
876
|
*
|
|
953
|
-
*
|
|
954
|
-
*/
|
|
955
|
-
topItemCount?: number;
|
|
956
|
-
/**
|
|
957
|
-
* Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
|
|
958
|
-
* Pass in an object to achieve additional effects similar to `scrollToIndex`.
|
|
877
|
+
* By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top.
|
|
959
878
|
*/
|
|
960
|
-
|
|
879
|
+
atTopThreshold?: number;
|
|
961
880
|
/**
|
|
962
|
-
*
|
|
963
|
-
* Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
|
|
964
|
-
* If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
|
|
881
|
+
* Use the `components` property for advanced customization of the elements rendered by the list.
|
|
965
882
|
*/
|
|
966
|
-
|
|
883
|
+
components?: Components<D, C>;
|
|
967
884
|
/**
|
|
968
|
-
*
|
|
969
|
-
* regardless of the container / item size.
|
|
885
|
+
* If specified, the component will use the function to generate the `key` property for each list item.
|
|
970
886
|
*/
|
|
971
|
-
|
|
887
|
+
computeItemKey?: ComputeItemKey<D, C>;
|
|
972
888
|
/**
|
|
973
|
-
*
|
|
889
|
+
* Additional context available in the custom components and content callbacks
|
|
974
890
|
*/
|
|
975
|
-
|
|
891
|
+
context?: C;
|
|
976
892
|
/**
|
|
977
|
-
*
|
|
893
|
+
* Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
|
|
978
894
|
*/
|
|
979
|
-
|
|
895
|
+
customScrollParent?: HTMLElement;
|
|
980
896
|
/**
|
|
981
|
-
* If
|
|
897
|
+
* The data items to be rendered. If data is set, the total count will be inferred from the length of the array.
|
|
982
898
|
*/
|
|
983
|
-
|
|
899
|
+
data?: readonly D[];
|
|
984
900
|
/**
|
|
985
901
|
* By default, the component assumes the default item height from the first rendered item (rendering it as a "probe").
|
|
986
902
|
*
|
|
@@ -992,22 +908,22 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
992
908
|
*/
|
|
993
909
|
defaultItemHeight?: number;
|
|
994
910
|
/**
|
|
995
|
-
*
|
|
911
|
+
* Gets called when the user scrolls to the end of the list.
|
|
912
|
+
* Receives the last item index as an argument. Can be used to implement endless scrolling.
|
|
913
|
+
*/
|
|
914
|
+
endReached?: (index: number) => void;
|
|
915
|
+
/**
|
|
916
|
+
* Use when implementing inverse infinite scrolling - decrease the value this property
|
|
917
|
+
* in combination with `data` or `totalCount` to prepend items to the top of the list.
|
|
996
918
|
*
|
|
997
|
-
*
|
|
919
|
+
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
|
|
998
920
|
*/
|
|
999
|
-
|
|
921
|
+
firstItemIndex?: number;
|
|
1000
922
|
/**
|
|
1001
923
|
* Can be used to improve performance if the rendered items are of known size.
|
|
1002
924
|
* Setting it causes the component to skip item measurements.
|
|
1003
925
|
*/
|
|
1004
926
|
fixedItemHeight?: number;
|
|
1005
|
-
/**
|
|
1006
|
-
* Use to display placeholders if the user scrolls fast through the list.
|
|
1007
|
-
*
|
|
1008
|
-
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
1009
|
-
*/
|
|
1010
|
-
scrollSeekConfiguration?: ScrollSeekConfiguration | false;
|
|
1011
927
|
/**
|
|
1012
928
|
* If set to `true`, the list automatically scrolls to bottom if the total count is changed.
|
|
1013
929
|
* Set to `"smooth"` for an animated scrolling.
|
|
@@ -1032,81 +948,79 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1032
948
|
*/
|
|
1033
949
|
headerFooterTag?: string;
|
|
1034
950
|
/**
|
|
1035
|
-
*
|
|
1036
|
-
* in combination with `data` or `totalCount` to prepend items to the top of the list.
|
|
1037
|
-
*
|
|
1038
|
-
* Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed.
|
|
951
|
+
* When set, turns the scroller into a horizontal list. The items are positioned with `inline-block`.
|
|
1039
952
|
*/
|
|
1040
|
-
|
|
953
|
+
horizontalDirection?: boolean;
|
|
1041
954
|
/**
|
|
1042
|
-
*
|
|
955
|
+
*
|
|
956
|
+
* *The property accepts pixel values.*
|
|
957
|
+
*
|
|
958
|
+
* Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
|
|
959
|
+
* The property causes the component to render more items than the necessary, but can help with slow loading content.
|
|
960
|
+
* Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
|
|
961
|
+
*
|
|
1043
962
|
*/
|
|
1044
|
-
|
|
963
|
+
increaseViewportBy?: number | {
|
|
964
|
+
bottom: number;
|
|
965
|
+
top: number;
|
|
966
|
+
};
|
|
1045
967
|
/**
|
|
1046
|
-
*
|
|
1047
|
-
*
|
|
968
|
+
* Use for server-side rendering - if set, the list will render the specified amount of items
|
|
969
|
+
* regardless of the container / item size.
|
|
1048
970
|
*/
|
|
1049
|
-
|
|
971
|
+
initialItemCount?: number;
|
|
1050
972
|
/**
|
|
1051
|
-
*
|
|
973
|
+
* Set this value to offset the initial location of the list.
|
|
974
|
+
* Warning: using this property will still run a render cycle at the scrollTop: 0 list window.
|
|
975
|
+
* If possible, avoid using it and stick to `initialTopMostItemIndex` instead.
|
|
1052
976
|
*/
|
|
1053
|
-
|
|
977
|
+
initialScrollTop?: number;
|
|
1054
978
|
/**
|
|
1055
|
-
*
|
|
979
|
+
* Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item.
|
|
980
|
+
* Pass in an object to achieve additional effects similar to `scrollToIndex`.
|
|
1056
981
|
*/
|
|
1057
|
-
|
|
982
|
+
initialTopMostItemIndex?: IndexLocationWithAlign | number;
|
|
1058
983
|
/**
|
|
1059
|
-
* Called
|
|
1060
|
-
* Can be used to load newer items, like `tail -f`.
|
|
984
|
+
* Called when the list starts/stops scrolling.
|
|
1061
985
|
*/
|
|
1062
|
-
|
|
986
|
+
isScrolling?: (isScrolling: boolean) => void;
|
|
1063
987
|
/**
|
|
1064
|
-
*
|
|
988
|
+
* Set the callback to specify the contents of the item.
|
|
1065
989
|
*/
|
|
1066
|
-
|
|
990
|
+
itemContent?: ItemContent<D, C>;
|
|
1067
991
|
/**
|
|
1068
|
-
*
|
|
992
|
+
* Allows customizing the height/width calculation of `Item` elements.
|
|
993
|
+
*
|
|
994
|
+
* The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`.
|
|
1069
995
|
*/
|
|
1070
|
-
|
|
996
|
+
itemSize?: SizeFunction;
|
|
1071
997
|
/**
|
|
1072
998
|
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
1073
999
|
*/
|
|
1074
1000
|
itemsRendered?: (items: ListItem<D>[]) => void;
|
|
1075
1001
|
/**
|
|
1076
|
-
*
|
|
1077
|
-
* Use `followOutput` property to keep the list aligned when new items are appended.
|
|
1078
|
-
*/
|
|
1079
|
-
alignToBottom?: boolean;
|
|
1080
|
-
/**
|
|
1081
|
-
* Uses the document scroller rather than wrapping the list in its own.
|
|
1082
|
-
*/
|
|
1083
|
-
useWindowScroll?: boolean;
|
|
1084
|
-
/**
|
|
1085
|
-
* Pass a reference to a scrollable parent element, so that the list won't wrap in its own.
|
|
1086
|
-
*/
|
|
1087
|
-
customScrollParent?: HTMLElement;
|
|
1088
|
-
/**
|
|
1089
|
-
* Provides access to the root DOM element
|
|
1090
|
-
*/
|
|
1091
|
-
scrollerRef?: (ref: HTMLElement | Window | null) => any;
|
|
1092
|
-
/**
|
|
1093
|
-
* *The property accepts pixel values.*
|
|
1002
|
+
* set to LogLevel.DEBUG to enable various diagnostics in the console, the most useful being the item measurement reports.
|
|
1094
1003
|
*
|
|
1095
|
-
*
|
|
1004
|
+
* Ensure that you have "all levels" enabled in the browser console too see the messages.
|
|
1096
1005
|
*/
|
|
1097
|
-
|
|
1006
|
+
logLevel?: LogLevel;
|
|
1098
1007
|
/**
|
|
1099
1008
|
* *The property accepts pixel values.*
|
|
1100
1009
|
*
|
|
1101
|
-
*
|
|
1010
|
+
* Set the overscan property to make the component "chunk" the rendering of new items on scroll.
|
|
1011
|
+
* The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
|
|
1012
|
+
* Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
|
|
1013
|
+
* See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
|
|
1014
|
+
*
|
|
1102
1015
|
*/
|
|
1103
|
-
|
|
1016
|
+
overscan?: number | {
|
|
1017
|
+
main: number;
|
|
1018
|
+
reverse: number;
|
|
1019
|
+
};
|
|
1104
1020
|
/**
|
|
1105
|
-
*
|
|
1106
|
-
*
|
|
1107
|
-
* Ensure that you have "all levels" enabled in the browser console too see the messages.
|
|
1021
|
+
* Called with the new set of items each time the list items are rendered due to scrolling.
|
|
1108
1022
|
*/
|
|
1109
|
-
|
|
1023
|
+
rangeChanged?: (range: ListRange) => void;
|
|
1110
1024
|
/**
|
|
1111
1025
|
* pass a state obtained from the getState() method to restore the list state - this includes the previously measured item sizes and the scroll location.
|
|
1112
1026
|
* Notice that you should still pass the same data and totalCount properties as before, so that the list can match the data with the stored measurements.
|
|
@@ -1114,15 +1028,43 @@ export declare interface VirtuosoProps<D, C> extends ListRootProps {
|
|
|
1114
1028
|
*/
|
|
1115
1029
|
restoreStateFrom?: StateSnapshot;
|
|
1116
1030
|
/**
|
|
1117
|
-
*
|
|
1031
|
+
* Provides access to the root DOM element
|
|
1118
1032
|
*/
|
|
1119
|
-
|
|
1033
|
+
scrollerRef?: (ref: HTMLElement | null | Window) => any;
|
|
1034
|
+
/**
|
|
1035
|
+
* Use to display placeholders if the user scrolls fast through the list.
|
|
1036
|
+
*
|
|
1037
|
+
* Set `components.ScrollSeekPlaceholder` to change the placeholder content.
|
|
1038
|
+
*/
|
|
1039
|
+
scrollSeekConfiguration?: false | ScrollSeekConfiguration;
|
|
1120
1040
|
/**
|
|
1121
1041
|
* When set, the resize observer used to measure the items will not use `requestAnimationFrame` to report the size changes.
|
|
1122
1042
|
* Setting this to true will improve performance and reduce flickering, but will cause benign errors to be reported in the console if the size of the items changes while they are being measured.
|
|
1123
1043
|
* See https://github.com/petyosi/react-virtuoso/issues/1049 for more information.
|
|
1124
1044
|
*/
|
|
1125
1045
|
skipAnimationFrameInResizeObserver?: boolean;
|
|
1046
|
+
/**
|
|
1047
|
+
* Called when the user scrolls to the start of the list.
|
|
1048
|
+
*/
|
|
1049
|
+
startReached?: (index: number) => void;
|
|
1050
|
+
/**
|
|
1051
|
+
* Set the amount of items to remain fixed at the top of the list.
|
|
1052
|
+
*
|
|
1053
|
+
* For a header that scrolls away when scrolling, check the `components.Header` property.
|
|
1054
|
+
*/
|
|
1055
|
+
topItemCount?: number;
|
|
1056
|
+
/**
|
|
1057
|
+
* The total amount of items to be rendered.
|
|
1058
|
+
*/
|
|
1059
|
+
totalCount?: number;
|
|
1060
|
+
/**
|
|
1061
|
+
* Called when the total list height is changed due to new items or viewport resize.
|
|
1062
|
+
*/
|
|
1063
|
+
totalListHeightChanged?: (height: number) => void;
|
|
1064
|
+
/**
|
|
1065
|
+
* Uses the document scroller rather than wrapping the list in its own.
|
|
1066
|
+
*/
|
|
1067
|
+
useWindowScroll?: boolean;
|
|
1126
1068
|
}
|
|
1127
1069
|
|
|
1128
1070
|
export declare interface WindowViewportInfo {
|
|
@@ -1132,3 +1074,7 @@ export declare interface WindowViewportInfo {
|
|
|
1132
1074
|
}
|
|
1133
1075
|
|
|
1134
1076
|
export { }
|
|
1077
|
+
|
|
1078
|
+
declare namespace _default {
|
|
1079
|
+
let stories: string[];
|
|
1080
|
+
}
|