@react-native-ohos/flash-list 1.8.3-rc.4 → 1.8.3-rc.5

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.
Files changed (47) hide show
  1. package/dist/__tests__/AverageWindow.test.d.ts +2 -0
  2. package/dist/__tests__/AverageWindow.test.d.ts.map +1 -0
  3. package/dist/__tests__/AverageWindow.test.js +69 -0
  4. package/dist/__tests__/AverageWindow.test.js.map +1 -0
  5. package/dist/__tests__/ContentContainerUtils.test.d.ts +2 -0
  6. package/dist/__tests__/ContentContainerUtils.test.d.ts.map +1 -0
  7. package/dist/__tests__/ContentContainerUtils.test.js +85 -0
  8. package/dist/__tests__/ContentContainerUtils.test.js.map +1 -0
  9. package/dist/__tests__/FlashList.test.d.ts +2 -0
  10. package/dist/__tests__/FlashList.test.d.ts.map +1 -0
  11. package/dist/__tests__/FlashList.test.js +792 -0
  12. package/dist/__tests__/FlashList.test.js.map +1 -0
  13. package/dist/__tests__/GridLayoutProviderWithProps.test.d.ts +2 -0
  14. package/dist/__tests__/GridLayoutProviderWithProps.test.d.ts.map +1 -0
  15. package/dist/__tests__/GridLayoutProviderWithProps.test.js +143 -0
  16. package/dist/__tests__/GridLayoutProviderWithProps.test.js.map +1 -0
  17. package/dist/__tests__/MasonryFlashList.test.d.ts +2 -0
  18. package/dist/__tests__/MasonryFlashList.test.d.ts.map +1 -0
  19. package/dist/__tests__/MasonryFlashList.test.js +254 -0
  20. package/dist/__tests__/MasonryFlashList.test.js.map +1 -0
  21. package/dist/__tests__/PlatformHelper.web.test.d.ts +2 -0
  22. package/dist/__tests__/PlatformHelper.web.test.d.ts.map +1 -0
  23. package/dist/__tests__/PlatformHelper.web.test.js +33 -0
  24. package/dist/__tests__/PlatformHelper.web.test.js.map +1 -0
  25. package/dist/__tests__/ViewabilityHelper.test.d.ts +2 -0
  26. package/dist/__tests__/ViewabilityHelper.test.d.ts.map +1 -0
  27. package/dist/__tests__/ViewabilityHelper.test.js +187 -0
  28. package/dist/__tests__/ViewabilityHelper.test.js.map +1 -0
  29. package/dist/__tests__/helpers/mountFlashList.d.ts +19 -0
  30. package/dist/__tests__/helpers/mountFlashList.d.ts.map +1 -0
  31. package/dist/__tests__/helpers/mountFlashList.js +44 -0
  32. package/dist/__tests__/helpers/mountFlashList.js.map +1 -0
  33. package/dist/__tests__/helpers/mountMasonryFlashList.d.ts +18 -0
  34. package/dist/__tests__/helpers/mountMasonryFlashList.d.ts.map +1 -0
  35. package/dist/__tests__/helpers/mountMasonryFlashList.js +49 -0
  36. package/dist/__tests__/helpers/mountMasonryFlashList.js.map +1 -0
  37. package/dist/__tests__/useBlankAreaTracker.test.d.ts +2 -0
  38. package/dist/__tests__/useBlankAreaTracker.test.d.ts.map +1 -0
  39. package/dist/__tests__/useBlankAreaTracker.test.js +177 -0
  40. package/dist/__tests__/useBlankAreaTracker.test.js.map +1 -0
  41. package/dist/tsconfig.tsbuildinfo +1 -1
  42. package/harmony/flash_list/BuildProfile.ets +1 -1
  43. package/harmony/flash_list/oh-package.json5 +1 -1
  44. package/harmony/flash_list/src/main/cpp/CMakeLists.txt +6 -1
  45. package/harmony/flash_list/src/main/cpp/FlashListPackage.h +8 -0
  46. package/harmony/flash_list.har +0 -0
  47. package/package.json +1 -1
@@ -0,0 +1,792 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ var react_1 = tslib_1.__importStar(require("react"));
5
+ var react_native_1 = require("react-native");
6
+ require("@quilted/react-testing/matchers");
7
+ var recyclerlistview_1 = require("recyclerlistview");
8
+ var Warnings_1 = tslib_1.__importDefault(require("../errors/Warnings"));
9
+ var AutoLayoutView_1 = tslib_1.__importDefault(require("../native/auto-layout/AutoLayoutView"));
10
+ var CellContainer_1 = tslib_1.__importDefault(require("../native/cell-container/CellContainer"));
11
+ var FlashListProps_1 = require("../FlashListProps");
12
+ var mountFlashList_1 = require("./helpers/mountFlashList");
13
+ jest.mock("../native/cell-container/CellContainer", function () {
14
+ return jest.requireActual("../native/cell-container/CellContainer.ios.ts")
15
+ .default;
16
+ });
17
+ describe("FlashList", function () {
18
+ beforeEach(function () {
19
+ jest.clearAllMocks();
20
+ jest.useFakeTimers();
21
+ });
22
+ it("renders items", function () {
23
+ var flashList = (0, mountFlashList_1.mountFlashList)();
24
+ expect(flashList).toContainReactComponent(react_native_1.Text, { children: "One" });
25
+ expect(flashList).toContainReactComponent(recyclerlistview_1.ProgressiveListView, {
26
+ isHorizontal: false,
27
+ });
28
+ });
29
+ it("sets ProgressiveListView to horizontal", function () {
30
+ var flashList = (0, mountFlashList_1.mountFlashList)({ horizontal: true });
31
+ expect(flashList).toContainReactComponent(recyclerlistview_1.ProgressiveListView, {
32
+ isHorizontal: true,
33
+ });
34
+ });
35
+ it("calls prepareForLayoutAnimationRender", function () {
36
+ var flashList = (0, mountFlashList_1.mountFlashList)({
37
+ keyExtractor: function (item) { return item; },
38
+ });
39
+ var warn = jest.spyOn(console, "warn").mockReturnValue();
40
+ var prepareForLayoutAnimationRender = jest.spyOn(flashList.instance.recyclerlistview_unsafe, "prepareForLayoutAnimationRender");
41
+ flashList.instance.prepareForLayoutAnimationRender();
42
+ expect(prepareForLayoutAnimationRender).toHaveBeenCalledTimes(1);
43
+ expect(warn).not.toHaveBeenCalled();
44
+ });
45
+ it("sends a warning when prepareForLayoutAnimationRender without keyExtractor", function () {
46
+ var flashList = (0, mountFlashList_1.mountFlashList)();
47
+ var warn = jest.spyOn(console, "warn").mockReturnValue();
48
+ var prepareForLayoutAnimationRender = jest.spyOn(flashList.instance.recyclerlistview_unsafe, "prepareForLayoutAnimationRender");
49
+ flashList.instance.prepareForLayoutAnimationRender();
50
+ expect(prepareForLayoutAnimationRender).not.toHaveBeenCalled();
51
+ expect(warn).toHaveBeenCalledWith(Warnings_1.default.missingKeyExtractor);
52
+ });
53
+ it("disables initial scroll correction on recyclerlistview if initialScrollIndex is in first row", function () {
54
+ var flashList = (0, mountFlashList_1.mountFlashList)({ initialScrollIndex: 0, numColumns: 3 });
55
+ expect(flashList.instance["getUpdatedWindowCorrectionConfig"]()
56
+ .applyToInitialOffset).toBe(false);
57
+ flashList = (0, mountFlashList_1.mountFlashList)({ initialScrollIndex: 3, numColumns: 3 });
58
+ expect(flashList.instance["getUpdatedWindowCorrectionConfig"]()
59
+ .applyToInitialOffset).toBe(true);
60
+ flashList = (0, mountFlashList_1.mountFlashList)({ initialScrollIndex: 2, numColumns: 3 });
61
+ expect(flashList.instance["getUpdatedWindowCorrectionConfig"]()
62
+ .applyToInitialOffset).toBe(false);
63
+ });
64
+ it("assigns distance from window to window correction object", function () {
65
+ var flashList = (0, mountFlashList_1.mountFlashList)({ estimatedFirstItemOffset: 100 });
66
+ expect(flashList.instance["getUpdatedWindowCorrectionConfig"]().value.windowShift).toBe(-100);
67
+ });
68
+ it("only forwards onBlankArea prop to AutoLayout when needed", function () {
69
+ var _a;
70
+ var flashList = (0, mountFlashList_1.mountFlashList)();
71
+ var autoLayoutView = (_a = flashList.find(AutoLayoutView_1.default)) === null || _a === void 0 ? void 0 : _a.instance;
72
+ expect(autoLayoutView.props.onBlankAreaEvent).toBeUndefined();
73
+ flashList.setProps({ onBlankArea: function () { } });
74
+ expect(autoLayoutView.props.onBlankAreaEvent).not.toBeUndefined();
75
+ });
76
+ it("calls render item only when data of the items has changed", function () {
77
+ var renderItemMock = jest.fn(function (_a) {
78
+ var item = _a.item;
79
+ return react_1.default.createElement(react_native_1.Text, null, item);
80
+ });
81
+ var flashList = (0, mountFlashList_1.mountFlashList)({
82
+ renderItem: renderItemMock,
83
+ data: ["One", "Two", "Three", "Four"],
84
+ });
85
+ // because we have 4 data items
86
+ expect(renderItemMock).toHaveBeenCalledTimes(4);
87
+ // reset counter
88
+ renderItemMock.mockClear();
89
+ // changes layout of all four items
90
+ flashList.setProps({ numColumns: 2 });
91
+ // render item should be called 0 times because only layout of items would have changed
92
+ expect(renderItemMock).toHaveBeenCalledTimes(0);
93
+ flashList.unmount();
94
+ });
95
+ it("keeps component mounted based on prepareForLayoutAnimationRender being called", function () {
96
+ // Tracks components being unmounted
97
+ var unmountMock = jest.fn();
98
+ var Item = function (_a) {
99
+ var text = _a.text;
100
+ (0, react_1.useEffect)(function () {
101
+ return unmountMock;
102
+ }, []);
103
+ return react_1.default.createElement(react_native_1.Text, null, text);
104
+ };
105
+ var flashList = (0, mountFlashList_1.mountFlashList)({
106
+ keyExtractor: function (item) { return item; },
107
+ renderItem: function (_a) {
108
+ var item = _a.item;
109
+ return react_1.default.createElement(Item, { text: item });
110
+ },
111
+ data: ["One", "Two", "Three", "Four"],
112
+ });
113
+ // Change data without prepareForLayoutAnimationRender
114
+ flashList.setProps({ data: ["One", "Two", "Three", "Five"] });
115
+ expect(unmountMock).not.toHaveBeenCalled();
116
+ // Before changing data, we run prepareForLayoutAnimationRender.
117
+ // This ensures component gets unmounted instead of being recycled to ensure layout animations run as expected.
118
+ flashList.instance.prepareForLayoutAnimationRender();
119
+ flashList.setProps({ data: ["One", "Two", "Three", "Six"] });
120
+ expect(unmountMock).toHaveBeenCalledTimes(1);
121
+ });
122
+ it("fires onLoad event", function () {
123
+ var _a;
124
+ var onLoadMock = jest.fn();
125
+ // empty list
126
+ (0, mountFlashList_1.mountFlashList)({ data: [], onLoad: onLoadMock });
127
+ expect(onLoadMock).toHaveBeenCalledWith({
128
+ elapsedTimeInMs: expect.any(Number),
129
+ });
130
+ onLoadMock.mockClear();
131
+ // non-empty list
132
+ var flashList = (0, mountFlashList_1.mountFlashList)({ onLoad: onLoadMock });
133
+ (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance.onItemLayout(0);
134
+ expect(onLoadMock).toHaveBeenCalledWith({
135
+ elapsedTimeInMs: expect.any(Number),
136
+ });
137
+ });
138
+ it("loads an empty state", function () {
139
+ var EmptyComponent = function () {
140
+ return react_1.default.createElement(react_native_1.Text, null, "Empty");
141
+ };
142
+ var flashList = (0, mountFlashList_1.mountFlashList)({
143
+ data: [],
144
+ ListEmptyComponent: EmptyComponent,
145
+ });
146
+ expect(flashList).toContainReactComponent(EmptyComponent);
147
+ });
148
+ it("loads header and footer in empty state", function () {
149
+ var HeaderComponent = function () {
150
+ return react_1.default.createElement(react_native_1.Text, null, "Empty");
151
+ };
152
+ var FooterComponent = function () {
153
+ return react_1.default.createElement(react_native_1.Text, null, "Empty");
154
+ };
155
+ var flashList = (0, mountFlashList_1.mountFlashList)({
156
+ data: [],
157
+ ListHeaderComponent: HeaderComponent,
158
+ ListFooterComponent: FooterComponent,
159
+ });
160
+ expect(flashList).toContainReactComponent(HeaderComponent);
161
+ expect(flashList).toContainReactComponent(FooterComponent);
162
+ });
163
+ it("reports layout changes to the layout provider", function () {
164
+ var _a;
165
+ var flashList = (0, mountFlashList_1.mountFlashList)();
166
+ var reportItemLayoutMock = jest.spyOn(flashList.instance.state.layoutProvider, "reportItemLayout");
167
+ (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance.onItemLayout(0);
168
+ expect(reportItemLayoutMock).toHaveBeenCalledWith(0);
169
+ flashList.unmount();
170
+ });
171
+ it("should prefer overrideItemLayout over estimate and average", function () {
172
+ var flashList = (0, mountFlashList_1.mountFlashList)({
173
+ overrideItemLayout: function (layout) {
174
+ layout.size = 50;
175
+ },
176
+ });
177
+ expect(flashList.instance.state.layoutProvider.averageItemSize).toBe(200);
178
+ expect(flashList.instance.state
179
+ .layoutProvider.getLayoutManager()
180
+ .getLayouts()[0].height).toBe(50);
181
+ });
182
+ it("should override span with overrideItemLayout", function () {
183
+ var renderItemMock = jest.fn(function (_a) {
184
+ var item = _a.item;
185
+ return react_1.default.createElement(react_native_1.Text, null, item);
186
+ });
187
+ (0, mountFlashList_1.mountFlashList)({
188
+ overrideItemLayout: function (layout) {
189
+ layout.span = 2;
190
+ },
191
+ numColumns: 2,
192
+ estimatedItemSize: 300,
193
+ renderItem: renderItemMock,
194
+ });
195
+ expect(renderItemMock).toHaveBeenCalledTimes(3);
196
+ renderItemMock.mockClear();
197
+ (0, mountFlashList_1.mountFlashList)({
198
+ overrideItemLayout: function (layout, _, index) {
199
+ if (index > 2) {
200
+ layout.span = 2;
201
+ }
202
+ },
203
+ data: new Array(20).fill(""),
204
+ numColumns: 3,
205
+ estimatedItemSize: 100,
206
+ renderItem: renderItemMock,
207
+ });
208
+ expect(renderItemMock).toHaveBeenCalledTimes(11);
209
+ });
210
+ it("overrideItemLayout should consider 0 as a valid span", function () {
211
+ var renderItemMock = jest.fn(function (_a) {
212
+ var item = _a.item;
213
+ return react_1.default.createElement(react_native_1.Text, null, item);
214
+ });
215
+ (0, mountFlashList_1.mountFlashList)({
216
+ overrideItemLayout: function (layout, _, index) {
217
+ if (index < 4) {
218
+ layout.span = 0;
219
+ }
220
+ },
221
+ data: new Array(20).fill(""),
222
+ numColumns: 2,
223
+ renderItem: renderItemMock,
224
+ });
225
+ expect(renderItemMock).toHaveBeenCalledTimes(14);
226
+ });
227
+ it("reports onViewableItemsChanged for viewable items", function () {
228
+ var _a, _b, _c, _d;
229
+ var onViewableItemsChanged = jest.fn();
230
+ var onViewableItemsChangedForItemVisiblePercentThreshold = jest.fn();
231
+ var flashList = (0, mountFlashList_1.mountFlashList)({
232
+ estimatedItemSize: 300,
233
+ viewabilityConfig: {
234
+ minimumViewTime: 250,
235
+ },
236
+ viewabilityConfigCallbackPairs: [
237
+ {
238
+ onViewableItemsChanged: onViewableItemsChangedForItemVisiblePercentThreshold,
239
+ viewabilityConfig: {
240
+ itemVisiblePercentThreshold: 50,
241
+ waitForInteraction: true,
242
+ },
243
+ },
244
+ ],
245
+ onViewableItemsChanged: onViewableItemsChanged,
246
+ });
247
+ // onViewableItemsChanged is not called before 250 ms have elapsed
248
+ expect(onViewableItemsChanged).not.toHaveBeenCalled();
249
+ jest.advanceTimersByTime(250);
250
+ // Initial viewable items
251
+ expect(onViewableItemsChanged).toHaveBeenCalledWith({
252
+ changed: [
253
+ {
254
+ index: 0,
255
+ isViewable: true,
256
+ item: "One",
257
+ key: "0",
258
+ timestamp: expect.any(Number),
259
+ },
260
+ {
261
+ index: 1,
262
+ isViewable: true,
263
+ item: "Two",
264
+ key: "1",
265
+ timestamp: expect.any(Number),
266
+ },
267
+ {
268
+ index: 2,
269
+ isViewable: true,
270
+ item: "Three",
271
+ key: "2",
272
+ timestamp: expect.any(Number),
273
+ },
274
+ ],
275
+ viewableItems: [
276
+ {
277
+ index: 0,
278
+ isViewable: true,
279
+ item: "One",
280
+ key: "0",
281
+ timestamp: expect.any(Number),
282
+ },
283
+ {
284
+ index: 1,
285
+ isViewable: true,
286
+ item: "Two",
287
+ key: "1",
288
+ timestamp: expect.any(Number),
289
+ },
290
+ {
291
+ index: 2,
292
+ isViewable: true,
293
+ item: "Three",
294
+ key: "2",
295
+ timestamp: expect.any(Number),
296
+ },
297
+ ],
298
+ });
299
+ expect(onViewableItemsChangedForItemVisiblePercentThreshold).not.toHaveBeenCalled();
300
+ // onViewableItemsChangedForItemVisiblePercentThreshold waits for interaction before reporting viewable items
301
+ flashList.instance.recordInteraction();
302
+ jest.advanceTimersByTime(250);
303
+ expect(onViewableItemsChangedForItemVisiblePercentThreshold).toHaveBeenCalledWith({
304
+ changed: [
305
+ {
306
+ index: 0,
307
+ isViewable: true,
308
+ item: "One",
309
+ key: "0",
310
+ timestamp: expect.any(Number),
311
+ },
312
+ {
313
+ index: 1,
314
+ isViewable: true,
315
+ item: "Two",
316
+ key: "1",
317
+ timestamp: expect.any(Number),
318
+ },
319
+ {
320
+ index: 2,
321
+ isViewable: true,
322
+ item: "Three",
323
+ key: "2",
324
+ timestamp: expect.any(Number),
325
+ },
326
+ ],
327
+ viewableItems: [
328
+ {
329
+ index: 0,
330
+ isViewable: true,
331
+ item: "One",
332
+ key: "0",
333
+ timestamp: expect.any(Number),
334
+ },
335
+ {
336
+ index: 1,
337
+ isViewable: true,
338
+ item: "Two",
339
+ key: "1",
340
+ timestamp: expect.any(Number),
341
+ },
342
+ {
343
+ index: 2,
344
+ isViewable: true,
345
+ item: "Three",
346
+ key: "2",
347
+ timestamp: expect.any(Number),
348
+ },
349
+ ],
350
+ });
351
+ onViewableItemsChanged.mockReset();
352
+ onViewableItemsChangedForItemVisiblePercentThreshold.mockReset();
353
+ // Mocking a scroll that will make the first item not visible and the last item visible
354
+ jest
355
+ .spyOn(flashList.instance.recyclerlistview_unsafe, "getCurrentScrollOffset")
356
+ .mockReturnValue(200);
357
+ (_b = (_a = flashList.instance.recyclerlistview_unsafe.props).onVisibleIndicesChanged) === null || _b === void 0 ? void 0 : _b.call(_a, [0, 1, 2, 3], [], []);
358
+ (_d = (_c = flashList.instance.recyclerlistview_unsafe.props).onScroll) === null || _d === void 0 ? void 0 : _d.call(_c, { nativeEvent: { contentOffset: { x: 0, y: 200 } } }, 0, 200);
359
+ jest.advanceTimersByTime(250);
360
+ expect(onViewableItemsChanged).toHaveBeenCalledWith({
361
+ changed: [
362
+ {
363
+ index: 3,
364
+ isViewable: true,
365
+ item: "Four",
366
+ key: "3",
367
+ timestamp: expect.any(Number),
368
+ },
369
+ ],
370
+ viewableItems: [
371
+ {
372
+ index: 0,
373
+ isViewable: true,
374
+ item: "One",
375
+ key: "0",
376
+ timestamp: expect.any(Number),
377
+ },
378
+ {
379
+ index: 1,
380
+ isViewable: true,
381
+ item: "Two",
382
+ key: "1",
383
+ timestamp: expect.any(Number),
384
+ },
385
+ {
386
+ index: 2,
387
+ isViewable: true,
388
+ item: "Three",
389
+ key: "2",
390
+ timestamp: expect.any(Number),
391
+ },
392
+ {
393
+ index: 3,
394
+ isViewable: true,
395
+ item: "Four",
396
+ key: "3",
397
+ timestamp: expect.any(Number),
398
+ },
399
+ ],
400
+ });
401
+ expect(onViewableItemsChangedForItemVisiblePercentThreshold).toHaveBeenCalledWith({
402
+ changed: [
403
+ {
404
+ index: 3,
405
+ isViewable: true,
406
+ item: "Four",
407
+ key: "3",
408
+ timestamp: expect.any(Number),
409
+ },
410
+ {
411
+ index: 0,
412
+ isViewable: false,
413
+ item: "One",
414
+ key: "0",
415
+ timestamp: expect.any(Number),
416
+ },
417
+ ],
418
+ viewableItems: [
419
+ {
420
+ index: 1,
421
+ isViewable: true,
422
+ item: "Two",
423
+ key: "1",
424
+ timestamp: expect.any(Number),
425
+ },
426
+ {
427
+ index: 2,
428
+ isViewable: true,
429
+ item: "Three",
430
+ key: "2",
431
+ timestamp: expect.any(Number),
432
+ },
433
+ {
434
+ index: 3,
435
+ isViewable: true,
436
+ item: "Four",
437
+ key: "3",
438
+ timestamp: expect.any(Number),
439
+ },
440
+ ],
441
+ });
442
+ });
443
+ it("viewability reports take into account estimatedFirstItemOffset", function () {
444
+ var onViewableItemsChanged = jest.fn();
445
+ (0, mountFlashList_1.mountFlashList)({
446
+ estimatedFirstItemOffset: 200,
447
+ estimatedItemSize: 300,
448
+ onViewableItemsChanged: onViewableItemsChanged,
449
+ viewabilityConfig: { itemVisiblePercentThreshold: 50 },
450
+ });
451
+ // onViewableItemsChanged is not called before 250 ms have elapsed
452
+ expect(onViewableItemsChanged).not.toHaveBeenCalled();
453
+ jest.advanceTimersByTime(250);
454
+ // Initial viewable items
455
+ expect(onViewableItemsChanged).toHaveBeenCalledWith({
456
+ changed: [
457
+ {
458
+ index: 0,
459
+ isViewable: true,
460
+ item: "One",
461
+ key: "0",
462
+ timestamp: expect.any(Number),
463
+ },
464
+ {
465
+ index: 1,
466
+ isViewable: true,
467
+ item: "Two",
468
+ key: "1",
469
+ timestamp: expect.any(Number),
470
+ },
471
+ ],
472
+ viewableItems: [
473
+ {
474
+ index: 0,
475
+ isViewable: true,
476
+ item: "One",
477
+ key: "0",
478
+ timestamp: expect.any(Number),
479
+ },
480
+ {
481
+ index: 1,
482
+ isViewable: true,
483
+ item: "Two",
484
+ key: "1",
485
+ timestamp: expect.any(Number),
486
+ },
487
+ ],
488
+ });
489
+ });
490
+ it("should not overlap header with sitcky index 0", function () {
491
+ var HeaderComponent = function () {
492
+ return react_1.default.createElement(react_native_1.Text, null, "Empty");
493
+ };
494
+ var flashList = (0, mountFlashList_1.mountFlashList)({
495
+ ListHeaderComponent: HeaderComponent,
496
+ stickyHeaderIndices: [0],
497
+ });
498
+ // If sticky renders there'll be 6
499
+ expect(flashList.findAll(react_native_1.Text).length).toBe(5);
500
+ });
501
+ it("rerenders all items when layout manager changes", function () {
502
+ var _a;
503
+ var countMounts = 0;
504
+ var currentId = 0;
505
+ // Effect will be triggered once per mount
506
+ var RenderComponent = function (_a) {
507
+ var id = _a.id;
508
+ (0, react_1.useEffect)(function () {
509
+ countMounts++;
510
+ }, [id]);
511
+ return react_1.default.createElement(react_native_1.Text, null, "Test");
512
+ };
513
+ var renderItem = function () {
514
+ return react_1.default.createElement(RenderComponent, { id: currentId });
515
+ };
516
+ var flashList = (0, mountFlashList_1.mountFlashList)({
517
+ data: new Array(100).fill("1"),
518
+ estimatedItemSize: 70,
519
+ renderItem: renderItem,
520
+ });
521
+ var scrollTo = function (y) {
522
+ var _a;
523
+ (_a = flashList.find(react_native_1.ScrollView)) === null || _a === void 0 ? void 0 : _a.trigger("onScroll", {
524
+ nativeEvent: { contentOffset: { x: 0, y: y } },
525
+ });
526
+ };
527
+ // Mocking some scrolls
528
+ scrollTo(200);
529
+ scrollTo(400);
530
+ scrollTo(600);
531
+ scrollTo(3000);
532
+ scrollTo(2000);
533
+ // changing id will trigger effects if components rerender
534
+ currentId = 1;
535
+ // capturing current component count to check later
536
+ var currentComponentCount = countMounts;
537
+ // resetting count
538
+ countMounts = 0;
539
+ // items widths before layout manager change should be 400
540
+ flashList.findAll(CellContainer_1.default).forEach(function (cell) {
541
+ if (cell.props.index !== -1) {
542
+ expect(cell.instance.props.style.width).toBe(400);
543
+ }
544
+ });
545
+ // This will cause a layout manager change
546
+ (_a = flashList.find(react_native_1.ScrollView)) === null || _a === void 0 ? void 0 : _a.trigger("onLayout", {
547
+ nativeEvent: { layout: { height: 400, width: 900 } },
548
+ });
549
+ // If counts match, then all components were updated
550
+ expect(countMounts).toBe(currentComponentCount);
551
+ // items widths after layout manager change should be 900
552
+ flashList.findAll(CellContainer_1.default).forEach(function (cell) {
553
+ if (cell.props.index !== -1) {
554
+ expect(cell.instance.props.style.width).toBe(900);
555
+ }
556
+ });
557
+ flashList.unmount();
558
+ });
559
+ it("sends a warning when estimatedItemSize is not set", function () {
560
+ var _a, _b, _c;
561
+ var warn = jest.spyOn(console, "warn").mockReturnValue();
562
+ var flashList = (0, mountFlashList_1.mountFlashList)({
563
+ disableDefaultEstimatedItemSize: true,
564
+ renderItem: function (_a) {
565
+ var item = _a.item;
566
+ return react_1.default.createElement(react_native_1.Text, { style: { height: 200 } }, item);
567
+ },
568
+ });
569
+ var layoutData = flashList.instance.state.layoutProvider
570
+ .getLayoutManager()
571
+ .getLayouts();
572
+ layoutData[0].height = 100;
573
+ layoutData[1].height = 200;
574
+ layoutData[2].height = 300;
575
+ (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance.onItemLayout(0);
576
+ expect(flashList.instance.state.layoutProvider.averageItemSize).toBe(100);
577
+ (_b = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _b === void 0 ? void 0 : _b.instance.onItemLayout(1);
578
+ (_c = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _c === void 0 ? void 0 : _c.instance.onItemLayout(2);
579
+ jest.advanceTimersByTime(1000);
580
+ var averageItemSize = flashList.instance.state.layoutProvider.averageItemSize;
581
+ expect(warn).toHaveBeenCalledWith(Warnings_1.default.estimatedItemSizeMissingWarning.replace("@size", averageItemSize.toString()));
582
+ expect(flashList.instance.state.layoutProvider.averageItemSize).toBe(175);
583
+ flashList.unmount();
584
+ });
585
+ it("clears size warning timeout on unmount", function () {
586
+ var _a;
587
+ var warn = jest.spyOn(console, "warn").mockReturnValue();
588
+ var flashList = (0, mountFlashList_1.mountFlashList)({
589
+ disableDefaultEstimatedItemSize: true,
590
+ });
591
+ (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance.onItemLayout(0);
592
+ flashList.unmount();
593
+ jest.advanceTimersByTime(1000);
594
+ expect(warn).toBeCalledTimes(0);
595
+ });
596
+ it("measure size of horizontal list when appropriate", function () {
597
+ var flashList = (0, mountFlashList_1.mountFlashList)({
598
+ data: new Array(1).fill("1"),
599
+ horizontal: true,
600
+ });
601
+ var forceUpdate = jest.spyOn(flashList.instance, "forceUpdate");
602
+ // should contain 1 actual text and 1 dummy on mount
603
+ expect(flashList.findAll(react_native_1.Text).length).toBe(2);
604
+ // Trigger onLoad
605
+ flashList.instance["onItemLayout"](0);
606
+ jest.advanceTimersByTime(600);
607
+ expect(forceUpdate).toBeCalledTimes(1);
608
+ // TODO: Investigate why forceUpdate isn't working in tests, forcing an update
609
+ flashList.setProps({ overrideItemLayout: function () { } });
610
+ // After update the dummy should get removed
611
+ expect(flashList.findAll(react_native_1.Text).length).toBe(1);
612
+ flashList.unmount();
613
+ flashList = (0, mountFlashList_1.mountFlashList)({
614
+ data: new Array(1).fill("1"),
615
+ horizontal: true,
616
+ disableHorizontalListHeightMeasurement: true,
617
+ });
618
+ // should contain 1 actual text as measurement is disabled
619
+ expect(flashList.findAll(react_native_1.Text).length).toBe(1);
620
+ flashList.unmount();
621
+ });
622
+ it("cancels post load setTimeout on unmount", function () {
623
+ var flashList = (0, mountFlashList_1.mountFlashList)({
624
+ data: new Array(1).fill("1"),
625
+ horizontal: true,
626
+ });
627
+ var forceUpdate = jest.spyOn(flashList.instance, "forceUpdate");
628
+ flashList.instance["onItemLayout"](0);
629
+ flashList.unmount();
630
+ jest.advanceTimersByTime(600);
631
+ expect(forceUpdate).toBeCalledTimes(0);
632
+ });
633
+ it("uses 250 as draw distance on Android/iOS", function () {
634
+ var _a, _b;
635
+ var flashList = (0, mountFlashList_1.mountFlashList)();
636
+ (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance.onItemLayout(0);
637
+ jest.advanceTimersByTime(1000);
638
+ expect((_b = flashList
639
+ .find(recyclerlistview_1.ProgressiveListView)) === null || _b === void 0 ? void 0 : _b.instance.getCurrentRenderAheadOffset()).toBe(250);
640
+ flashList.unmount();
641
+ });
642
+ it("forwards correct renderTarget", function () {
643
+ var _a, _b, _c, _d, _e;
644
+ var renderItem = function (_a) {
645
+ var target = _a.target;
646
+ return react_1.default.createElement(react_native_1.Text, null, target);
647
+ };
648
+ var flashList = (0, mountFlashList_1.mountFlashList)({
649
+ data: ["0"],
650
+ stickyHeaderIndices: [0],
651
+ renderItem: renderItem,
652
+ });
653
+ expect((_b = (_a = flashList.find(react_native_1.Animated.View)) === null || _a === void 0 ? void 0 : _a.find(react_native_1.Text)) === null || _b === void 0 ? void 0 : _b.props.children).toBe(FlashListProps_1.RenderTargetOptions.StickyHeader);
654
+ expect((_d = (_c = flashList.find(react_native_1.View)) === null || _c === void 0 ? void 0 : _c.find(react_native_1.Text)) === null || _d === void 0 ? void 0 : _d.props.children).toBe(FlashListProps_1.RenderTargetOptions.Cell);
655
+ var flashListHorizontal = (0, mountFlashList_1.mountFlashList)({
656
+ renderItem: renderItem,
657
+ horizontal: true,
658
+ });
659
+ expect((_e = flashListHorizontal
660
+ .findAllWhere(function (node) { var _a, _b; return ((_b = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.opacity) === 0; })[0]
661
+ .find(react_native_1.Text)) === null || _e === void 0 ? void 0 : _e.props.children).toBe("Measurement");
662
+ });
663
+ it("force updates items only when renderItem change", function () {
664
+ var renderItem = jest.fn(function () { return react_1.default.createElement(react_native_1.Text, null, "Test"); });
665
+ var flashList = (0, mountFlashList_1.mountFlashList)({
666
+ data: new Array(1).fill("1"),
667
+ renderItem: renderItem,
668
+ });
669
+ flashList.setProps({ data: new Array(1).fill("1") });
670
+ expect(renderItem).toBeCalledTimes(1);
671
+ var newRenderItem = jest.fn(function () { return react_1.default.createElement(react_native_1.Text, null, "Test"); });
672
+ flashList.setProps({
673
+ data: new Array(1).fill("1"),
674
+ renderItem: newRenderItem,
675
+ });
676
+ expect(newRenderItem).toBeCalledTimes(1);
677
+ });
678
+ it("forwards disableAutoLayout prop correctly", function () {
679
+ var _a, _b;
680
+ var flashList = (0, mountFlashList_1.mountFlashList)();
681
+ expect((_a = flashList.find(AutoLayoutView_1.default)) === null || _a === void 0 ? void 0 : _a.props.disableAutoLayout).toBe(undefined);
682
+ flashList.setProps({ disableAutoLayout: true });
683
+ expect((_b = flashList.find(AutoLayoutView_1.default)) === null || _b === void 0 ? void 0 : _b.props.disableAutoLayout).toBe(true);
684
+ });
685
+ it("computes correct scrollTo offset when view position is specified", function () {
686
+ var _a;
687
+ var flashList = (0, mountFlashList_1.mountFlashList)({
688
+ data: new Array(40).fill(1).map(function (_, index) {
689
+ return index.toString();
690
+ }),
691
+ });
692
+ var plv = (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance;
693
+ var scrollToOffset = jest.spyOn(plv, "scrollToOffset");
694
+ flashList.instance.scrollToIndex({ index: 10, viewPosition: 0.5 });
695
+ // Each item is 200px in height and to position it in the middle of the window (900 x 400), its offset needs to be
696
+ // reduced by 350px. That gives us 1650. Other test cases follow the same logic.
697
+ expect(scrollToOffset).toBeCalledWith(1650, 1650, false, true);
698
+ flashList.instance.scrollToItem({
699
+ item: "10",
700
+ viewPosition: 0.5,
701
+ });
702
+ expect(scrollToOffset).toBeCalledWith(1650, 1650, false, true);
703
+ flashList.setProps({ horizontal: true });
704
+ flashList.instance.scrollToItem({
705
+ item: "10",
706
+ viewPosition: 0.5,
707
+ });
708
+ expect(scrollToOffset).toBeCalledWith(1900, 1900, false, true);
709
+ flashList.unmount();
710
+ });
711
+ it("computes correct scrollTo offset when view offset is specified", function () {
712
+ var _a;
713
+ var flashList = (0, mountFlashList_1.mountFlashList)({
714
+ data: new Array(40).fill(1).map(function (_, index) {
715
+ return index.toString();
716
+ }),
717
+ });
718
+ var plv = (_a = flashList.find(recyclerlistview_1.ProgressiveListView)) === null || _a === void 0 ? void 0 : _a.instance;
719
+ var scrollToOffset = jest.spyOn(plv, "scrollToOffset");
720
+ // Each item is 200px in height and to position it in the middle of the window (900 x 400), it's offset needs to be
721
+ // reduced by 350px + 100px offset. That gives us 1550. Other test cases follow the same logic.
722
+ flashList.instance.scrollToIndex({
723
+ index: 10,
724
+ viewPosition: 0.5,
725
+ viewOffset: 100,
726
+ });
727
+ expect(scrollToOffset).toBeCalledWith(1550, 1550, false, true);
728
+ flashList.setProps({ horizontal: true });
729
+ flashList.instance.scrollToItem({
730
+ item: "10",
731
+ viewPosition: 0.5,
732
+ viewOffset: 100,
733
+ });
734
+ expect(scrollToOffset).toBeCalledWith(1800, 1800, false, true);
735
+ flashList.unmount();
736
+ });
737
+ it("applies horizontal content container padding for vertical list", function () {
738
+ var flashList = (0, mountFlashList_1.mountFlashList)({
739
+ numColumns: 4,
740
+ contentContainerStyle: { paddingHorizontal: 10 },
741
+ });
742
+ var hasLayoutItems = false;
743
+ flashList.instance.state.layoutProvider
744
+ .getLayoutManager()
745
+ .getLayouts()
746
+ .forEach(function (layout) {
747
+ hasLayoutItems = true;
748
+ expect(layout.width).toBe(95);
749
+ });
750
+ expect(hasLayoutItems).toBe(true);
751
+ flashList.unmount();
752
+ });
753
+ it("applies vertical content container padding for horizontal list", function () {
754
+ var flashList = (0, mountFlashList_1.mountFlashList)({
755
+ horizontal: true,
756
+ contentContainerStyle: { paddingVertical: 10 },
757
+ });
758
+ var hasLayoutItems = false;
759
+ flashList.instance.state.layoutProvider
760
+ .getLayoutManager()
761
+ .getLayouts()
762
+ .forEach(function (layout) {
763
+ hasLayoutItems = true;
764
+ expect(layout.height).toBe(880);
765
+ });
766
+ expect(hasLayoutItems).toBe(true);
767
+ flashList.unmount();
768
+ });
769
+ it("warns if rendered size is too small but only when it remain small for a duration", function () {
770
+ var flashList = (0, mountFlashList_1.mountFlashList)({
771
+ data: new Array(1).fill("1"),
772
+ });
773
+ var warn = jest.spyOn(console, "warn").mockReturnValue();
774
+ var triggerLayout = function (height, time) {
775
+ var _a;
776
+ (_a = flashList.find(react_native_1.ScrollView)) === null || _a === void 0 ? void 0 : _a.trigger("onLayout", {
777
+ nativeEvent: { layout: { height: height, width: 900 } },
778
+ });
779
+ jest.advanceTimersByTime(time);
780
+ };
781
+ triggerLayout(0, 500);
782
+ triggerLayout(100, 1000);
783
+ triggerLayout(0, 1200);
784
+ expect(warn).toHaveBeenCalledTimes(1);
785
+ triggerLayout(100, 500);
786
+ triggerLayout(0, 500);
787
+ flashList.unmount();
788
+ jest.advanceTimersByTime(1200);
789
+ expect(warn).toHaveBeenCalledTimes(1);
790
+ });
791
+ });
792
+ //# sourceMappingURL=FlashList.test.js.map