Skip to content

Commit 1cff8dc

Browse files
committed
Enable Generic Discontiguous Regions within VirtualizedList
Builds upon the `CellRenderMask` data structure added with facebook#31420, and VirtualizedList coverage added with facebook#31401. VirtualizedList currently keeps a [first, last] range as state, tracking the region of cells to render. The render functions uses this as an input, along with a few special cases to render more (sticky headers, initial render region.) This change moves to instead keep state which describes discontiguous render regions. This mask is continually updated as the viewport changes, batch renders expand the region, etc. Special cases are baked into the render mask, with a relatively simple tranformation from the mask to render function. This representation makes it much easier to support keyboarding scenarios, which require keeping distinct regions (e.g. for last focused) realized while out of viewport. MS/FB folks have a video discussion about VirtualizedList here: https://msit.microsoftstream.com/video/fe01a1ff-0400-94b1-d4f1-f1eb924b1809 facebook#31401 added quite a few snapshot tests, centering around the logic this change is touching. I manually validated RNTester FlatList examples (and their should be some upstream UI testing for them).
1 parent 26e30a5 commit 1cff8dc

File tree

5 files changed

+428
-502
lines changed

5 files changed

+428
-502
lines changed

Libraries/Lists/CellRenderMask.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ export class CellRenderMask {
110110
);
111111
}
112112

113+
numCells(): number {
114+
return this._numCells;
115+
}
116+
113117
equals(other: CellRenderMask): boolean {
114118
return (
115119
this._numCells === other._numCells &&

Libraries/Lists/VirtualizeUtils.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ export function computeWindowedRenderLimits(
9292
prev: {
9393
first: number,
9494
last: number,
95-
...
9695
},
9796
getFrameMetricsApprox: (index: number) => {
9897
length: number,
@@ -109,7 +108,6 @@ export function computeWindowedRenderLimits(
109108
): {
110109
first: number,
111110
last: number,
112-
...
113111
} {
114112
const itemCount = getItemCount(data);
115113
if (itemCount === 0) {

0 commit comments

Comments
 (0)