mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Reconnect VirtualizedList Source History 1/2 (Revert D41745930)
Summary: This change reverts D41745930 (https://github.com/facebook/react-native/commit/2e3dbe9c2fbff52448e2d5a7c1e4c96b1016cf25) as part of a stack to splice back source history which was lost (Git registered the file moves as additions). It is expected this diff will individually fail. The entire stack should be applied at once. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D43068113 fbshipit-source-id: c8398629fe5dcc1ca4bf02f550adc00c78a8487a
This commit is contained in:
Nick Gerleman
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
d9f2491a71
commit
ebaa00e327
@@ -10,7 +10,7 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
import type {RenderItemProps} from '@react-native/virtualized-lists';
|
||||
import type {RenderItemProps} from '../Lists/VirtualizedList';
|
||||
|
||||
const ScrollView = require('../Components/ScrollView/ScrollView');
|
||||
const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const InteractionManager = require('./InteractionManager');
|
||||
|
||||
/**
|
||||
* A simple class for batching up invocations of a low-pri callback. A timeout is set to run the
|
||||
* callback once after a delay, no matter how many times it's scheduled. Once the delay is reached,
|
||||
* InteractionManager.runAfterInteractions is used to invoke the callback after any hi-pri
|
||||
* interactions are done running.
|
||||
*
|
||||
* Make sure to cleanup with dispose(). Example:
|
||||
*
|
||||
* class Widget extends React.Component {
|
||||
* _batchedSave: new Batchinator(() => this._saveState, 1000);
|
||||
* _saveSate() {
|
||||
* // save this.state to disk
|
||||
* }
|
||||
* componentDidUpdate() {
|
||||
* this._batchedSave.schedule();
|
||||
* }
|
||||
* componentWillUnmount() {
|
||||
* this._batchedSave.dispose();
|
||||
* }
|
||||
* ...
|
||||
* }
|
||||
*/
|
||||
class Batchinator {
|
||||
_callback: () => void;
|
||||
_delay: number;
|
||||
_taskHandle: ?{cancel: () => void, ...};
|
||||
constructor(callback: () => void, delayMS: number) {
|
||||
this._delay = delayMS;
|
||||
this._callback = callback;
|
||||
}
|
||||
/*
|
||||
* Cleanup any pending tasks.
|
||||
*
|
||||
* By default, if there is a pending task the callback is run immediately. Set the option abort to
|
||||
* true to not call the callback if it was pending.
|
||||
*/
|
||||
dispose(options: {abort: boolean, ...} = {abort: false}) {
|
||||
if (this._taskHandle) {
|
||||
this._taskHandle.cancel();
|
||||
if (!options.abort) {
|
||||
this._callback();
|
||||
}
|
||||
this._taskHandle = null;
|
||||
}
|
||||
}
|
||||
schedule() {
|
||||
if (this._taskHandle) {
|
||||
return;
|
||||
}
|
||||
const timeoutHandle = setTimeout(() => {
|
||||
this._taskHandle = InteractionManager.runAfterInteractions(() => {
|
||||
// Note that we clear the handle before invoking the callback so that if the callback calls
|
||||
// schedule again, it will actually schedule another task.
|
||||
this._taskHandle = null;
|
||||
this._callback();
|
||||
});
|
||||
}, this._delay);
|
||||
this._taskHandle = {cancel: () => clearTimeout(timeoutHandle)};
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Batchinator;
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
jest
|
||||
.mock('../../vendor/core/ErrorUtils')
|
||||
.mock('../../BatchedBridge/BatchedBridge');
|
||||
|
||||
function expectToBeCalledOnce(fn) {
|
||||
expect(fn.mock.calls.length).toBe(1);
|
||||
}
|
||||
|
||||
describe('Batchinator', () => {
|
||||
const Batchinator = require('../Batchinator');
|
||||
|
||||
it('executes vanilla tasks', () => {
|
||||
const callback = jest.fn();
|
||||
const batcher = new Batchinator(callback, 10000);
|
||||
batcher.schedule();
|
||||
jest.runAllTimers();
|
||||
expectToBeCalledOnce(callback);
|
||||
});
|
||||
|
||||
it('batches up tasks', () => {
|
||||
const callback = jest.fn();
|
||||
const batcher = new Batchinator(callback, 10000);
|
||||
batcher.schedule();
|
||||
batcher.schedule();
|
||||
batcher.schedule();
|
||||
batcher.schedule();
|
||||
expect(callback).not.toBeCalled();
|
||||
jest.runAllTimers();
|
||||
expectToBeCalledOnce(callback);
|
||||
});
|
||||
|
||||
it('flushes on dispose', () => {
|
||||
const callback = jest.fn();
|
||||
const batcher = new Batchinator(callback, 10000);
|
||||
batcher.schedule();
|
||||
batcher.schedule();
|
||||
batcher.dispose();
|
||||
expectToBeCalledOnce(callback);
|
||||
jest.runAllTimers();
|
||||
expectToBeCalledOnce(callback);
|
||||
});
|
||||
|
||||
it('should call tasks scheduled by the callback', () => {
|
||||
let batcher = null;
|
||||
let hasRescheduled = false;
|
||||
const callback = jest.fn(() => {
|
||||
if (!hasRescheduled) {
|
||||
batcher.schedule();
|
||||
hasRescheduled = true;
|
||||
}
|
||||
});
|
||||
batcher = new Batchinator(callback, 10000);
|
||||
batcher.schedule();
|
||||
jest.runAllTimers();
|
||||
expect(callback.mock.calls.length).toBe(2);
|
||||
});
|
||||
|
||||
it('does not run callbacks more than once', () => {
|
||||
const callback = jest.fn();
|
||||
const batcher = new Batchinator(callback, 10000);
|
||||
batcher.schedule();
|
||||
batcher.schedule();
|
||||
jest.runAllTimers();
|
||||
expectToBeCalledOnce(callback);
|
||||
jest.runAllTimers();
|
||||
expectToBeCalledOnce(callback);
|
||||
batcher.dispose();
|
||||
expectToBeCalledOnce(callback);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict
|
||||
* @format
|
||||
*/
|
||||
|
||||
import invariant from 'invariant';
|
||||
|
||||
export type CellRegion = {
|
||||
first: number,
|
||||
last: number,
|
||||
isSpacer: boolean,
|
||||
};
|
||||
|
||||
export class CellRenderMask {
|
||||
_numCells: number;
|
||||
_regions: Array<CellRegion>;
|
||||
|
||||
constructor(numCells: number) {
|
||||
invariant(
|
||||
numCells >= 0,
|
||||
'CellRenderMask must contain a non-negative number os cells',
|
||||
);
|
||||
|
||||
this._numCells = numCells;
|
||||
|
||||
if (numCells === 0) {
|
||||
this._regions = [];
|
||||
} else {
|
||||
this._regions = [
|
||||
{
|
||||
first: 0,
|
||||
last: numCells - 1,
|
||||
isSpacer: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
enumerateRegions(): $ReadOnlyArray<CellRegion> {
|
||||
return this._regions;
|
||||
}
|
||||
|
||||
addCells(cells: {first: number, last: number}): void {
|
||||
invariant(
|
||||
cells.first >= 0 &&
|
||||
cells.first < this._numCells &&
|
||||
cells.last >= -1 &&
|
||||
cells.last < this._numCells &&
|
||||
cells.last >= cells.first - 1,
|
||||
'CellRenderMask.addCells called with invalid cell range',
|
||||
);
|
||||
|
||||
// VirtualizedList uses inclusive ranges, where zero-count states are
|
||||
// possible. E.g. [0, -1] for no cells, starting at 0.
|
||||
if (cells.last < cells.first) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [firstIntersect, firstIntersectIdx] = this._findRegion(cells.first);
|
||||
const [lastIntersect, lastIntersectIdx] = this._findRegion(cells.last);
|
||||
|
||||
// Fast-path if the cells to add are already all present in the mask. We
|
||||
// will otherwise need to do some mutation.
|
||||
if (firstIntersectIdx === lastIntersectIdx && !firstIntersect.isSpacer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We need to replace the existing covered regions with 1-3 new regions
|
||||
// depending whether we need to split spacers out of overlapping regions.
|
||||
const newLeadRegion: Array<CellRegion> = [];
|
||||
const newTailRegion: Array<CellRegion> = [];
|
||||
const newMainRegion: CellRegion = {
|
||||
...cells,
|
||||
isSpacer: false,
|
||||
};
|
||||
|
||||
if (firstIntersect.first < newMainRegion.first) {
|
||||
if (firstIntersect.isSpacer) {
|
||||
newLeadRegion.push({
|
||||
first: firstIntersect.first,
|
||||
last: newMainRegion.first - 1,
|
||||
isSpacer: true,
|
||||
});
|
||||
} else {
|
||||
newMainRegion.first = firstIntersect.first;
|
||||
}
|
||||
}
|
||||
|
||||
if (lastIntersect.last > newMainRegion.last) {
|
||||
if (lastIntersect.isSpacer) {
|
||||
newTailRegion.push({
|
||||
first: newMainRegion.last + 1,
|
||||
last: lastIntersect.last,
|
||||
isSpacer: true,
|
||||
});
|
||||
} else {
|
||||
newMainRegion.last = lastIntersect.last;
|
||||
}
|
||||
}
|
||||
|
||||
const replacementRegions: Array<CellRegion> = [
|
||||
...newLeadRegion,
|
||||
newMainRegion,
|
||||
...newTailRegion,
|
||||
];
|
||||
const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1;
|
||||
this._regions.splice(
|
||||
firstIntersectIdx,
|
||||
numRegionsToDelete,
|
||||
...replacementRegions,
|
||||
);
|
||||
}
|
||||
|
||||
numCells(): number {
|
||||
return this._numCells;
|
||||
}
|
||||
|
||||
equals(other: CellRenderMask): boolean {
|
||||
return (
|
||||
this._numCells === other._numCells &&
|
||||
this._regions.length === other._regions.length &&
|
||||
this._regions.every(
|
||||
(region, i) =>
|
||||
region.first === other._regions[i].first &&
|
||||
region.last === other._regions[i].last &&
|
||||
region.isSpacer === other._regions[i].isSpacer,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_findRegion(cellIdx: number): [CellRegion, number] {
|
||||
let firstIdx = 0;
|
||||
let lastIdx = this._regions.length - 1;
|
||||
|
||||
while (firstIdx <= lastIdx) {
|
||||
const middleIdx = Math.floor((firstIdx + lastIdx) / 2);
|
||||
const middleRegion = this._regions[middleIdx];
|
||||
|
||||
if (cellIdx >= middleRegion.first && cellIdx <= middleRegion.last) {
|
||||
return [middleRegion, middleIdx];
|
||||
} else if (cellIdx < middleRegion.first) {
|
||||
lastIdx = middleIdx - 1;
|
||||
} else if (cellIdx > middleRegion.last) {
|
||||
firstIdx = middleIdx + 1;
|
||||
}
|
||||
}
|
||||
|
||||
invariant(false, `A region was not found containing cellIdx ${cellIdx}`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict
|
||||
* @format
|
||||
*/
|
||||
|
||||
import invariant from 'invariant';
|
||||
|
||||
export default class ChildListCollection<TList> {
|
||||
_cellKeyToChildren: Map<string, Set<TList>> = new Map();
|
||||
_childrenToCellKey: Map<TList, string> = new Map();
|
||||
|
||||
add(list: TList, cellKey: string): void {
|
||||
invariant(
|
||||
!this._childrenToCellKey.has(list),
|
||||
'Trying to add already present child list',
|
||||
);
|
||||
|
||||
const cellLists = this._cellKeyToChildren.get(cellKey) ?? new Set();
|
||||
cellLists.add(list);
|
||||
this._cellKeyToChildren.set(cellKey, cellLists);
|
||||
|
||||
this._childrenToCellKey.set(list, cellKey);
|
||||
}
|
||||
|
||||
remove(list: TList): void {
|
||||
const cellKey = this._childrenToCellKey.get(list);
|
||||
invariant(cellKey != null, 'Trying to remove non-present child list');
|
||||
this._childrenToCellKey.delete(list);
|
||||
|
||||
const cellLists = this._cellKeyToChildren.get(cellKey);
|
||||
invariant(cellLists, '_cellKeyToChildren should contain cellKey');
|
||||
cellLists.delete(list);
|
||||
|
||||
if (cellLists.size === 0) {
|
||||
this._cellKeyToChildren.delete(cellKey);
|
||||
}
|
||||
}
|
||||
|
||||
forEach(fn: TList => void): void {
|
||||
for (const listSet of this._cellKeyToChildren.values()) {
|
||||
for (const list of listSet) {
|
||||
fn(list);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
forEachInCell(cellKey: string, fn: TList => void): void {
|
||||
const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
|
||||
for (const list of listSet) {
|
||||
fn(list);
|
||||
}
|
||||
}
|
||||
|
||||
anyInCell(cellKey: string, fn: TList => boolean): boolean {
|
||||
const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
|
||||
for (const list of listSet) {
|
||||
if (fn(list)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
size(): number {
|
||||
return this._childrenToCellKey.size;
|
||||
}
|
||||
}
|
||||
@@ -10,10 +10,244 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
import {typeof FillRateHelper as FillRateHelperType} from '@react-native/virtualized-lists';
|
||||
import type {FrameMetricProps} from './VirtualizedListProps';
|
||||
|
||||
const FillRateHelper: FillRateHelperType =
|
||||
require('@react-native/virtualized-lists').FillRateHelper;
|
||||
export type FillRateInfo = Info;
|
||||
|
||||
class Info {
|
||||
any_blank_count: number = 0;
|
||||
any_blank_ms: number = 0;
|
||||
any_blank_speed_sum: number = 0;
|
||||
mostly_blank_count: number = 0;
|
||||
mostly_blank_ms: number = 0;
|
||||
pixels_blank: number = 0;
|
||||
pixels_sampled: number = 0;
|
||||
pixels_scrolled: number = 0;
|
||||
total_time_spent: number = 0;
|
||||
sample_count: number = 0;
|
||||
}
|
||||
|
||||
type FrameMetrics = {
|
||||
inLayout?: boolean,
|
||||
length: number,
|
||||
offset: number,
|
||||
...
|
||||
};
|
||||
|
||||
const DEBUG = false;
|
||||
|
||||
let _listeners: Array<(Info) => void> = [];
|
||||
let _minSampleCount = 10;
|
||||
let _sampleRate = DEBUG ? 1 : null;
|
||||
|
||||
/**
|
||||
* A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
|
||||
* By default the sampling rate is set to zero and this will do nothing. If you want to collect
|
||||
* samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
|
||||
*
|
||||
* Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
|
||||
* `SceneTracker.getActiveScene` to determine the context of the events.
|
||||
*/
|
||||
class FillRateHelper {
|
||||
_anyBlankStartTime: ?number = null;
|
||||
_enabled = false;
|
||||
_getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
|
||||
_info: Info = new Info();
|
||||
_mostlyBlankStartTime: ?number = null;
|
||||
_samplesStartTime: ?number = null;
|
||||
|
||||
static addListener(callback: FillRateInfo => void): {
|
||||
remove: () => void,
|
||||
...
|
||||
} {
|
||||
if (_sampleRate === null) {
|
||||
console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
|
||||
}
|
||||
_listeners.push(callback);
|
||||
return {
|
||||
remove: () => {
|
||||
_listeners = _listeners.filter(listener => callback !== listener);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
static setSampleRate(sampleRate: number) {
|
||||
_sampleRate = sampleRate;
|
||||
}
|
||||
|
||||
static setMinSampleCount(minSampleCount: number) {
|
||||
_minSampleCount = minSampleCount;
|
||||
}
|
||||
|
||||
constructor(
|
||||
getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
|
||||
) {
|
||||
this._getFrameMetrics = getFrameMetrics;
|
||||
this._enabled = (_sampleRate || 0) > Math.random();
|
||||
this._resetData();
|
||||
}
|
||||
|
||||
activate() {
|
||||
if (this._enabled && this._samplesStartTime == null) {
|
||||
DEBUG && console.debug('FillRateHelper: activate');
|
||||
this._samplesStartTime = global.performance.now();
|
||||
}
|
||||
}
|
||||
|
||||
deactivateAndFlush() {
|
||||
if (!this._enabled) {
|
||||
return;
|
||||
}
|
||||
const start = this._samplesStartTime; // const for flow
|
||||
if (start == null) {
|
||||
DEBUG &&
|
||||
console.debug('FillRateHelper: bail on deactivate with no start time');
|
||||
return;
|
||||
}
|
||||
if (this._info.sample_count < _minSampleCount) {
|
||||
// Don't bother with under-sampled events.
|
||||
this._resetData();
|
||||
return;
|
||||
}
|
||||
const total_time_spent = global.performance.now() - start;
|
||||
const info: any = {
|
||||
...this._info,
|
||||
total_time_spent,
|
||||
};
|
||||
if (DEBUG) {
|
||||
const derived = {
|
||||
avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
|
||||
avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
|
||||
avg_speed_when_any_blank:
|
||||
this._info.any_blank_speed_sum / this._info.any_blank_count,
|
||||
any_blank_per_min:
|
||||
this._info.any_blank_count / (total_time_spent / 1000 / 60),
|
||||
any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
|
||||
mostly_blank_per_min:
|
||||
this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
|
||||
mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
|
||||
};
|
||||
for (const key in derived) {
|
||||
// $FlowFixMe[prop-missing]
|
||||
derived[key] = Math.round(1000 * derived[key]) / 1000;
|
||||
}
|
||||
console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
|
||||
}
|
||||
_listeners.forEach(listener => listener(info));
|
||||
this._resetData();
|
||||
}
|
||||
|
||||
computeBlankness(
|
||||
props: {
|
||||
...FrameMetricProps,
|
||||
initialNumToRender?: ?number,
|
||||
...
|
||||
},
|
||||
cellsAroundViewport: {
|
||||
first: number,
|
||||
last: number,
|
||||
...
|
||||
},
|
||||
scrollMetrics: {
|
||||
dOffset: number,
|
||||
offset: number,
|
||||
velocity: number,
|
||||
visibleLength: number,
|
||||
...
|
||||
},
|
||||
): number {
|
||||
if (
|
||||
!this._enabled ||
|
||||
props.getItemCount(props.data) === 0 ||
|
||||
cellsAroundViewport.last < cellsAroundViewport.first ||
|
||||
this._samplesStartTime == null
|
||||
) {
|
||||
return 0;
|
||||
}
|
||||
const {dOffset, offset, velocity, visibleLength} = scrollMetrics;
|
||||
|
||||
// Denominator metrics that we track for all events - most of the time there is no blankness and
|
||||
// we want to capture that.
|
||||
this._info.sample_count++;
|
||||
this._info.pixels_sampled += Math.round(visibleLength);
|
||||
this._info.pixels_scrolled += Math.round(Math.abs(dOffset));
|
||||
const scrollSpeed = Math.round(Math.abs(velocity) * 1000); // px / sec
|
||||
|
||||
// Whether blank now or not, record the elapsed time blank if we were blank last time.
|
||||
const now = global.performance.now();
|
||||
if (this._anyBlankStartTime != null) {
|
||||
this._info.any_blank_ms += now - this._anyBlankStartTime;
|
||||
}
|
||||
this._anyBlankStartTime = null;
|
||||
if (this._mostlyBlankStartTime != null) {
|
||||
this._info.mostly_blank_ms += now - this._mostlyBlankStartTime;
|
||||
}
|
||||
this._mostlyBlankStartTime = null;
|
||||
|
||||
let blankTop = 0;
|
||||
let first = cellsAroundViewport.first;
|
||||
let firstFrame = this._getFrameMetrics(first, props);
|
||||
while (
|
||||
first <= cellsAroundViewport.last &&
|
||||
(!firstFrame || !firstFrame.inLayout)
|
||||
) {
|
||||
firstFrame = this._getFrameMetrics(first, props);
|
||||
first++;
|
||||
}
|
||||
// Only count blankTop if we aren't rendering the first item, otherwise we will count the header
|
||||
// as blank.
|
||||
if (firstFrame && first > 0) {
|
||||
blankTop = Math.min(
|
||||
visibleLength,
|
||||
Math.max(0, firstFrame.offset - offset),
|
||||
);
|
||||
}
|
||||
let blankBottom = 0;
|
||||
let last = cellsAroundViewport.last;
|
||||
let lastFrame = this._getFrameMetrics(last, props);
|
||||
while (
|
||||
last >= cellsAroundViewport.first &&
|
||||
(!lastFrame || !lastFrame.inLayout)
|
||||
) {
|
||||
lastFrame = this._getFrameMetrics(last, props);
|
||||
last--;
|
||||
}
|
||||
// Only count blankBottom if we aren't rendering the last item, otherwise we will count the
|
||||
// footer as blank.
|
||||
if (lastFrame && last < props.getItemCount(props.data) - 1) {
|
||||
const bottomEdge = lastFrame.offset + lastFrame.length;
|
||||
blankBottom = Math.min(
|
||||
visibleLength,
|
||||
Math.max(0, offset + visibleLength - bottomEdge),
|
||||
);
|
||||
}
|
||||
const pixels_blank = Math.round(blankTop + blankBottom);
|
||||
const blankness = pixels_blank / visibleLength;
|
||||
if (blankness > 0) {
|
||||
this._anyBlankStartTime = now;
|
||||
this._info.any_blank_speed_sum += scrollSpeed;
|
||||
this._info.any_blank_count++;
|
||||
this._info.pixels_blank += pixels_blank;
|
||||
if (blankness > 0.5) {
|
||||
this._mostlyBlankStartTime = now;
|
||||
this._info.mostly_blank_count++;
|
||||
}
|
||||
} else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
|
||||
this.deactivateAndFlush();
|
||||
}
|
||||
return blankness;
|
||||
}
|
||||
|
||||
enabled(): boolean {
|
||||
return this._enabled;
|
||||
}
|
||||
|
||||
_resetData() {
|
||||
this._anyBlankStartTime = null;
|
||||
this._info = new Info();
|
||||
this._mostlyBlankStartTime = null;
|
||||
this._samplesStartTime = null;
|
||||
}
|
||||
}
|
||||
|
||||
export type {FillRateInfo} from '@react-native/virtualized-lists';
|
||||
module.exports = FillRateHelper;
|
||||
|
||||
Vendored
+1
-1
@@ -12,7 +12,7 @@ import type {
|
||||
ListRenderItem,
|
||||
ViewToken,
|
||||
VirtualizedListProps,
|
||||
} from '@react-native/virtualized-lists';
|
||||
} from './VirtualizedList';
|
||||
import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
|
||||
import {StyleProp} from '../StyleSheet/StyleSheet';
|
||||
import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
|
||||
|
||||
@@ -11,17 +11,14 @@
|
||||
import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
|
||||
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {
|
||||
RenderItemProps,
|
||||
RenderItemType,
|
||||
ViewabilityConfigCallbackPair,
|
||||
ViewToken,
|
||||
} from '@react-native/virtualized-lists';
|
||||
} from './ViewabilityHelper';
|
||||
import type {RenderItemProps, RenderItemType} from './VirtualizedList';
|
||||
|
||||
import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
|
||||
import {
|
||||
VirtualizedList,
|
||||
keyExtractor as defaultKeyExtractor,
|
||||
} from '@react-native/virtualized-lists';
|
||||
import VirtualizedList from './VirtualizedList';
|
||||
import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
|
||||
import memoizeOne from 'memoize-one';
|
||||
|
||||
const View = require('../Components/View/View');
|
||||
|
||||
@@ -14,13 +14,8 @@ const View = require('../Components/View/View');
|
||||
import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
|
||||
import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
|
||||
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {
|
||||
RenderItemType,
|
||||
RenderItemProps,
|
||||
ViewToken,
|
||||
ViewabilityConfigCallbackPair,
|
||||
} from '@react-native/virtualized-lists';
|
||||
import {typeof VirtualizedList} from '@react-native/virtualized-lists';
|
||||
import type {RenderItemType} from './VirtualizedList';
|
||||
import typeof VirtualizedList from './VirtualizedList';
|
||||
|
||||
type RequiredProps<ItemT> = {|
|
||||
/**
|
||||
|
||||
Vendored
+1
-1
@@ -11,7 +11,7 @@ import type * as React from 'react';
|
||||
import type {
|
||||
ListRenderItemInfo,
|
||||
VirtualizedListWithoutRenderItemProps,
|
||||
} from '@react-native/virtualized-lists';
|
||||
} from './VirtualizedList';
|
||||
import type {
|
||||
ScrollView,
|
||||
ScrollViewProps,
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
|
||||
import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
|
||||
import type {
|
||||
Props as VirtualizedSectionListProps,
|
||||
ScrollToLocationParamsType,
|
||||
SectionBase as _SectionBase,
|
||||
VirtualizedSectionListProps,
|
||||
} from '@react-native/virtualized-lists';
|
||||
} from './VirtualizedSectionList';
|
||||
|
||||
import Platform from '../Utilities/Platform';
|
||||
import {VirtualizedSectionList} from '@react-native/virtualized-lists';
|
||||
import VirtualizedSectionList from './VirtualizedSectionList';
|
||||
import * as React from 'react';
|
||||
|
||||
type Item = any;
|
||||
|
||||
@@ -12,14 +12,14 @@
|
||||
|
||||
import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
|
||||
import type {
|
||||
Props as VirtualizedSectionListProps,
|
||||
ScrollToLocationParamsType,
|
||||
SectionBase as _SectionBase,
|
||||
VirtualizedSectionListProps,
|
||||
} from '@react-native/virtualized-lists';
|
||||
} from './VirtualizedSectionList';
|
||||
import type {AbstractComponent, Element, ElementRef} from 'react';
|
||||
|
||||
import Platform from '../Utilities/Platform';
|
||||
import {VirtualizedSectionList} from '@react-native/virtualized-lists';
|
||||
import VirtualizedSectionList from './VirtualizedSectionList';
|
||||
import React, {forwardRef, useImperativeHandle, useRef} from 'react';
|
||||
|
||||
type Item = any;
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict
|
||||
* @format
|
||||
*/
|
||||
|
||||
import invariant from 'invariant';
|
||||
import * as React from 'react';
|
||||
|
||||
/**
|
||||
* `setState` is called asynchronously, and should not rely on the value of
|
||||
* `this.props` or `this.state`:
|
||||
* https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
|
||||
*
|
||||
* SafePureComponent adds runtime enforcement, to catch cases where these
|
||||
* variables are read in a state updater function, instead of the ones passed
|
||||
* in.
|
||||
*/
|
||||
export default class StateSafePureComponent<
|
||||
Props,
|
||||
State: interface {},
|
||||
> extends React.PureComponent<Props, State> {
|
||||
_inAsyncStateUpdate = false;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this._installSetStateHooks();
|
||||
}
|
||||
|
||||
setState(
|
||||
partialState: ?($Shape<State> | ((State, Props) => ?$Shape<State>)),
|
||||
callback?: () => mixed,
|
||||
): void {
|
||||
if (typeof partialState === 'function') {
|
||||
super.setState((state, props) => {
|
||||
this._inAsyncStateUpdate = true;
|
||||
let ret;
|
||||
try {
|
||||
ret = partialState(state, props);
|
||||
} catch (err) {
|
||||
throw err;
|
||||
} finally {
|
||||
this._inAsyncStateUpdate = false;
|
||||
}
|
||||
return ret;
|
||||
}, callback);
|
||||
} else {
|
||||
super.setState(partialState, callback);
|
||||
}
|
||||
}
|
||||
|
||||
_installSetStateHooks() {
|
||||
const that = this;
|
||||
let {props, state} = this;
|
||||
|
||||
Object.defineProperty(this, 'props', {
|
||||
get() {
|
||||
invariant(
|
||||
!that._inAsyncStateUpdate,
|
||||
'"this.props" should not be accessed during state updates',
|
||||
);
|
||||
return props;
|
||||
},
|
||||
set(newProps: Props) {
|
||||
props = newProps;
|
||||
},
|
||||
});
|
||||
Object.defineProperty(this, 'state', {
|
||||
get() {
|
||||
invariant(
|
||||
!that._inAsyncStateUpdate,
|
||||
'"this.state" should not be acceessed during state updates',
|
||||
);
|
||||
return state;
|
||||
},
|
||||
set(newState: State) {
|
||||
state = newState;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,351 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
export type {
|
||||
ViewToken,
|
||||
ViewabilityConfig,
|
||||
ViewabilityConfigCallbackPair,
|
||||
} from '@react-native/virtualized-lists';
|
||||
import type {FrameMetricProps} from './VirtualizedListProps';
|
||||
|
||||
import {typeof ViewabilityHelper as ViewabilityHelperType} from '@react-native/virtualized-lists';
|
||||
const invariant = require('invariant');
|
||||
|
||||
const ViewabilityHelper: ViewabilityHelperType =
|
||||
require('@react-native/virtualized-lists').ViewabilityHelper;
|
||||
export type ViewToken = {
|
||||
item: any,
|
||||
key: string,
|
||||
index: ?number,
|
||||
isViewable: boolean,
|
||||
section?: any,
|
||||
...
|
||||
};
|
||||
|
||||
export type ViewabilityConfigCallbackPair = {
|
||||
viewabilityConfig: ViewabilityConfig,
|
||||
onViewableItemsChanged: (info: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
...
|
||||
}) => void,
|
||||
...
|
||||
};
|
||||
|
||||
export type ViewabilityConfig = {|
|
||||
/**
|
||||
* Minimum amount of time (in milliseconds) that an item must be physically viewable before the
|
||||
* viewability callback will be fired. A high number means that scrolling through content without
|
||||
* stopping will not mark the content as viewable.
|
||||
*/
|
||||
minimumViewTime?: number,
|
||||
|
||||
/**
|
||||
* Percent of viewport that must be covered for a partially occluded item to count as
|
||||
* "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
|
||||
* that a single pixel in the viewport makes the item viewable, and a value of 100 means that
|
||||
* an item must be either entirely visible or cover the entire viewport to count as viewable.
|
||||
*/
|
||||
viewAreaCoveragePercentThreshold?: number,
|
||||
|
||||
/**
|
||||
* Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
|
||||
* rather than the fraction of the viewable area it covers.
|
||||
*/
|
||||
itemVisiblePercentThreshold?: number,
|
||||
|
||||
/**
|
||||
* Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
|
||||
* render.
|
||||
*/
|
||||
waitForInteraction?: boolean,
|
||||
|};
|
||||
|
||||
/**
|
||||
* A Utility class for calculating viewable items based on current metrics like scroll position and
|
||||
* layout.
|
||||
*
|
||||
* An item is said to be in a "viewable" state when any of the following
|
||||
* is true for longer than `minimumViewTime` milliseconds (after an interaction if `waitForInteraction`
|
||||
* is true):
|
||||
*
|
||||
* - Occupying >= `viewAreaCoveragePercentThreshold` of the view area XOR fraction of the item
|
||||
* visible in the view area >= `itemVisiblePercentThreshold`.
|
||||
* - Entirely visible on screen
|
||||
*/
|
||||
class ViewabilityHelper {
|
||||
_config: ViewabilityConfig;
|
||||
_hasInteracted: boolean = false;
|
||||
_timers: Set<number> = new Set();
|
||||
_viewableIndices: Array<number> = [];
|
||||
_viewableItems: Map<string, ViewToken> = new Map();
|
||||
|
||||
constructor(
|
||||
config: ViewabilityConfig = {viewAreaCoveragePercentThreshold: 0},
|
||||
) {
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup, e.g. on unmount. Clears any pending timers.
|
||||
*/
|
||||
dispose() {
|
||||
/* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
|
||||
* comment suppresses an error found when Flow v0.63 was deployed. To see
|
||||
* the error delete this comment and run Flow. */
|
||||
this._timers.forEach(clearTimeout);
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines which items are viewable based on the current metrics and config.
|
||||
*/
|
||||
computeViewableItems(
|
||||
props: FrameMetricProps,
|
||||
scrollOffset: number,
|
||||
viewportHeight: number,
|
||||
getFrameMetrics: (
|
||||
index: number,
|
||||
props: FrameMetricProps,
|
||||
) => ?{
|
||||
length: number,
|
||||
offset: number,
|
||||
...
|
||||
},
|
||||
// Optional optimization to reduce the scan size
|
||||
renderRange?: {
|
||||
first: number,
|
||||
last: number,
|
||||
...
|
||||
},
|
||||
): Array<number> {
|
||||
const itemCount = props.getItemCount(props.data);
|
||||
const {itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold} =
|
||||
this._config;
|
||||
const viewAreaMode = viewAreaCoveragePercentThreshold != null;
|
||||
const viewablePercentThreshold = viewAreaMode
|
||||
? viewAreaCoveragePercentThreshold
|
||||
: itemVisiblePercentThreshold;
|
||||
invariant(
|
||||
viewablePercentThreshold != null &&
|
||||
(itemVisiblePercentThreshold != null) !==
|
||||
(viewAreaCoveragePercentThreshold != null),
|
||||
'Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold',
|
||||
);
|
||||
const viewableIndices = [];
|
||||
if (itemCount === 0) {
|
||||
return viewableIndices;
|
||||
}
|
||||
let firstVisible = -1;
|
||||
const {first, last} = renderRange || {first: 0, last: itemCount - 1};
|
||||
if (last >= itemCount) {
|
||||
console.warn(
|
||||
'Invalid render range computing viewability ' +
|
||||
JSON.stringify({renderRange, itemCount}),
|
||||
);
|
||||
return [];
|
||||
}
|
||||
for (let idx = first; idx <= last; idx++) {
|
||||
const metrics = getFrameMetrics(idx, props);
|
||||
if (!metrics) {
|
||||
continue;
|
||||
}
|
||||
const top = metrics.offset - scrollOffset;
|
||||
const bottom = top + metrics.length;
|
||||
if (top < viewportHeight && bottom > 0) {
|
||||
firstVisible = idx;
|
||||
if (
|
||||
_isViewable(
|
||||
viewAreaMode,
|
||||
viewablePercentThreshold,
|
||||
top,
|
||||
bottom,
|
||||
viewportHeight,
|
||||
metrics.length,
|
||||
)
|
||||
) {
|
||||
viewableIndices.push(idx);
|
||||
}
|
||||
} else if (firstVisible >= 0) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return viewableIndices;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures out which items are viewable and how that has changed from before and calls
|
||||
* `onViewableItemsChanged` as appropriate.
|
||||
*/
|
||||
onUpdate(
|
||||
props: FrameMetricProps,
|
||||
scrollOffset: number,
|
||||
viewportHeight: number,
|
||||
getFrameMetrics: (
|
||||
index: number,
|
||||
props: FrameMetricProps,
|
||||
) => ?{
|
||||
length: number,
|
||||
offset: number,
|
||||
...
|
||||
},
|
||||
createViewToken: (
|
||||
index: number,
|
||||
isViewable: boolean,
|
||||
props: FrameMetricProps,
|
||||
) => ViewToken,
|
||||
onViewableItemsChanged: ({
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
...
|
||||
}) => void,
|
||||
// Optional optimization to reduce the scan size
|
||||
renderRange?: {
|
||||
first: number,
|
||||
last: number,
|
||||
...
|
||||
},
|
||||
): void {
|
||||
const itemCount = props.getItemCount(props.data);
|
||||
if (
|
||||
(this._config.waitForInteraction && !this._hasInteracted) ||
|
||||
itemCount === 0 ||
|
||||
!getFrameMetrics(0, props)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
let viewableIndices: Array<number> = [];
|
||||
if (itemCount) {
|
||||
viewableIndices = this.computeViewableItems(
|
||||
props,
|
||||
scrollOffset,
|
||||
viewportHeight,
|
||||
getFrameMetrics,
|
||||
renderRange,
|
||||
);
|
||||
}
|
||||
if (
|
||||
this._viewableIndices.length === viewableIndices.length &&
|
||||
this._viewableIndices.every((v, ii) => v === viewableIndices[ii])
|
||||
) {
|
||||
// We might get a lot of scroll events where visibility doesn't change and we don't want to do
|
||||
// extra work in those cases.
|
||||
return;
|
||||
}
|
||||
this._viewableIndices = viewableIndices;
|
||||
if (this._config.minimumViewTime) {
|
||||
const handle: TimeoutID = setTimeout(() => {
|
||||
/* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
|
||||
* comment suppresses an error found when Flow v0.63 was deployed. To
|
||||
* see the error delete this comment and run Flow. */
|
||||
this._timers.delete(handle);
|
||||
this._onUpdateSync(
|
||||
props,
|
||||
viewableIndices,
|
||||
onViewableItemsChanged,
|
||||
createViewToken,
|
||||
);
|
||||
}, this._config.minimumViewTime);
|
||||
/* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
|
||||
* comment suppresses an error found when Flow v0.63 was deployed. To see
|
||||
* the error delete this comment and run Flow. */
|
||||
this._timers.add(handle);
|
||||
} else {
|
||||
this._onUpdateSync(
|
||||
props,
|
||||
viewableIndices,
|
||||
onViewableItemsChanged,
|
||||
createViewToken,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* clean-up cached _viewableIndices to evaluate changed items on next update
|
||||
*/
|
||||
resetViewableIndices() {
|
||||
this._viewableIndices = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Records that an interaction has happened even if there has been no scroll.
|
||||
*/
|
||||
recordInteraction() {
|
||||
this._hasInteracted = true;
|
||||
}
|
||||
|
||||
_onUpdateSync(
|
||||
props: FrameMetricProps,
|
||||
viewableIndicesToCheck: Array<number>,
|
||||
onViewableItemsChanged: ({
|
||||
changed: Array<ViewToken>,
|
||||
viewableItems: Array<ViewToken>,
|
||||
...
|
||||
}) => void,
|
||||
createViewToken: (
|
||||
index: number,
|
||||
isViewable: boolean,
|
||||
props: FrameMetricProps,
|
||||
) => ViewToken,
|
||||
) {
|
||||
// Filter out indices that have gone out of view since this call was scheduled.
|
||||
viewableIndicesToCheck = viewableIndicesToCheck.filter(ii =>
|
||||
this._viewableIndices.includes(ii),
|
||||
);
|
||||
const prevItems = this._viewableItems;
|
||||
const nextItems = new Map(
|
||||
viewableIndicesToCheck.map(ii => {
|
||||
const viewable = createViewToken(ii, true, props);
|
||||
return [viewable.key, viewable];
|
||||
}),
|
||||
);
|
||||
|
||||
const changed = [];
|
||||
for (const [key, viewable] of nextItems) {
|
||||
if (!prevItems.has(key)) {
|
||||
changed.push(viewable);
|
||||
}
|
||||
}
|
||||
for (const [key, viewable] of prevItems) {
|
||||
if (!nextItems.has(key)) {
|
||||
changed.push({...viewable, isViewable: false});
|
||||
}
|
||||
}
|
||||
if (changed.length > 0) {
|
||||
this._viewableItems = nextItems;
|
||||
onViewableItemsChanged({
|
||||
viewableItems: Array.from(nextItems.values()),
|
||||
changed,
|
||||
viewabilityConfig: this._config,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _isViewable(
|
||||
viewAreaMode: boolean,
|
||||
viewablePercentThreshold: number,
|
||||
top: number,
|
||||
bottom: number,
|
||||
viewportHeight: number,
|
||||
itemLength: number,
|
||||
): boolean {
|
||||
if (_isEntirelyVisible(top, bottom, viewportHeight)) {
|
||||
return true;
|
||||
} else {
|
||||
const pixels = _getPixelsVisible(top, bottom, viewportHeight);
|
||||
const percent =
|
||||
100 * (viewAreaMode ? pixels / viewportHeight : pixels / itemLength);
|
||||
return percent >= viewablePercentThreshold;
|
||||
}
|
||||
}
|
||||
|
||||
function _getPixelsVisible(
|
||||
top: number,
|
||||
bottom: number,
|
||||
viewportHeight: number,
|
||||
): number {
|
||||
const visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
|
||||
return Math.max(0, visibleHeight);
|
||||
}
|
||||
|
||||
function _isEntirelyVisible(
|
||||
top: number,
|
||||
bottom: number,
|
||||
viewportHeight: number,
|
||||
): boolean {
|
||||
return top >= 0 && bottom <= viewportHeight && bottom > top;
|
||||
}
|
||||
|
||||
module.exports = ViewabilityHelper;
|
||||
|
||||
@@ -10,9 +10,249 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
import {typeof keyExtractor as KeyExtractorType} from '@react-native/virtualized-lists';
|
||||
import type {FrameMetricProps} from './VirtualizedListProps';
|
||||
|
||||
const keyExtractor: KeyExtractorType =
|
||||
require('@react-native/virtualized-lists').keyExtractor;
|
||||
/**
|
||||
* Used to find the indices of the frames that overlap the given offsets. Useful for finding the
|
||||
* items that bound different windows of content, such as the visible area or the buffered overscan
|
||||
* area.
|
||||
*/
|
||||
export function elementsThatOverlapOffsets(
|
||||
offsets: Array<number>,
|
||||
props: FrameMetricProps,
|
||||
getFrameMetrics: (
|
||||
index: number,
|
||||
props: FrameMetricProps,
|
||||
) => {
|
||||
length: number,
|
||||
offset: number,
|
||||
...
|
||||
},
|
||||
zoomScale: number = 1,
|
||||
): Array<number> {
|
||||
const itemCount = props.getItemCount(props.data);
|
||||
const result = [];
|
||||
for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
|
||||
const currentOffset = offsets[offsetIndex];
|
||||
let left = 0;
|
||||
let right = itemCount - 1;
|
||||
|
||||
module.exports = {keyExtractor};
|
||||
while (left <= right) {
|
||||
// eslint-disable-next-line no-bitwise
|
||||
const mid = left + ((right - left) >>> 1);
|
||||
const frame = getFrameMetrics(mid, props);
|
||||
const scaledOffsetStart = frame.offset * zoomScale;
|
||||
const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale;
|
||||
|
||||
// We want the first frame that contains the offset, with inclusive bounds. Thus, for the
|
||||
// first frame the scaledOffsetStart is inclusive, while for other frames it is exclusive.
|
||||
if (
|
||||
(mid === 0 && currentOffset < scaledOffsetStart) ||
|
||||
(mid !== 0 && currentOffset <= scaledOffsetStart)
|
||||
) {
|
||||
right = mid - 1;
|
||||
} else if (currentOffset > scaledOffsetEnd) {
|
||||
left = mid + 1;
|
||||
} else {
|
||||
result[offsetIndex] = mid;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the number of elements in the `next` range that are new compared to the `prev` range.
|
||||
* Handy for calculating how many new items will be rendered when the render window changes so we
|
||||
* can restrict the number of new items render at once so that content can appear on the screen
|
||||
* faster.
|
||||
*/
|
||||
export function newRangeCount(
|
||||
prev: {
|
||||
first: number,
|
||||
last: number,
|
||||
...
|
||||
},
|
||||
next: {
|
||||
first: number,
|
||||
last: number,
|
||||
...
|
||||
},
|
||||
): number {
|
||||
return (
|
||||
next.last -
|
||||
next.first +
|
||||
1 -
|
||||
Math.max(
|
||||
0,
|
||||
1 + Math.min(next.last, prev.last) - Math.max(next.first, prev.first),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom logic for determining which items should be rendered given the current frame and scroll
|
||||
* metrics, as well as the previous render state. The algorithm may evolve over time, but generally
|
||||
* prioritizes the visible area first, then expands that with overscan regions ahead and behind,
|
||||
* biased in the direction of scroll.
|
||||
*/
|
||||
export function computeWindowedRenderLimits(
|
||||
props: FrameMetricProps,
|
||||
maxToRenderPerBatch: number,
|
||||
windowSize: number,
|
||||
prev: {
|
||||
first: number,
|
||||
last: number,
|
||||
},
|
||||
getFrameMetricsApprox: (
|
||||
index: number,
|
||||
props: FrameMetricProps,
|
||||
) => {
|
||||
length: number,
|
||||
offset: number,
|
||||
...
|
||||
},
|
||||
scrollMetrics: {
|
||||
dt: number,
|
||||
offset: number,
|
||||
velocity: number,
|
||||
visibleLength: number,
|
||||
zoomScale: number,
|
||||
...
|
||||
},
|
||||
): {
|
||||
first: number,
|
||||
last: number,
|
||||
} {
|
||||
const itemCount = props.getItemCount(props.data);
|
||||
if (itemCount === 0) {
|
||||
return {first: 0, last: -1};
|
||||
}
|
||||
const {offset, velocity, visibleLength, zoomScale = 1} = scrollMetrics;
|
||||
|
||||
// Start with visible area, then compute maximum overscan region by expanding from there, biased
|
||||
// in the direction of scroll. Total overscan area is capped, which should cap memory consumption
|
||||
// too.
|
||||
const visibleBegin = Math.max(0, offset);
|
||||
const visibleEnd = visibleBegin + visibleLength;
|
||||
const overscanLength = (windowSize - 1) * visibleLength;
|
||||
|
||||
// Considering velocity seems to introduce more churn than it's worth.
|
||||
const leadFactor = 0.5; // Math.max(0, Math.min(1, velocity / 25 + 0.5));
|
||||
|
||||
const fillPreference =
|
||||
velocity > 1 ? 'after' : velocity < -1 ? 'before' : 'none';
|
||||
|
||||
const overscanBegin = Math.max(
|
||||
0,
|
||||
visibleBegin - (1 - leadFactor) * overscanLength,
|
||||
);
|
||||
const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength);
|
||||
|
||||
const lastItemOffset =
|
||||
getFrameMetricsApprox(itemCount - 1, props).offset * zoomScale;
|
||||
if (lastItemOffset < overscanBegin) {
|
||||
// Entire list is before our overscan window
|
||||
return {
|
||||
first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
|
||||
last: itemCount - 1,
|
||||
};
|
||||
}
|
||||
|
||||
// Find the indices that correspond to the items at the render boundaries we're targeting.
|
||||
let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
|
||||
[overscanBegin, visibleBegin, visibleEnd, overscanEnd],
|
||||
props,
|
||||
getFrameMetricsApprox,
|
||||
zoomScale,
|
||||
);
|
||||
overscanFirst = overscanFirst == null ? 0 : overscanFirst;
|
||||
first = first == null ? Math.max(0, overscanFirst) : first;
|
||||
overscanLast = overscanLast == null ? itemCount - 1 : overscanLast;
|
||||
last =
|
||||
last == null
|
||||
? Math.min(overscanLast, first + maxToRenderPerBatch - 1)
|
||||
: last;
|
||||
const visible = {first, last};
|
||||
|
||||
// We want to limit the number of new cells we're rendering per batch so that we can fill the
|
||||
// content on the screen quickly. If we rendered the entire overscan window at once, the user
|
||||
// could be staring at white space for a long time waiting for a bunch of offscreen content to
|
||||
// render.
|
||||
let newCellCount = newRangeCount(prev, visible);
|
||||
|
||||
while (true) {
|
||||
if (first <= overscanFirst && last >= overscanLast) {
|
||||
// If we fill the entire overscan range, we're done.
|
||||
break;
|
||||
}
|
||||
const maxNewCells = newCellCount >= maxToRenderPerBatch;
|
||||
const firstWillAddMore = first <= prev.first || first > prev.last;
|
||||
const firstShouldIncrement =
|
||||
first > overscanFirst && (!maxNewCells || !firstWillAddMore);
|
||||
const lastWillAddMore = last >= prev.last || last < prev.first;
|
||||
const lastShouldIncrement =
|
||||
last < overscanLast && (!maxNewCells || !lastWillAddMore);
|
||||
if (maxNewCells && !firstShouldIncrement && !lastShouldIncrement) {
|
||||
// We only want to stop if we've hit maxNewCells AND we cannot increment first or last
|
||||
// without rendering new items. This let's us preserve as many already rendered items as
|
||||
// possible, reducing render churn and keeping the rendered overscan range as large as
|
||||
// possible.
|
||||
break;
|
||||
}
|
||||
if (
|
||||
firstShouldIncrement &&
|
||||
!(fillPreference === 'after' && lastShouldIncrement && lastWillAddMore)
|
||||
) {
|
||||
if (firstWillAddMore) {
|
||||
newCellCount++;
|
||||
}
|
||||
first--;
|
||||
}
|
||||
if (
|
||||
lastShouldIncrement &&
|
||||
!(fillPreference === 'before' && firstShouldIncrement && firstWillAddMore)
|
||||
) {
|
||||
if (lastWillAddMore) {
|
||||
newCellCount++;
|
||||
}
|
||||
last++;
|
||||
}
|
||||
}
|
||||
if (
|
||||
!(
|
||||
last >= first &&
|
||||
first >= 0 &&
|
||||
last < itemCount &&
|
||||
first >= overscanFirst &&
|
||||
last <= overscanLast &&
|
||||
first <= visible.first &&
|
||||
last >= visible.last
|
||||
)
|
||||
) {
|
||||
throw new Error(
|
||||
'Bad window calculation ' +
|
||||
JSON.stringify({
|
||||
first,
|
||||
last,
|
||||
itemCount,
|
||||
overscanFirst,
|
||||
overscanLast,
|
||||
visible,
|
||||
}),
|
||||
);
|
||||
}
|
||||
return {first, last};
|
||||
}
|
||||
|
||||
export function keyExtractor(item: any, index: number): string {
|
||||
if (typeof item === 'object' && item?.key != null) {
|
||||
return item.key;
|
||||
}
|
||||
if (typeof item === 'object' && item?.id != null) {
|
||||
return item.id;
|
||||
}
|
||||
return String(index);
|
||||
}
|
||||
|
||||
Vendored
+374
@@ -0,0 +1,374 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
import type * as React from 'react';
|
||||
import type {LayoutChangeEvent} from '../../types';
|
||||
import {StyleProp} from '../StyleSheet/StyleSheet';
|
||||
import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
|
||||
import type {
|
||||
ScrollResponderMixin,
|
||||
ScrollView,
|
||||
ScrollViewProps,
|
||||
} from '../Components/ScrollView/ScrollView';
|
||||
import type {View} from '../Components/View/View';
|
||||
|
||||
export interface ViewToken {
|
||||
item: any;
|
||||
key: string;
|
||||
index: number | null;
|
||||
isViewable: boolean;
|
||||
section?: any;
|
||||
}
|
||||
|
||||
export interface ViewabilityConfig {
|
||||
/**
|
||||
* Minimum amount of time (in milliseconds) that an item must be physically viewable before the
|
||||
* viewability callback will be fired. A high number means that scrolling through content without
|
||||
* stopping will not mark the content as viewable.
|
||||
*/
|
||||
minimumViewTime?: number | undefined;
|
||||
|
||||
/**
|
||||
* Percent of viewport that must be covered for a partially occluded item to count as
|
||||
* "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
|
||||
* that a single pixel in the viewport makes the item viewable, and a value of 100 means that
|
||||
* an item must be either entirely visible or cover the entire viewport to count as viewable.
|
||||
*/
|
||||
viewAreaCoveragePercentThreshold?: number | undefined;
|
||||
|
||||
/**
|
||||
* Similar to `viewAreaCoveragePercentThreshold`, but considers the percent of the item that is visible,
|
||||
* rather than the fraction of the viewable area it covers.
|
||||
*/
|
||||
itemVisiblePercentThreshold?: number | undefined;
|
||||
|
||||
/**
|
||||
* Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
|
||||
* render.
|
||||
*/
|
||||
waitForInteraction?: boolean | undefined;
|
||||
}
|
||||
|
||||
export interface ViewabilityConfigCallbackPair {
|
||||
viewabilityConfig: ViewabilityConfig;
|
||||
onViewableItemsChanged:
|
||||
| ((info: {
|
||||
viewableItems: Array<ViewToken>;
|
||||
changed: Array<ViewToken>;
|
||||
}) => void)
|
||||
| null;
|
||||
}
|
||||
|
||||
export type ViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPair[];
|
||||
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/flatlist#props
|
||||
*/
|
||||
|
||||
export interface ListRenderItemInfo<ItemT> {
|
||||
item: ItemT;
|
||||
|
||||
index: number;
|
||||
|
||||
separators: {
|
||||
highlight: () => void;
|
||||
unhighlight: () => void;
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
|
||||
};
|
||||
}
|
||||
|
||||
export type ListRenderItem<ItemT> = (
|
||||
info: ListRenderItemInfo<ItemT>,
|
||||
) => React.ReactElement | null;
|
||||
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/virtualizedlist
|
||||
*/
|
||||
export class VirtualizedList<ItemT> extends React.Component<
|
||||
VirtualizedListProps<ItemT>
|
||||
> {
|
||||
scrollToEnd: (params?: {animated?: boolean | undefined}) => void;
|
||||
scrollToIndex: (params: {
|
||||
animated?: boolean | undefined;
|
||||
index: number;
|
||||
viewOffset?: number | undefined;
|
||||
viewPosition?: number | undefined;
|
||||
}) => void;
|
||||
scrollToItem: (params: {
|
||||
animated?: boolean | undefined;
|
||||
item: ItemT;
|
||||
viewOffset?: number | undefined;
|
||||
viewPosition?: number | undefined;
|
||||
}) => void;
|
||||
|
||||
/**
|
||||
* Scroll to a specific content pixel offset in the list.
|
||||
* Param `offset` expects the offset to scroll to. In case of horizontal is true, the
|
||||
* offset is the x-value, in any other case the offset is the y-value.
|
||||
* Param `animated` (true by default) defines whether the list should do an animation while scrolling.
|
||||
*/
|
||||
scrollToOffset: (params: {
|
||||
animated?: boolean | undefined;
|
||||
offset: number;
|
||||
}) => void;
|
||||
|
||||
recordInteraction: () => void;
|
||||
|
||||
getScrollRef: () =>
|
||||
| React.ElementRef<typeof ScrollView>
|
||||
| React.ElementRef<typeof View>
|
||||
| null;
|
||||
|
||||
getScrollResponder: () => ScrollResponderMixin | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/virtualizedlist#props
|
||||
*/
|
||||
|
||||
export interface VirtualizedListProps<ItemT>
|
||||
extends VirtualizedListWithoutRenderItemProps<ItemT> {
|
||||
renderItem: ListRenderItem<ItemT> | null | undefined;
|
||||
}
|
||||
|
||||
export interface VirtualizedListWithoutRenderItemProps<ItemT>
|
||||
extends ScrollViewProps {
|
||||
/**
|
||||
* Rendered in between each item, but not at the top or bottom
|
||||
*/
|
||||
ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
|
||||
|
||||
/**
|
||||
* Rendered when the list is empty. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListEmptyComponent?:
|
||||
| React.ComponentType<any>
|
||||
| React.ReactElement
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListFooterComponent?:
|
||||
| React.ComponentType<any>
|
||||
| React.ReactElement
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Styling for internal View for ListFooterComponent
|
||||
*/
|
||||
ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
|
||||
|
||||
/**
|
||||
* Rendered at the top of all the items. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListHeaderComponent?:
|
||||
| React.ComponentType<any>
|
||||
| React.ReactElement
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Styling for internal View for ListHeaderComponent
|
||||
*/
|
||||
ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
|
||||
|
||||
/**
|
||||
* The default accessor functions assume this is an Array<{key: string}> but you can override
|
||||
* getItem, getItemCount, and keyExtractor to handle any type of index-based data.
|
||||
*/
|
||||
data?: any;
|
||||
|
||||
/**
|
||||
* `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
|
||||
* implementation, but with a significant perf hit.
|
||||
*/
|
||||
debug?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
|
||||
* unmounts react instances that are outside of the render window. You should only need to disable
|
||||
* this for debugging purposes.
|
||||
*/
|
||||
disableVirtualization?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* A marker property for telling the list to re-render (since it implements `PureComponent`). If
|
||||
* any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
|
||||
* `data` prop, stick it here and treat it immutably.
|
||||
*/
|
||||
extraData?: any;
|
||||
|
||||
/**
|
||||
* A generic accessor for extracting an item from any sort of data blob.
|
||||
*/
|
||||
getItem?: ((data: any, index: number) => ItemT) | undefined;
|
||||
|
||||
/**
|
||||
* Determines how many items are in the data blob.
|
||||
*/
|
||||
getItemCount?: ((data: any) => number) | undefined;
|
||||
|
||||
getItemLayout?:
|
||||
| ((
|
||||
data: any,
|
||||
index: number,
|
||||
) => {
|
||||
length: number;
|
||||
offset: number;
|
||||
index: number;
|
||||
})
|
||||
| undefined;
|
||||
|
||||
horizontal?: boolean | null | undefined;
|
||||
|
||||
/**
|
||||
* How many items to render in the initial batch. This should be enough to fill the screen but not
|
||||
* much more. Note these items will never be unmounted as part of the windowed rendering in order
|
||||
* to improve perceived performance of scroll-to-top actions.
|
||||
*/
|
||||
initialNumToRender?: number | undefined;
|
||||
|
||||
/**
|
||||
* Instead of starting at the top with the first item, start at `initialScrollIndex`. This
|
||||
* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
|
||||
* always rendered and immediately renders the items starting at this initial index. Requires
|
||||
* `getItemLayout` to be implemented.
|
||||
*/
|
||||
initialScrollIndex?: number | null | undefined;
|
||||
|
||||
/**
|
||||
* Reverses the direction of scroll. Uses scale transforms of -1.
|
||||
*/
|
||||
inverted?: boolean | null | undefined;
|
||||
|
||||
keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
|
||||
|
||||
/**
|
||||
* The maximum number of items to render in each incremental render batch. The more rendered at
|
||||
* once, the better the fill rate, but responsiveness my suffer because rendering content may
|
||||
* interfere with responding to button taps or other interactions.
|
||||
*/
|
||||
maxToRenderPerBatch?: number | undefined;
|
||||
|
||||
/**
|
||||
* Called once when the scroll position gets within within `onEndReachedThreshold`
|
||||
* from the logical end of the list.
|
||||
*/
|
||||
onEndReached?: ((info: {distanceFromEnd: number}) => void) | null | undefined;
|
||||
|
||||
/**
|
||||
* How far from the end (in units of visible length of the list) the trailing edge of the
|
||||
* list must be from the end of the content to trigger the `onEndReached` callback.
|
||||
* Thus, a value of 0.5 will trigger `onEndReached` when the end of the content is
|
||||
* within half the visible length of the list.
|
||||
*/
|
||||
onEndReachedThreshold?: number | null | undefined;
|
||||
|
||||
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
|
||||
|
||||
/**
|
||||
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
|
||||
* sure to also set the `refreshing` prop correctly.
|
||||
*/
|
||||
onRefresh?: (() => void) | null | undefined;
|
||||
|
||||
/**
|
||||
* Used to handle failures when scrolling to an index that has not been measured yet.
|
||||
* Recommended action is to either compute your own offset and `scrollTo` it, or scroll as far
|
||||
* as possible and then try again after more items have been rendered.
|
||||
*/
|
||||
onScrollToIndexFailed?:
|
||||
| ((info: {
|
||||
index: number;
|
||||
highestMeasuredFrameIndex: number;
|
||||
averageItemLength: number;
|
||||
}) => void)
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Called once when the scroll position gets within within `onStartReachedThreshold`
|
||||
* from the logical start of the list.
|
||||
*/
|
||||
onStartReached?:
|
||||
| ((info: {distanceFromStart: number}) => void)
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* How far from the start (in units of visible length of the list) the leading edge of the
|
||||
* list must be from the start of the content to trigger the `onStartReached` callback.
|
||||
* Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
|
||||
* within half the visible length of the list.
|
||||
*/
|
||||
onStartReachedThreshold?: number | null | undefined;
|
||||
|
||||
/**
|
||||
* Called when the viewability of rows changes, as defined by the
|
||||
* `viewabilityConfig` prop.
|
||||
*/
|
||||
onViewableItemsChanged?:
|
||||
| ((info: {
|
||||
viewableItems: Array<ViewToken>;
|
||||
changed: Array<ViewToken>;
|
||||
}) => void)
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Set this when offset is needed for the loading indicator to show correctly.
|
||||
* @platform android
|
||||
*/
|
||||
progressViewOffset?: number | undefined;
|
||||
|
||||
/**
|
||||
* Set this true while waiting for new data from a refresh.
|
||||
*/
|
||||
refreshing?: boolean | null | undefined;
|
||||
|
||||
/**
|
||||
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
|
||||
*
|
||||
* This may improve scroll performance for large lists.
|
||||
*/
|
||||
removeClippedSubviews?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
|
||||
*/
|
||||
renderScrollComponent?:
|
||||
| ((props: ScrollViewProps) => React.ReactElement<ScrollViewProps>)
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
|
||||
* screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
|
||||
*/
|
||||
updateCellsBatchingPeriod?: number | undefined;
|
||||
|
||||
viewabilityConfig?: ViewabilityConfig | undefined;
|
||||
|
||||
viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
|
||||
|
||||
/**
|
||||
* Determines the maximum number of items rendered outside of the visible area, in units of
|
||||
* visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
|
||||
* render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
|
||||
* this number will reduce memory consumption and may improve performance, but will increase the
|
||||
* chance that fast scrolling may reveal momentary blank areas of unrendered content.
|
||||
*/
|
||||
windowSize?: number | undefined;
|
||||
|
||||
CellRendererComponent?: React.ComponentType<any> | undefined;
|
||||
}
|
||||
+1939
-10
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {FocusEvent, LayoutEvent} from '../Types/CoreEventTypes';
|
||||
import type FillRateHelper from './FillRateHelper';
|
||||
import type {RenderItemType} from './VirtualizedListProps';
|
||||
|
||||
import View from '../Components/View/View';
|
||||
import StyleSheet from '../StyleSheet/StyleSheet';
|
||||
import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
|
||||
import invariant from 'invariant';
|
||||
import * as React from 'react';
|
||||
|
||||
export type Props<ItemT> = {
|
||||
CellRendererComponent?: ?React.ComponentType<any>,
|
||||
ItemSeparatorComponent: ?React.ComponentType<
|
||||
any | {highlighted: boolean, leadingItem: ?ItemT},
|
||||
>,
|
||||
ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
|
||||
cellKey: string,
|
||||
debug?: ?boolean,
|
||||
fillRateHelper: FillRateHelper,
|
||||
getItemLayout?: (
|
||||
data: any,
|
||||
index: number,
|
||||
) => {
|
||||
length: number,
|
||||
offset: number,
|
||||
index: number,
|
||||
...
|
||||
},
|
||||
horizontal: ?boolean,
|
||||
index: number,
|
||||
inversionStyle: ViewStyleProp,
|
||||
item: ItemT,
|
||||
onCellLayout: (event: LayoutEvent, cellKey: string, index: number) => void,
|
||||
onCellFocusCapture?: (event: FocusEvent) => void,
|
||||
onUnmount: (cellKey: string) => void,
|
||||
onUpdateSeparators: (
|
||||
cellKeys: Array<?string>,
|
||||
props: $Shape<SeparatorProps<ItemT>>,
|
||||
) => void,
|
||||
prevCellKey: ?string,
|
||||
renderItem?: ?RenderItemType<ItemT>,
|
||||
...
|
||||
};
|
||||
|
||||
type SeparatorProps<ItemT> = $ReadOnly<{|
|
||||
highlighted: boolean,
|
||||
leadingItem: ?ItemT,
|
||||
|}>;
|
||||
|
||||
type State<ItemT> = {
|
||||
separatorProps: SeparatorProps<ItemT>,
|
||||
...
|
||||
};
|
||||
|
||||
export default class CellRenderer<ItemT> extends React.Component<
|
||||
Props<ItemT>,
|
||||
State<ItemT>,
|
||||
> {
|
||||
state: State<ItemT> = {
|
||||
separatorProps: {
|
||||
highlighted: false,
|
||||
leadingItem: this.props.item,
|
||||
},
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(
|
||||
props: Props<ItemT>,
|
||||
prevState: State<ItemT>,
|
||||
): ?State<ItemT> {
|
||||
return {
|
||||
separatorProps: {
|
||||
...prevState.separatorProps,
|
||||
leadingItem: props.item,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
|
||||
// reused by SectionList and we can keep VirtualizedList simpler.
|
||||
// $FlowFixMe[missing-local-annot]
|
||||
_separators = {
|
||||
highlight: () => {
|
||||
const {cellKey, prevCellKey} = this.props;
|
||||
this.props.onUpdateSeparators([cellKey, prevCellKey], {
|
||||
highlighted: true,
|
||||
});
|
||||
},
|
||||
unhighlight: () => {
|
||||
const {cellKey, prevCellKey} = this.props;
|
||||
this.props.onUpdateSeparators([cellKey, prevCellKey], {
|
||||
highlighted: false,
|
||||
});
|
||||
},
|
||||
updateProps: (
|
||||
select: 'leading' | 'trailing',
|
||||
newProps: SeparatorProps<ItemT>,
|
||||
) => {
|
||||
const {cellKey, prevCellKey} = this.props;
|
||||
this.props.onUpdateSeparators(
|
||||
[select === 'leading' ? prevCellKey : cellKey],
|
||||
newProps,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
updateSeparatorProps(newProps: SeparatorProps<ItemT>) {
|
||||
this.setState(state => ({
|
||||
separatorProps: {...state.separatorProps, ...newProps},
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.onUnmount(this.props.cellKey);
|
||||
}
|
||||
|
||||
_onLayout = (nativeEvent: LayoutEvent): void => {
|
||||
this.props.onCellLayout &&
|
||||
this.props.onCellLayout(
|
||||
nativeEvent,
|
||||
this.props.cellKey,
|
||||
this.props.index,
|
||||
);
|
||||
};
|
||||
|
||||
_renderElement(
|
||||
renderItem: ?RenderItemType<ItemT>,
|
||||
ListItemComponent: any,
|
||||
item: ItemT,
|
||||
index: number,
|
||||
): React.Node {
|
||||
if (renderItem && ListItemComponent) {
|
||||
console.warn(
|
||||
'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
|
||||
' precedence over renderItem.',
|
||||
);
|
||||
}
|
||||
|
||||
if (ListItemComponent) {
|
||||
/* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
|
||||
* comment suppresses an error found when Flow v0.108 was deployed. To
|
||||
* see the error, delete this comment and run Flow. */
|
||||
/* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
|
||||
* This comment suppresses an error found when Flow v0.108 was deployed.
|
||||
* To see the error, delete this comment and run Flow. */
|
||||
return React.createElement(ListItemComponent, {
|
||||
item,
|
||||
index,
|
||||
separators: this._separators,
|
||||
});
|
||||
}
|
||||
|
||||
if (renderItem) {
|
||||
return renderItem({
|
||||
item,
|
||||
index,
|
||||
separators: this._separators,
|
||||
});
|
||||
}
|
||||
|
||||
invariant(
|
||||
false,
|
||||
'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
|
||||
);
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {
|
||||
CellRendererComponent,
|
||||
ItemSeparatorComponent,
|
||||
ListItemComponent,
|
||||
debug,
|
||||
fillRateHelper,
|
||||
getItemLayout,
|
||||
horizontal,
|
||||
item,
|
||||
index,
|
||||
inversionStyle,
|
||||
onCellFocusCapture,
|
||||
renderItem,
|
||||
} = this.props;
|
||||
const element = this._renderElement(
|
||||
renderItem,
|
||||
ListItemComponent,
|
||||
item,
|
||||
index,
|
||||
);
|
||||
|
||||
const onLayout =
|
||||
(getItemLayout && !debug && !fillRateHelper.enabled()) ||
|
||||
!this.props.onCellLayout
|
||||
? undefined
|
||||
: this._onLayout;
|
||||
// NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
|
||||
// called explicitly by `ScrollViewStickyHeader`.
|
||||
const itemSeparator: React.Node = React.isValidElement(
|
||||
ItemSeparatorComponent,
|
||||
)
|
||||
? // $FlowFixMe[incompatible-type]
|
||||
ItemSeparatorComponent
|
||||
: // $FlowFixMe[incompatible-type]
|
||||
ItemSeparatorComponent && (
|
||||
<ItemSeparatorComponent {...this.state.separatorProps} />
|
||||
);
|
||||
const cellStyle = inversionStyle
|
||||
? horizontal
|
||||
? [styles.rowReverse, inversionStyle]
|
||||
: [styles.columnReverse, inversionStyle]
|
||||
: horizontal
|
||||
? [styles.row, inversionStyle]
|
||||
: inversionStyle;
|
||||
const result = !CellRendererComponent ? (
|
||||
<View
|
||||
style={cellStyle}
|
||||
onLayout={onLayout}
|
||||
onFocusCapture={onCellFocusCapture}
|
||||
/* $FlowFixMe[incompatible-type-arg] (>=0.89.0 site=react_native_fb) *
|
||||
This comment suppresses an error found when Flow v0.89 was deployed. *
|
||||
To see the error, delete this comment and run Flow. */
|
||||
>
|
||||
{element}
|
||||
{itemSeparator}
|
||||
</View>
|
||||
) : (
|
||||
<CellRendererComponent
|
||||
{...this.props}
|
||||
style={cellStyle}
|
||||
onLayout={onLayout}
|
||||
onFocusCapture={onCellFocusCapture}>
|
||||
{element}
|
||||
{itemSeparator}
|
||||
</CellRendererComponent>
|
||||
);
|
||||
|
||||
return (
|
||||
<VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
|
||||
{result}
|
||||
</VirtualizedListCellContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
rowReverse: {
|
||||
flexDirection: 'row-reverse',
|
||||
},
|
||||
columnReverse: {
|
||||
flexDirection: 'column-reverse',
|
||||
},
|
||||
});
|
||||
@@ -4,15 +4,113 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @flow strict-local
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
import typeof VirtualizedList from './VirtualizedList';
|
||||
|
||||
import {typeof VirtualizedListContextResetter as VirtualizedListContextResetterType} from '@react-native/virtualized-lists';
|
||||
import * as React from 'react';
|
||||
import {useContext, useMemo} from 'react';
|
||||
|
||||
const VirtualizedListContextResetter: VirtualizedListContextResetterType =
|
||||
require('@react-native/virtualized-lists').VirtualizedListContextResetter;
|
||||
type Context = $ReadOnly<{
|
||||
cellKey: ?string,
|
||||
getScrollMetrics: () => {
|
||||
contentLength: number,
|
||||
dOffset: number,
|
||||
dt: number,
|
||||
offset: number,
|
||||
timestamp: number,
|
||||
velocity: number,
|
||||
visibleLength: number,
|
||||
zoomScale: number,
|
||||
},
|
||||
horizontal: ?boolean,
|
||||
getOutermostParentListRef: () => React.ElementRef<VirtualizedList>,
|
||||
registerAsNestedChild: ({
|
||||
cellKey: string,
|
||||
ref: React.ElementRef<VirtualizedList>,
|
||||
}) => void,
|
||||
unregisterAsNestedChild: ({
|
||||
ref: React.ElementRef<VirtualizedList>,
|
||||
}) => void,
|
||||
}>;
|
||||
|
||||
module.exports = {VirtualizedListContextResetter};
|
||||
export const VirtualizedListContext: React.Context<?Context> =
|
||||
React.createContext(null);
|
||||
if (__DEV__) {
|
||||
VirtualizedListContext.displayName = 'VirtualizedListContext';
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the context. Intended for use by portal-like components (e.g. Modal).
|
||||
*/
|
||||
export function VirtualizedListContextResetter({
|
||||
children,
|
||||
}: {
|
||||
children: React.Node,
|
||||
}): React.Node {
|
||||
return (
|
||||
<VirtualizedListContext.Provider value={null}>
|
||||
{children}
|
||||
</VirtualizedListContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the context with memoization. Intended to be used by `VirtualizedList`.
|
||||
*/
|
||||
export function VirtualizedListContextProvider({
|
||||
children,
|
||||
value,
|
||||
}: {
|
||||
children: React.Node,
|
||||
value: Context,
|
||||
}): React.Node {
|
||||
// Avoid setting a newly created context object if the values are identical.
|
||||
const context = useMemo(
|
||||
() => ({
|
||||
cellKey: null,
|
||||
getScrollMetrics: value.getScrollMetrics,
|
||||
horizontal: value.horizontal,
|
||||
getOutermostParentListRef: value.getOutermostParentListRef,
|
||||
registerAsNestedChild: value.registerAsNestedChild,
|
||||
unregisterAsNestedChild: value.unregisterAsNestedChild,
|
||||
}),
|
||||
[
|
||||
value.getScrollMetrics,
|
||||
value.horizontal,
|
||||
value.getOutermostParentListRef,
|
||||
value.registerAsNestedChild,
|
||||
value.unregisterAsNestedChild,
|
||||
],
|
||||
);
|
||||
return (
|
||||
<VirtualizedListContext.Provider value={context}>
|
||||
{children}
|
||||
</VirtualizedListContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the `cellKey`. Intended to be used by `VirtualizedList` for each cell.
|
||||
*/
|
||||
export function VirtualizedListCellContextProvider({
|
||||
cellKey,
|
||||
children,
|
||||
}: {
|
||||
cellKey: string,
|
||||
children: React.Node,
|
||||
}): React.Node {
|
||||
// Avoid setting a newly created context object if the values are identical.
|
||||
const currContext = useContext(VirtualizedListContext);
|
||||
const context = useMemo(
|
||||
() => (currContext == null ? null : {...currContext, cellKey}),
|
||||
[currContext, cellKey],
|
||||
);
|
||||
return (
|
||||
<VirtualizedListContext.Provider value={context}>
|
||||
{children}
|
||||
</VirtualizedListContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import typeof ScrollView from '../Components/ScrollView/ScrollView';
|
||||
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {
|
||||
ViewabilityConfig,
|
||||
ViewabilityConfigCallbackPair,
|
||||
ViewToken,
|
||||
} from './ViewabilityHelper';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export type Item = any;
|
||||
|
||||
export type Separators = {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
...
|
||||
};
|
||||
|
||||
export type RenderItemProps<ItemT> = {
|
||||
item: ItemT,
|
||||
index: number,
|
||||
separators: Separators,
|
||||
...
|
||||
};
|
||||
|
||||
export type RenderItemType<ItemT> = (
|
||||
info: RenderItemProps<ItemT>,
|
||||
) => React.Node;
|
||||
|
||||
type RequiredProps = {|
|
||||
/**
|
||||
* The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
|
||||
* getItem, getItemCount, and keyExtractor to handle any type of index-based data.
|
||||
*/
|
||||
data?: any,
|
||||
/**
|
||||
* A generic accessor for extracting an item from any sort of data blob.
|
||||
*/
|
||||
getItem: (data: any, index: number) => ?Item,
|
||||
/**
|
||||
* Determines how many items are in the data blob.
|
||||
*/
|
||||
getItemCount: (data: any) => number,
|
||||
|};
|
||||
type OptionalProps = {|
|
||||
renderItem?: ?RenderItemType<Item>,
|
||||
/**
|
||||
* `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
|
||||
* implementation, but with a significant perf hit.
|
||||
*/
|
||||
debug?: ?boolean,
|
||||
/**
|
||||
* DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
|
||||
* unmounts react instances that are outside of the render window. You should only need to disable
|
||||
* this for debugging purposes. Defaults to false.
|
||||
*/
|
||||
disableVirtualization?: ?boolean,
|
||||
/**
|
||||
* A marker property for telling the list to re-render (since it implements `PureComponent`). If
|
||||
* any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
|
||||
* `data` prop, stick it here and treat it immutably.
|
||||
*/
|
||||
extraData?: any,
|
||||
// e.g. height, y
|
||||
getItemLayout?: (
|
||||
data: any,
|
||||
index: number,
|
||||
) => {
|
||||
length: number,
|
||||
offset: number,
|
||||
index: number,
|
||||
...
|
||||
},
|
||||
horizontal?: ?boolean,
|
||||
/**
|
||||
* How many items to render in the initial batch. This should be enough to fill the screen but not
|
||||
* much more. Note these items will never be unmounted as part of the windowed rendering in order
|
||||
* to improve perceived performance of scroll-to-top actions.
|
||||
*/
|
||||
initialNumToRender?: ?number,
|
||||
/**
|
||||
* Instead of starting at the top with the first item, start at `initialScrollIndex`. This
|
||||
* disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
|
||||
* always rendered and immediately renders the items starting at this initial index. Requires
|
||||
* `getItemLayout` to be implemented.
|
||||
*/
|
||||
initialScrollIndex?: ?number,
|
||||
/**
|
||||
* Reverses the direction of scroll. Uses scale transforms of -1.
|
||||
*/
|
||||
inverted?: ?boolean,
|
||||
keyExtractor?: ?(item: Item, index: number) => string,
|
||||
/**
|
||||
* Each cell is rendered using this element. Can be a React Component Class,
|
||||
* or a render function. Defaults to using View.
|
||||
*/
|
||||
CellRendererComponent?: ?React.ComponentType<any>,
|
||||
/**
|
||||
* Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
|
||||
* `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
|
||||
* which will update the `highlighted` prop, but you can also add custom props with
|
||||
* `separators.updateProps`.
|
||||
*/
|
||||
ItemSeparatorComponent?: ?React.ComponentType<any>,
|
||||
/**
|
||||
* Takes an item from `data` and renders it into the list. Example usage:
|
||||
*
|
||||
* <FlatList
|
||||
* ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
|
||||
* <View style={[style.separator, highlighted && {marginLeft: 0}]} />
|
||||
* )}
|
||||
* data={[{title: 'Title Text', key: 'item1'}]}
|
||||
* ListItemComponent={({item, separators}) => (
|
||||
* <TouchableHighlight
|
||||
* onPress={() => this._onPress(item)}
|
||||
* onShowUnderlay={separators.highlight}
|
||||
* onHideUnderlay={separators.unhighlight}>
|
||||
* <View style={{backgroundColor: 'white'}}>
|
||||
* <Text>{item.title}</Text>
|
||||
* </View>
|
||||
* </TouchableHighlight>
|
||||
* )}
|
||||
* />
|
||||
*
|
||||
* Provides additional metadata like `index` if you need it, as well as a more generic
|
||||
* `separators.updateProps` function which let's you set whatever props you want to change the
|
||||
* rendering of either the leading separator or trailing separator in case the more common
|
||||
* `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
|
||||
* your use-case.
|
||||
*/
|
||||
ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
|
||||
/**
|
||||
* Rendered when the list is empty. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
|
||||
/**
|
||||
* Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
|
||||
/**
|
||||
* Styling for internal View for ListFooterComponent
|
||||
*/
|
||||
ListFooterComponentStyle?: ViewStyleProp,
|
||||
/**
|
||||
* Rendered at the top of all the items. Can be a React Component Class, a render function, or
|
||||
* a rendered element.
|
||||
*/
|
||||
ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
|
||||
/**
|
||||
* Styling for internal View for ListHeaderComponent
|
||||
*/
|
||||
ListHeaderComponentStyle?: ViewStyleProp,
|
||||
/**
|
||||
* The maximum number of items to render in each incremental render batch. The more rendered at
|
||||
* once, the better the fill rate, but responsiveness may suffer because rendering content may
|
||||
* interfere with responding to button taps or other interactions.
|
||||
*/
|
||||
maxToRenderPerBatch?: ?number,
|
||||
/**
|
||||
* Called once when the scroll position gets within within `onEndReachedThreshold`
|
||||
* from the logical end of the list.
|
||||
*/
|
||||
onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
|
||||
/**
|
||||
* How far from the end (in units of visible length of the list) the trailing edge of the
|
||||
* list must be from the end of the content to trigger the `onEndReached` callback.
|
||||
* Thus, a value of 0.5 will trigger `onEndReached` when the end of the content is
|
||||
* within half the visible length of the list.
|
||||
*/
|
||||
onEndReachedThreshold?: ?number,
|
||||
/**
|
||||
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
|
||||
* sure to also set the `refreshing` prop correctly.
|
||||
*/
|
||||
onRefresh?: ?() => void,
|
||||
/**
|
||||
* Used to handle failures when scrolling to an index that has not been measured yet. Recommended
|
||||
* action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and
|
||||
* then try again after more items have been rendered.
|
||||
*/
|
||||
onScrollToIndexFailed?: ?(info: {
|
||||
index: number,
|
||||
highestMeasuredFrameIndex: number,
|
||||
averageItemLength: number,
|
||||
...
|
||||
}) => void,
|
||||
/**
|
||||
* Called once when the scroll position gets within within `onStartReachedThreshold`
|
||||
* from the logical start of the list.
|
||||
*/
|
||||
onStartReached?: ?(info: {distanceFromStart: number, ...}) => void,
|
||||
/**
|
||||
* How far from the start (in units of visible length of the list) the leading edge of the
|
||||
* list must be from the start of the content to trigger the `onStartReached` callback.
|
||||
* Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
|
||||
* within half the visible length of the list.
|
||||
*/
|
||||
onStartReachedThreshold?: ?number,
|
||||
/**
|
||||
* Called when the viewability of rows changes, as defined by the
|
||||
* `viewabilityConfig` prop.
|
||||
*/
|
||||
onViewableItemsChanged?: ?(info: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
...
|
||||
}) => void,
|
||||
persistentScrollbar?: ?boolean,
|
||||
/**
|
||||
* Set this when offset is needed for the loading indicator to show correctly.
|
||||
*/
|
||||
progressViewOffset?: number,
|
||||
/**
|
||||
* A custom refresh control element. When set, it overrides the default
|
||||
* <RefreshControl> component built internally. The onRefresh and refreshing
|
||||
* props are also ignored. Only works for vertical VirtualizedList.
|
||||
*/
|
||||
refreshControl?: ?React.Element<any>,
|
||||
/**
|
||||
* Set this true while waiting for new data from a refresh.
|
||||
*/
|
||||
refreshing?: ?boolean,
|
||||
/**
|
||||
* Note: may have bugs (missing content) in some circumstances - use at your own risk.
|
||||
*
|
||||
* This may improve scroll performance for large lists.
|
||||
*/
|
||||
removeClippedSubviews?: boolean,
|
||||
/**
|
||||
* Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
|
||||
*/
|
||||
renderScrollComponent?: (props: Object) => React.Element<any>,
|
||||
/**
|
||||
* Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
|
||||
* screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
|
||||
*/
|
||||
updateCellsBatchingPeriod?: ?number,
|
||||
/**
|
||||
* See `ViewabilityHelper` for flow type and further documentation.
|
||||
*/
|
||||
viewabilityConfig?: ViewabilityConfig,
|
||||
/**
|
||||
* List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged
|
||||
* will be called when its corresponding ViewabilityConfig's conditions are met.
|
||||
*/
|
||||
viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
|
||||
/**
|
||||
* Determines the maximum number of items rendered outside of the visible area, in units of
|
||||
* visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
|
||||
* render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
|
||||
* this number will reduce memory consumption and may improve performance, but will increase the
|
||||
* chance that fast scrolling may reveal momentary blank areas of unrendered content.
|
||||
*/
|
||||
windowSize?: ?number,
|
||||
/**
|
||||
* The legacy implementation is no longer supported.
|
||||
*/
|
||||
legacyImplementation?: empty,
|
||||
|};
|
||||
|
||||
export type Props = {|
|
||||
...React.ElementConfig<ScrollView>,
|
||||
...RequiredProps,
|
||||
...OptionalProps,
|
||||
|};
|
||||
|
||||
/**
|
||||
* Subset of properties needed to calculate frame metrics
|
||||
*/
|
||||
export type FrameMetricProps = {
|
||||
data: RequiredProps['data'],
|
||||
getItemCount: RequiredProps['getItemCount'],
|
||||
getItem: RequiredProps['getItem'],
|
||||
getItemLayout?: OptionalProps['getItemLayout'],
|
||||
keyExtractor?: OptionalProps['keyExtractor'],
|
||||
...
|
||||
};
|
||||
@@ -8,15 +8,610 @@
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
import type {ViewToken} from './ViewabilityHelper';
|
||||
|
||||
import {typeof VirtualizedSectionList as VirtualizedSectionListType} from '@react-native/virtualized-lists';
|
||||
import View from '../Components/View/View';
|
||||
import VirtualizedList from './VirtualizedList';
|
||||
import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
|
||||
import invariant from 'invariant';
|
||||
import * as React from 'react';
|
||||
|
||||
const VirtualizedSectionList: VirtualizedSectionListType =
|
||||
require('@react-native/virtualized-lists').VirtualizedSectionList;
|
||||
type Item = any;
|
||||
|
||||
export type {
|
||||
SectionBase,
|
||||
ScrollToLocationParamsType,
|
||||
} from '@react-native/virtualized-lists';
|
||||
module.exports = VirtualizedSectionList;
|
||||
export type SectionBase<SectionItemT> = {
|
||||
/**
|
||||
* The data for rendering items in this section.
|
||||
*/
|
||||
data: $ReadOnlyArray<SectionItemT>,
|
||||
/**
|
||||
* Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections,
|
||||
* the array index will be used by default.
|
||||
*/
|
||||
key?: string,
|
||||
// Optional props will override list-wide props just for this section.
|
||||
renderItem?: ?(info: {
|
||||
item: SectionItemT,
|
||||
index: number,
|
||||
section: SectionBase<SectionItemT>,
|
||||
separators: {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
...
|
||||
},
|
||||
...
|
||||
}) => null | React.Element<any>,
|
||||
ItemSeparatorComponent?: ?React.ComponentType<any>,
|
||||
keyExtractor?: (item: SectionItemT, index?: ?number) => string,
|
||||
...
|
||||
};
|
||||
|
||||
type RequiredProps<SectionT: SectionBase<any>> = {|
|
||||
sections: $ReadOnlyArray<SectionT>,
|
||||
|};
|
||||
|
||||
type OptionalProps<SectionT: SectionBase<any>> = {|
|
||||
/**
|
||||
* Default renderer for every item in every section.
|
||||
*/
|
||||
renderItem?: (info: {
|
||||
item: Item,
|
||||
index: number,
|
||||
section: SectionT,
|
||||
separators: {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
...
|
||||
},
|
||||
...
|
||||
}) => null | React.Element<any>,
|
||||
/**
|
||||
* Rendered at the top of each section. These stick to the top of the `ScrollView` by default on
|
||||
* iOS. See `stickySectionHeadersEnabled`.
|
||||
*/
|
||||
renderSectionHeader?: ?(info: {
|
||||
section: SectionT,
|
||||
...
|
||||
}) => null | React.Element<any>,
|
||||
/**
|
||||
* Rendered at the bottom of each section.
|
||||
*/
|
||||
renderSectionFooter?: ?(info: {
|
||||
section: SectionT,
|
||||
...
|
||||
}) => null | React.Element<any>,
|
||||
/**
|
||||
* Rendered at the top and bottom of each section (note this is different from
|
||||
* `ItemSeparatorComponent` which is only rendered between items). These are intended to separate
|
||||
* sections from the headers above and below and typically have the same highlight response as
|
||||
* `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Separator]`,
|
||||
* and any custom props from `separators.updateProps`.
|
||||
*/
|
||||
SectionSeparatorComponent?: ?React.ComponentType<any>,
|
||||
/**
|
||||
* Makes section headers stick to the top of the screen until the next one pushes it off. Only
|
||||
* enabled by default on iOS because that is the platform standard there.
|
||||
*/
|
||||
stickySectionHeadersEnabled?: boolean,
|
||||
onEndReached?: ?({distanceFromEnd: number, ...}) => void,
|
||||
|};
|
||||
|
||||
type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
|
||||
|
||||
export type Props<SectionT> = {|
|
||||
...RequiredProps<SectionT>,
|
||||
...OptionalProps<SectionT>,
|
||||
...$Diff<
|
||||
VirtualizedListProps,
|
||||
{
|
||||
renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
|
||||
data: $PropertyType<VirtualizedListProps, 'data'>,
|
||||
...
|
||||
},
|
||||
>,
|
||||
|};
|
||||
export type ScrollToLocationParamsType = {|
|
||||
animated?: ?boolean,
|
||||
itemIndex: number,
|
||||
sectionIndex: number,
|
||||
viewOffset?: number,
|
||||
viewPosition?: number,
|
||||
|};
|
||||
|
||||
type State = {childProps: VirtualizedListProps, ...};
|
||||
|
||||
/**
|
||||
* Right now this just flattens everything into one list and uses VirtualizedList under the
|
||||
* hood. The only operation that might not scale well is concatting the data arrays of all the
|
||||
* sections when new props are received, which should be plenty fast for up to ~10,000 items.
|
||||
*/
|
||||
class VirtualizedSectionList<
|
||||
SectionT: SectionBase<any>,
|
||||
> extends React.PureComponent<Props<SectionT>, State> {
|
||||
scrollToLocation(params: ScrollToLocationParamsType) {
|
||||
let index = params.itemIndex;
|
||||
for (let i = 0; i < params.sectionIndex; i++) {
|
||||
index += this.props.getItemCount(this.props.sections[i].data) + 2;
|
||||
}
|
||||
let viewOffset = params.viewOffset || 0;
|
||||
if (this._listRef == null) {
|
||||
return;
|
||||
}
|
||||
if (params.itemIndex > 0 && this.props.stickySectionHeadersEnabled) {
|
||||
const frame = this._listRef.__getFrameMetricsApprox(
|
||||
index - params.itemIndex,
|
||||
this._listRef.props,
|
||||
);
|
||||
viewOffset += frame.length;
|
||||
}
|
||||
const toIndexParams = {
|
||||
...params,
|
||||
viewOffset,
|
||||
index,
|
||||
};
|
||||
// $FlowFixMe[incompatible-use]
|
||||
this._listRef.scrollToIndex(toIndexParams);
|
||||
}
|
||||
|
||||
getListRef(): ?React.ElementRef<typeof VirtualizedList> {
|
||||
return this._listRef;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {
|
||||
ItemSeparatorComponent, // don't pass through, rendered with renderItem
|
||||
SectionSeparatorComponent,
|
||||
renderItem: _renderItem,
|
||||
renderSectionFooter,
|
||||
renderSectionHeader,
|
||||
sections: _sections,
|
||||
stickySectionHeadersEnabled,
|
||||
...passThroughProps
|
||||
} = this.props;
|
||||
|
||||
const listHeaderOffset = this.props.ListHeaderComponent ? 1 : 0;
|
||||
|
||||
const stickyHeaderIndices = this.props.stickySectionHeadersEnabled
|
||||
? ([]: Array<number>)
|
||||
: undefined;
|
||||
|
||||
let itemCount = 0;
|
||||
for (const section of this.props.sections) {
|
||||
// Track the section header indices
|
||||
if (stickyHeaderIndices != null) {
|
||||
stickyHeaderIndices.push(itemCount + listHeaderOffset);
|
||||
}
|
||||
|
||||
// Add two for the section header and footer.
|
||||
itemCount += 2;
|
||||
itemCount += this.props.getItemCount(section.data);
|
||||
}
|
||||
const renderItem = this._renderItem(itemCount);
|
||||
|
||||
return (
|
||||
<VirtualizedList
|
||||
{...passThroughProps}
|
||||
keyExtractor={this._keyExtractor}
|
||||
stickyHeaderIndices={stickyHeaderIndices}
|
||||
renderItem={renderItem}
|
||||
data={this.props.sections}
|
||||
getItem={(sections, index) =>
|
||||
this._getItem(this.props, sections, index)
|
||||
}
|
||||
getItemCount={() => itemCount}
|
||||
onViewableItemsChanged={
|
||||
this.props.onViewableItemsChanged
|
||||
? this._onViewableItemsChanged
|
||||
: undefined
|
||||
}
|
||||
ref={this._captureRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_getItem(
|
||||
props: Props<SectionT>,
|
||||
sections: ?$ReadOnlyArray<Item>,
|
||||
index: number,
|
||||
): ?Item {
|
||||
if (!sections) {
|
||||
return null;
|
||||
}
|
||||
let itemIdx = index - 1;
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const section = sections[i];
|
||||
const sectionData = section.data;
|
||||
const itemCount = props.getItemCount(sectionData);
|
||||
if (itemIdx === -1 || itemIdx === itemCount) {
|
||||
// We intend for there to be overflow by one on both ends of the list.
|
||||
// This will be for headers and footers. When returning a header or footer
|
||||
// item the section itself is the item.
|
||||
return section;
|
||||
} else if (itemIdx < itemCount) {
|
||||
// If we are in the bounds of the list's data then return the item.
|
||||
return props.getItem(sectionData, itemIdx);
|
||||
} else {
|
||||
itemIdx -= itemCount + 2; // Add two for the header and footer
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// $FlowFixMe[missing-local-annot]
|
||||
_keyExtractor = (item: Item, index: number) => {
|
||||
const info = this._subExtractor(index);
|
||||
return (info && info.key) || String(index);
|
||||
};
|
||||
|
||||
_subExtractor(index: number): ?{
|
||||
section: SectionT,
|
||||
// Key of the section or combined key for section + item
|
||||
key: string,
|
||||
// Relative index within the section
|
||||
index: ?number,
|
||||
// True if this is the section header
|
||||
header?: ?boolean,
|
||||
leadingItem?: ?Item,
|
||||
leadingSection?: ?SectionT,
|
||||
trailingItem?: ?Item,
|
||||
trailingSection?: ?SectionT,
|
||||
...
|
||||
} {
|
||||
let itemIndex = index;
|
||||
const {getItem, getItemCount, keyExtractor, sections} = this.props;
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const section = sections[i];
|
||||
const sectionData = section.data;
|
||||
const key = section.key || String(i);
|
||||
itemIndex -= 1; // The section adds an item for the header
|
||||
if (itemIndex >= getItemCount(sectionData) + 1) {
|
||||
itemIndex -= getItemCount(sectionData) + 1; // The section adds an item for the footer.
|
||||
} else if (itemIndex === -1) {
|
||||
return {
|
||||
section,
|
||||
key: key + ':header',
|
||||
index: null,
|
||||
header: true,
|
||||
trailingSection: sections[i + 1],
|
||||
};
|
||||
} else if (itemIndex === getItemCount(sectionData)) {
|
||||
return {
|
||||
section,
|
||||
key: key + ':footer',
|
||||
index: null,
|
||||
header: false,
|
||||
trailingSection: sections[i + 1],
|
||||
};
|
||||
} else {
|
||||
const extractor =
|
||||
section.keyExtractor || keyExtractor || defaultKeyExtractor;
|
||||
return {
|
||||
section,
|
||||
key:
|
||||
key + ':' + extractor(getItem(sectionData, itemIndex), itemIndex),
|
||||
index: itemIndex,
|
||||
leadingItem: getItem(sectionData, itemIndex - 1),
|
||||
leadingSection: sections[i - 1],
|
||||
trailingItem: getItem(sectionData, itemIndex + 1),
|
||||
trailingSection: sections[i + 1],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_convertViewable = (viewable: ViewToken): ?ViewToken => {
|
||||
invariant(viewable.index != null, 'Received a broken ViewToken');
|
||||
const info = this._subExtractor(viewable.index);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
const keyExtractorWithNullableIndex = info.section.keyExtractor;
|
||||
const keyExtractorWithNonNullableIndex =
|
||||
this.props.keyExtractor || defaultKeyExtractor;
|
||||
const key =
|
||||
keyExtractorWithNullableIndex != null
|
||||
? keyExtractorWithNullableIndex(viewable.item, info.index)
|
||||
: keyExtractorWithNonNullableIndex(viewable.item, info.index ?? 0);
|
||||
|
||||
return {
|
||||
...viewable,
|
||||
index: info.index,
|
||||
key,
|
||||
section: info.section,
|
||||
};
|
||||
};
|
||||
|
||||
_onViewableItemsChanged = ({
|
||||
viewableItems,
|
||||
changed,
|
||||
}: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
...
|
||||
}) => {
|
||||
const onViewableItemsChanged = this.props.onViewableItemsChanged;
|
||||
if (onViewableItemsChanged != null) {
|
||||
onViewableItemsChanged({
|
||||
viewableItems: viewableItems
|
||||
.map(this._convertViewable, this)
|
||||
.filter(Boolean),
|
||||
changed: changed.map(this._convertViewable, this).filter(Boolean),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_renderItem =
|
||||
(listItemCount: number): $FlowFixMe =>
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
({item, index}: {item: Item, index: number, ...}) => {
|
||||
const info = this._subExtractor(index);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
const infoIndex = info.index;
|
||||
if (infoIndex == null) {
|
||||
const {section} = info;
|
||||
if (info.header === true) {
|
||||
const {renderSectionHeader} = this.props;
|
||||
return renderSectionHeader ? renderSectionHeader({section}) : null;
|
||||
} else {
|
||||
const {renderSectionFooter} = this.props;
|
||||
return renderSectionFooter ? renderSectionFooter({section}) : null;
|
||||
}
|
||||
} else {
|
||||
const renderItem = info.section.renderItem || this.props.renderItem;
|
||||
const SeparatorComponent = this._getSeparatorComponent(
|
||||
index,
|
||||
info,
|
||||
listItemCount,
|
||||
);
|
||||
invariant(renderItem, 'no renderItem!');
|
||||
return (
|
||||
<ItemWithSeparator
|
||||
SeparatorComponent={SeparatorComponent}
|
||||
LeadingSeparatorComponent={
|
||||
infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
|
||||
}
|
||||
cellKey={info.key}
|
||||
index={infoIndex}
|
||||
item={item}
|
||||
leadingItem={info.leadingItem}
|
||||
leadingSection={info.leadingSection}
|
||||
prevCellKey={(this._subExtractor(index - 1) || {}).key}
|
||||
// Callback to provide updateHighlight for this item
|
||||
setSelfHighlightCallback={this._setUpdateHighlightFor}
|
||||
setSelfUpdatePropsCallback={this._setUpdatePropsFor}
|
||||
// Provide child ability to set highlight/updateProps for previous item using prevCellKey
|
||||
updateHighlightFor={this._updateHighlightFor}
|
||||
updatePropsFor={this._updatePropsFor}
|
||||
renderItem={renderItem}
|
||||
section={info.section}
|
||||
trailingItem={info.trailingItem}
|
||||
trailingSection={info.trailingSection}
|
||||
inverted={!!this.props.inverted}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
_updatePropsFor = (cellKey: string, value: any) => {
|
||||
const updateProps = this._updatePropsMap[cellKey];
|
||||
if (updateProps != null) {
|
||||
updateProps(value);
|
||||
}
|
||||
};
|
||||
|
||||
_updateHighlightFor = (cellKey: string, value: boolean) => {
|
||||
const updateHighlight = this._updateHighlightMap[cellKey];
|
||||
if (updateHighlight != null) {
|
||||
updateHighlight(value);
|
||||
}
|
||||
};
|
||||
|
||||
_setUpdateHighlightFor = (
|
||||
cellKey: string,
|
||||
updateHighlightFn: ?(boolean) => void,
|
||||
) => {
|
||||
if (updateHighlightFn != null) {
|
||||
this._updateHighlightMap[cellKey] = updateHighlightFn;
|
||||
} else {
|
||||
// $FlowFixMe[prop-missing]
|
||||
delete this._updateHighlightFor[cellKey];
|
||||
}
|
||||
};
|
||||
|
||||
_setUpdatePropsFor = (cellKey: string, updatePropsFn: ?(boolean) => void) => {
|
||||
if (updatePropsFn != null) {
|
||||
this._updatePropsMap[cellKey] = updatePropsFn;
|
||||
} else {
|
||||
delete this._updatePropsMap[cellKey];
|
||||
}
|
||||
};
|
||||
|
||||
_getSeparatorComponent(
|
||||
index: number,
|
||||
info?: ?Object,
|
||||
listItemCount: number,
|
||||
): ?React.ComponentType<any> {
|
||||
info = info || this._subExtractor(index);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
const ItemSeparatorComponent =
|
||||
info.section.ItemSeparatorComponent || this.props.ItemSeparatorComponent;
|
||||
const {SectionSeparatorComponent} = this.props;
|
||||
const isLastItemInList = index === listItemCount - 1;
|
||||
const isLastItemInSection =
|
||||
info.index === this.props.getItemCount(info.section.data) - 1;
|
||||
if (SectionSeparatorComponent && isLastItemInSection) {
|
||||
return SectionSeparatorComponent;
|
||||
}
|
||||
if (ItemSeparatorComponent && !isLastItemInSection && !isLastItemInList) {
|
||||
return ItemSeparatorComponent;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
_updateHighlightMap: {[string]: (boolean) => void} = {};
|
||||
_updatePropsMap: {[string]: void | (boolean => void)} = {};
|
||||
_listRef: ?React.ElementRef<typeof VirtualizedList>;
|
||||
_captureRef = (ref: null | React$ElementRef<Class<VirtualizedList>>) => {
|
||||
this._listRef = ref;
|
||||
};
|
||||
}
|
||||
|
||||
type ItemWithSeparatorCommonProps = $ReadOnly<{|
|
||||
leadingItem: ?Item,
|
||||
leadingSection: ?Object,
|
||||
section: Object,
|
||||
trailingItem: ?Item,
|
||||
trailingSection: ?Object,
|
||||
|}>;
|
||||
|
||||
type ItemWithSeparatorProps = $ReadOnly<{|
|
||||
...ItemWithSeparatorCommonProps,
|
||||
LeadingSeparatorComponent: ?React.ComponentType<any>,
|
||||
SeparatorComponent: ?React.ComponentType<any>,
|
||||
cellKey: string,
|
||||
index: number,
|
||||
item: Item,
|
||||
setSelfHighlightCallback: (
|
||||
cellKey: string,
|
||||
updateFn: ?(boolean) => void,
|
||||
) => void,
|
||||
setSelfUpdatePropsCallback: (
|
||||
cellKey: string,
|
||||
updateFn: ?(boolean) => void,
|
||||
) => void,
|
||||
prevCellKey?: ?string,
|
||||
updateHighlightFor: (prevCellKey: string, value: boolean) => void,
|
||||
updatePropsFor: (prevCellKey: string, value: Object) => void,
|
||||
renderItem: Function,
|
||||
inverted: boolean,
|
||||
|}>;
|
||||
|
||||
function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
|
||||
const {
|
||||
LeadingSeparatorComponent,
|
||||
// this is the trailing separator and is associated with this item
|
||||
SeparatorComponent,
|
||||
cellKey,
|
||||
prevCellKey,
|
||||
setSelfHighlightCallback,
|
||||
updateHighlightFor,
|
||||
setSelfUpdatePropsCallback,
|
||||
updatePropsFor,
|
||||
item,
|
||||
index,
|
||||
section,
|
||||
inverted,
|
||||
} = props;
|
||||
|
||||
const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] =
|
||||
React.useState(false);
|
||||
|
||||
const [separatorHighlighted, setSeparatorHighlighted] = React.useState(false);
|
||||
|
||||
const [leadingSeparatorProps, setLeadingSeparatorProps] = React.useState({
|
||||
leadingItem: props.leadingItem,
|
||||
leadingSection: props.leadingSection,
|
||||
section: props.section,
|
||||
trailingItem: props.item,
|
||||
trailingSection: props.trailingSection,
|
||||
});
|
||||
const [separatorProps, setSeparatorProps] = React.useState({
|
||||
leadingItem: props.item,
|
||||
leadingSection: props.leadingSection,
|
||||
section: props.section,
|
||||
trailingItem: props.trailingItem,
|
||||
trailingSection: props.trailingSection,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
setSelfHighlightCallback(cellKey, setSeparatorHighlighted);
|
||||
// $FlowFixMe[incompatible-call]
|
||||
setSelfUpdatePropsCallback(cellKey, setSeparatorProps);
|
||||
|
||||
return () => {
|
||||
setSelfUpdatePropsCallback(cellKey, null);
|
||||
setSelfHighlightCallback(cellKey, null);
|
||||
};
|
||||
}, [
|
||||
cellKey,
|
||||
setSelfHighlightCallback,
|
||||
setSeparatorProps,
|
||||
setSelfUpdatePropsCallback,
|
||||
]);
|
||||
|
||||
const separators = {
|
||||
highlight: () => {
|
||||
setLeadingSeparatorHighlighted(true);
|
||||
setSeparatorHighlighted(true);
|
||||
if (prevCellKey != null) {
|
||||
updateHighlightFor(prevCellKey, true);
|
||||
}
|
||||
},
|
||||
unhighlight: () => {
|
||||
setLeadingSeparatorHighlighted(false);
|
||||
setSeparatorHighlighted(false);
|
||||
if (prevCellKey != null) {
|
||||
updateHighlightFor(prevCellKey, false);
|
||||
}
|
||||
},
|
||||
updateProps: (
|
||||
select: 'leading' | 'trailing',
|
||||
newProps: $Shape<ItemWithSeparatorCommonProps>,
|
||||
) => {
|
||||
if (select === 'leading') {
|
||||
if (LeadingSeparatorComponent != null) {
|
||||
setLeadingSeparatorProps({...leadingSeparatorProps, ...newProps});
|
||||
} else if (prevCellKey != null) {
|
||||
// update the previous item's separator
|
||||
updatePropsFor(prevCellKey, {...leadingSeparatorProps, ...newProps});
|
||||
}
|
||||
} else if (select === 'trailing' && SeparatorComponent != null) {
|
||||
setSeparatorProps({...separatorProps, ...newProps});
|
||||
}
|
||||
},
|
||||
};
|
||||
const element = props.renderItem({
|
||||
item,
|
||||
index,
|
||||
section,
|
||||
separators,
|
||||
});
|
||||
const leadingSeparator = LeadingSeparatorComponent != null && (
|
||||
<LeadingSeparatorComponent
|
||||
highlighted={leadingSeparatorHiglighted}
|
||||
{...leadingSeparatorProps}
|
||||
/>
|
||||
);
|
||||
const separator = SeparatorComponent != null && (
|
||||
<SeparatorComponent
|
||||
highlighted={separatorHighlighted}
|
||||
{...separatorProps}
|
||||
/>
|
||||
);
|
||||
return leadingSeparator || separator ? (
|
||||
<View>
|
||||
{inverted === false ? leadingSeparator : separator}
|
||||
{element}
|
||||
{inverted === false ? separator : leadingSeparator}
|
||||
</View>
|
||||
) : (
|
||||
element
|
||||
);
|
||||
}
|
||||
|
||||
/* $FlowFixMe[class-object-subtyping] added when improving typing for this
|
||||
* parameters */
|
||||
// $FlowFixMe[method-unbinding]
|
||||
module.exports = (VirtualizedSectionList: React.AbstractComponent<
|
||||
React.ElementConfig<typeof VirtualizedSectionList>,
|
||||
$ReadOnly<{
|
||||
getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
|
||||
scrollToLocation: (params: ScrollToLocationParamsType) => void,
|
||||
...
|
||||
}>,
|
||||
>);
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {CellRenderMask} from '../CellRenderMask';
|
||||
|
||||
describe('CellRenderMask', () => {
|
||||
it('throws when constructed with invalid size', () => {
|
||||
expect(() => new CellRenderMask(-1)).toThrow();
|
||||
});
|
||||
|
||||
it('allows creation of empty mask', () => {
|
||||
const renderMask = new CellRenderMask(0);
|
||||
expect(renderMask.enumerateRegions()).toEqual([]);
|
||||
});
|
||||
|
||||
it('allows creation of single-cell mask', () => {
|
||||
const renderMask = new CellRenderMask(1);
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 0, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('throws when adding invalid cell ranges', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
|
||||
expect(() => renderMask.addCells({first: -2, last: -1})).toThrow();
|
||||
expect(() => renderMask.addCells({first: -2, last: 0})).toThrow();
|
||||
expect(() => renderMask.addCells({first: 0, last: 5})).toThrow();
|
||||
expect(() => renderMask.addCells({first: 6, last: 7})).toThrow();
|
||||
});
|
||||
|
||||
it('allows adding single cell at beginning', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
renderMask.addCells({first: 0, last: 0});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 0, isSpacer: false},
|
||||
{first: 1, last: 4, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('allows adding single cell at end', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
renderMask.addCells({first: 4, last: 4});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 3, isSpacer: true},
|
||||
{first: 4, last: 4, isSpacer: false},
|
||||
]);
|
||||
});
|
||||
|
||||
it('allows adding single cell in middle', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
renderMask.addCells({first: 2, last: 2});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 1, isSpacer: true},
|
||||
{first: 2, last: 2, isSpacer: false},
|
||||
{first: 3, last: 4, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('allows marking entire cell range', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
renderMask.addCells({first: 0, last: 4});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 4, isSpacer: false},
|
||||
]);
|
||||
});
|
||||
|
||||
it('allows adding empty cell range', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
renderMask.addCells({first: 0, last: -1});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 4, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('correctly replaces fragmented cell ranges', () => {
|
||||
const renderMask = new CellRenderMask(10);
|
||||
|
||||
renderMask.addCells({first: 3, last: 3});
|
||||
renderMask.addCells({first: 5, last: 7});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
{first: 5, last: 7, isSpacer: false},
|
||||
{first: 8, last: 9, isSpacer: true},
|
||||
]);
|
||||
|
||||
renderMask.addCells({first: 3, last: 7});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 7, isSpacer: false},
|
||||
{first: 8, last: 9, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('left-expands region', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
|
||||
renderMask.addCells({first: 3, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
|
||||
renderMask.addCells({first: 2, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 1, isSpacer: true},
|
||||
{first: 2, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
|
||||
it('right-expands region', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
|
||||
renderMask.addCells({first: 3, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
|
||||
renderMask.addCells({first: 3, last: 4});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 4, isSpacer: false},
|
||||
]);
|
||||
});
|
||||
|
||||
it('left+right expands region', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
|
||||
renderMask.addCells({first: 3, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 2, isSpacer: true},
|
||||
{first: 3, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
|
||||
renderMask.addCells({first: 2, last: 4});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 1, isSpacer: true},
|
||||
{first: 2, last: 4, isSpacer: false},
|
||||
]);
|
||||
});
|
||||
|
||||
it('does nothing when adding existing cells', () => {
|
||||
const renderMask = new CellRenderMask(5);
|
||||
|
||||
renderMask.addCells({first: 2, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 1, isSpacer: true},
|
||||
{first: 2, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
|
||||
renderMask.addCells({first: 3, last: 3});
|
||||
|
||||
expect(renderMask.enumerateRegions()).toEqual([
|
||||
{first: 0, last: 1, isSpacer: true},
|
||||
{first: 2, last: 3, isSpacer: false},
|
||||
{first: 4, last: 4, isSpacer: true},
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const FillRateHelper = require('../FillRateHelper');
|
||||
|
||||
let rowFramesGlobal;
|
||||
const dataGlobal = [
|
||||
{key: 'header'},
|
||||
{key: 'a'},
|
||||
{key: 'b'},
|
||||
{key: 'c'},
|
||||
{key: 'd'},
|
||||
{key: 'footer'},
|
||||
];
|
||||
function getFrameMetrics(index: number) {
|
||||
const frame = rowFramesGlobal[dataGlobal[index].key];
|
||||
return {length: frame.height, offset: frame.y, inLayout: frame.inLayout};
|
||||
}
|
||||
|
||||
function computeResult({helper, props, state, scroll}): number {
|
||||
helper.activate();
|
||||
return helper.computeBlankness(
|
||||
{
|
||||
data: dataGlobal,
|
||||
getItemCount: data2 => data2.length,
|
||||
initialNumToRender: 10,
|
||||
...(props || {}),
|
||||
},
|
||||
{first: 1, last: 2, ...(state || {})},
|
||||
{offset: 0, visibleLength: 100, ...(scroll || {})},
|
||||
);
|
||||
}
|
||||
|
||||
describe('computeBlankness', function () {
|
||||
beforeEach(() => {
|
||||
FillRateHelper.setSampleRate(1);
|
||||
FillRateHelper.setMinSampleCount(0);
|
||||
});
|
||||
|
||||
it('computes correct blankness of viewport', function () {
|
||||
const helper = new FillRateHelper(getFrameMetrics);
|
||||
rowFramesGlobal = {
|
||||
header: {y: 0, height: 0, inLayout: true},
|
||||
a: {y: 0, height: 50, inLayout: true},
|
||||
b: {y: 50, height: 50, inLayout: true},
|
||||
};
|
||||
let blankness = computeResult({helper});
|
||||
expect(blankness).toBe(0);
|
||||
blankness = computeResult({helper, state: {last: 1}});
|
||||
expect(blankness).toBe(0.5);
|
||||
blankness = computeResult({helper, scroll: {offset: 25}});
|
||||
expect(blankness).toBe(0.25);
|
||||
blankness = computeResult({helper, scroll: {visibleLength: 400}});
|
||||
expect(blankness).toBe(0.75);
|
||||
blankness = computeResult({helper, scroll: {offset: 100}});
|
||||
expect(blankness).toBe(1);
|
||||
});
|
||||
|
||||
it('skips frames that are not in layout', function () {
|
||||
const helper = new FillRateHelper(getFrameMetrics);
|
||||
rowFramesGlobal = {
|
||||
header: {y: 0, height: 0, inLayout: false},
|
||||
a: {y: 0, height: 10, inLayout: false},
|
||||
b: {y: 10, height: 30, inLayout: true},
|
||||
c: {y: 40, height: 40, inLayout: true},
|
||||
d: {y: 80, height: 20, inLayout: false},
|
||||
footer: {y: 100, height: 0, inLayout: false},
|
||||
};
|
||||
const blankness = computeResult({helper, state: {last: 4}});
|
||||
expect(blankness).toBe(0.3);
|
||||
});
|
||||
|
||||
it('sampling rate can disable', function () {
|
||||
let helper = new FillRateHelper(getFrameMetrics);
|
||||
rowFramesGlobal = {
|
||||
header: {y: 0, height: 0, inLayout: true},
|
||||
a: {y: 0, height: 40, inLayout: true},
|
||||
b: {y: 40, height: 40, inLayout: true},
|
||||
};
|
||||
let blankness = computeResult({helper});
|
||||
expect(blankness).toBe(0.2);
|
||||
|
||||
FillRateHelper.setSampleRate(0);
|
||||
|
||||
helper = new FillRateHelper(getFrameMetrics);
|
||||
blankness = computeResult({helper});
|
||||
expect(blankness).toBe(0);
|
||||
});
|
||||
|
||||
it('can handle multiple listeners and unsubscribe', function () {
|
||||
const listeners = [jest.fn(), jest.fn(), jest.fn()];
|
||||
const subscriptions = listeners.map(listener =>
|
||||
FillRateHelper.addListener(listener),
|
||||
);
|
||||
subscriptions[1].remove();
|
||||
const helper = new FillRateHelper(getFrameMetrics);
|
||||
rowFramesGlobal = {
|
||||
header: {y: 0, height: 0, inLayout: true},
|
||||
a: {y: 0, height: 40, inLayout: true},
|
||||
b: {y: 40, height: 40, inLayout: true},
|
||||
};
|
||||
const blankness = computeResult({helper});
|
||||
expect(blankness).toBe(0.2);
|
||||
helper.deactivateAndFlush();
|
||||
const info0 = listeners[0].mock.calls[0][0];
|
||||
expect(info0.pixels_blank / info0.pixels_sampled).toBe(blankness);
|
||||
expect(listeners[1]).not.toBeCalled();
|
||||
const info1 = listeners[2].mock.calls[0][0];
|
||||
expect(info1.pixels_blank / info1.pixels_sampled).toBe(blankness);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,444 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const ViewabilityHelper = require('../ViewabilityHelper');
|
||||
|
||||
let rowFrames;
|
||||
let data;
|
||||
const props = {
|
||||
data,
|
||||
getItemCount: () => data.length,
|
||||
};
|
||||
function getFrameMetrics(index: number) {
|
||||
const frame = rowFrames[data[index].key];
|
||||
return {length: frame.height, offset: frame.y};
|
||||
}
|
||||
function createViewToken(index: number, isViewable: boolean) {
|
||||
return {key: data[index].key, isViewable};
|
||||
}
|
||||
|
||||
describe('computeViewableItems', function () {
|
||||
it('returns all 4 entirely visible rows as viewable', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
viewAreaCoveragePercentThreshold: 50,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
b: {y: 50, height: 50},
|
||||
c: {y: 100, height: 50},
|
||||
d: {y: 150, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
||||
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
||||
[0, 1, 2, 3],
|
||||
);
|
||||
});
|
||||
|
||||
it('returns top 2 rows as viewable (1. entirely visible and 2. majority)', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
viewAreaCoveragePercentThreshold: 50,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
b: {y: 50, height: 150},
|
||||
c: {y: 200, height: 50},
|
||||
d: {y: 250, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
||||
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
||||
[0, 1],
|
||||
);
|
||||
});
|
||||
|
||||
it('returns only 2nd row as viewable (majority)', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
viewAreaCoveragePercentThreshold: 50,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
b: {y: 50, height: 150},
|
||||
c: {y: 200, height: 50},
|
||||
d: {y: 250, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
||||
expect(
|
||||
helper.computeViewableItems(props, 25, 200, getFrameMetrics),
|
||||
).toEqual([1]);
|
||||
});
|
||||
|
||||
it('handles empty input', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
viewAreaCoveragePercentThreshold: 50,
|
||||
});
|
||||
rowFrames = {};
|
||||
data = [];
|
||||
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
||||
[],
|
||||
);
|
||||
});
|
||||
|
||||
it('handles different view area coverage percent thresholds', function () {
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
b: {y: 50, height: 150},
|
||||
c: {y: 200, height: 500},
|
||||
d: {y: 700, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
||||
|
||||
let helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 0});
|
||||
expect(helper.computeViewableItems(props, 0, 50, getFrameMetrics)).toEqual([
|
||||
0,
|
||||
]);
|
||||
expect(helper.computeViewableItems(props, 1, 50, getFrameMetrics)).toEqual([
|
||||
0, 1,
|
||||
]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 199, 50, getFrameMetrics),
|
||||
).toEqual([1, 2]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 250, 50, getFrameMetrics),
|
||||
).toEqual([2]);
|
||||
|
||||
helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 100});
|
||||
expect(helper.computeViewableItems(props, 0, 200, getFrameMetrics)).toEqual(
|
||||
[0, 1],
|
||||
);
|
||||
expect(helper.computeViewableItems(props, 1, 200, getFrameMetrics)).toEqual(
|
||||
[1],
|
||||
);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 400, 200, getFrameMetrics),
|
||||
).toEqual([2]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 600, 200, getFrameMetrics),
|
||||
).toEqual([3]);
|
||||
|
||||
helper = new ViewabilityHelper({viewAreaCoveragePercentThreshold: 10});
|
||||
expect(
|
||||
helper.computeViewableItems(props, 30, 200, getFrameMetrics),
|
||||
).toEqual([0, 1, 2]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 31, 200, getFrameMetrics),
|
||||
).toEqual([1, 2]);
|
||||
});
|
||||
|
||||
it('handles different item visible percent thresholds', function () {
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
b: {y: 50, height: 150},
|
||||
c: {y: 200, height: 50},
|
||||
d: {y: 250, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
|
||||
let helper = new ViewabilityHelper({itemVisiblePercentThreshold: 0});
|
||||
expect(helper.computeViewableItems(props, 0, 50, getFrameMetrics)).toEqual([
|
||||
0,
|
||||
]);
|
||||
expect(helper.computeViewableItems(props, 1, 50, getFrameMetrics)).toEqual([
|
||||
0, 1,
|
||||
]);
|
||||
|
||||
helper = new ViewabilityHelper({itemVisiblePercentThreshold: 100});
|
||||
expect(helper.computeViewableItems(props, 0, 250, getFrameMetrics)).toEqual(
|
||||
[0, 1, 2],
|
||||
);
|
||||
expect(helper.computeViewableItems(props, 1, 250, getFrameMetrics)).toEqual(
|
||||
[1, 2],
|
||||
);
|
||||
|
||||
helper = new ViewabilityHelper({itemVisiblePercentThreshold: 10});
|
||||
expect(
|
||||
helper.computeViewableItems(props, 184, 20, getFrameMetrics),
|
||||
).toEqual([1]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 185, 20, getFrameMetrics),
|
||||
).toEqual([1, 2]);
|
||||
expect(
|
||||
helper.computeViewableItems(props, 186, 20, getFrameMetrics),
|
||||
).toEqual([2]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onUpdate', function () {
|
||||
it('returns 1 visible row as viewable then scrolls away', function () {
|
||||
const helper = new ViewabilityHelper();
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 50},
|
||||
};
|
||||
data = [{key: 'a'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'a'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [{isViewable: true, key: 'a'}],
|
||||
});
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1); // nothing changed!
|
||||
helper.onUpdate(
|
||||
props,
|
||||
100,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
||||
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
||||
changed: [{isViewable: false, key: 'a'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [],
|
||||
});
|
||||
});
|
||||
|
||||
it('returns 1st visible row then 1st and 2nd then just 2nd', function () {
|
||||
const helper = new ViewabilityHelper();
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 200},
|
||||
b: {y: 200, height: 200},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'a'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [{isViewable: true, key: 'a'}],
|
||||
});
|
||||
helper.onUpdate(
|
||||
props,
|
||||
100,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
||||
// Both visible with 100px overlap each
|
||||
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'b'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [
|
||||
{isViewable: true, key: 'a'},
|
||||
{isViewable: true, key: 'b'},
|
||||
],
|
||||
});
|
||||
helper.onUpdate(
|
||||
props,
|
||||
200,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(3);
|
||||
expect(onViewableItemsChanged.mock.calls[2][0]).toEqual({
|
||||
changed: [{isViewable: false, key: 'a'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [{isViewable: true, key: 'b'}],
|
||||
});
|
||||
});
|
||||
|
||||
it('minimumViewTime delays callback', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
minimumViewTime: 350,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 200},
|
||||
b: {y: 200, height: 200},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged).not.toBeCalled();
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'a'}],
|
||||
viewabilityConfig: {
|
||||
minimumViewTime: 350,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
},
|
||||
viewableItems: [{isViewable: true, key: 'a'}],
|
||||
});
|
||||
});
|
||||
|
||||
it('minimumViewTime skips briefly visible items', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
minimumViewTime: 350,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 250},
|
||||
b: {y: 250, height: 200},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
helper.onUpdate(
|
||||
props,
|
||||
300, // scroll past item 'a'
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'b'}],
|
||||
viewabilityConfig: {
|
||||
minimumViewTime: 350,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
},
|
||||
viewableItems: [{isViewable: true, key: 'b'}],
|
||||
});
|
||||
});
|
||||
|
||||
it('waitForInteraction blocks callback until interaction', function () {
|
||||
const helper = new ViewabilityHelper({
|
||||
waitForInteraction: true,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
});
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 200},
|
||||
b: {y: 200, height: 200},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
100,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged).not.toBeCalled();
|
||||
|
||||
helper.recordInteraction();
|
||||
|
||||
helper.onUpdate(
|
||||
props,
|
||||
20,
|
||||
100,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'a'}],
|
||||
viewabilityConfig: {
|
||||
waitForInteraction: true,
|
||||
viewAreaCoveragePercentThreshold: 0,
|
||||
},
|
||||
viewableItems: [{isViewable: true, key: 'a'}],
|
||||
});
|
||||
});
|
||||
|
||||
it('returns the right visible row after the underlying data changed', function () {
|
||||
const helper = new ViewabilityHelper();
|
||||
rowFrames = {
|
||||
a: {y: 0, height: 200},
|
||||
b: {y: 200, height: 200},
|
||||
};
|
||||
data = [{key: 'a'}, {key: 'b'}];
|
||||
const onViewableItemsChanged = jest.fn();
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(1);
|
||||
expect(onViewableItemsChanged.mock.calls[0][0]).toEqual({
|
||||
changed: [{isViewable: true, key: 'a'}],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [{isViewable: true, key: 'a'}],
|
||||
});
|
||||
|
||||
// update data
|
||||
rowFrames = {
|
||||
c: {y: 0, height: 200},
|
||||
a: {y: 200, height: 200},
|
||||
b: {y: 400, height: 200},
|
||||
};
|
||||
data = [{key: 'c'}, {key: 'a'}, {key: 'b'}];
|
||||
|
||||
helper.resetViewableIndices();
|
||||
|
||||
helper.onUpdate(
|
||||
props,
|
||||
0,
|
||||
200,
|
||||
getFrameMetrics,
|
||||
createViewToken,
|
||||
onViewableItemsChanged,
|
||||
);
|
||||
|
||||
expect(onViewableItemsChanged.mock.calls.length).toBe(2);
|
||||
expect(onViewableItemsChanged.mock.calls[1][0]).toEqual({
|
||||
changed: [
|
||||
{isViewable: true, key: 'c'},
|
||||
{isViewable: false, key: 'a'},
|
||||
],
|
||||
viewabilityConfig: {viewAreaCoveragePercentThreshold: 0},
|
||||
viewableItems: [{isViewable: true, key: 'c'}],
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import {elementsThatOverlapOffsets, newRangeCount} from '../VirtualizeUtils';
|
||||
|
||||
describe('newRangeCount', function () {
|
||||
it('handles subset', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 2, last: 3})).toBe(0);
|
||||
});
|
||||
it('handles forward disjoint set', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 6, last: 9})).toBe(4);
|
||||
});
|
||||
it('handles reverse disjoint set', function () {
|
||||
expect(newRangeCount({first: 6, last: 8}, {first: 1, last: 4})).toBe(4);
|
||||
});
|
||||
it('handles superset', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 0, last: 5})).toBe(2);
|
||||
});
|
||||
it('handles end extension', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 1, last: 8})).toBe(4);
|
||||
});
|
||||
it('handles front extension', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 0, last: 4})).toBe(1);
|
||||
});
|
||||
it('handles forward intersect', function () {
|
||||
expect(newRangeCount({first: 1, last: 4}, {first: 3, last: 6})).toBe(2);
|
||||
});
|
||||
it('handles reverse intersect', function () {
|
||||
expect(newRangeCount({first: 3, last: 6}, {first: 1, last: 4})).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('elementsThatOverlapOffsets', function () {
|
||||
it('handles fixed length', function () {
|
||||
const offsets = [0, 250, 350, 450];
|
||||
function getFrameMetrics(index: number) {
|
||||
return {
|
||||
length: 100,
|
||||
offset: 100 * index,
|
||||
};
|
||||
}
|
||||
expect(
|
||||
elementsThatOverlapOffsets(offsets, fakeProps(100), getFrameMetrics, 1),
|
||||
).toEqual([0, 2, 3, 4]);
|
||||
});
|
||||
it('handles variable length', function () {
|
||||
const offsets = [150, 250, 900];
|
||||
const frames = [
|
||||
{offset: 0, length: 50},
|
||||
{offset: 50, length: 200},
|
||||
{offset: 250, length: 600},
|
||||
{offset: 850, length: 100},
|
||||
{offset: 950, length: 150},
|
||||
];
|
||||
expect(
|
||||
elementsThatOverlapOffsets(
|
||||
offsets,
|
||||
fakeProps(frames.length),
|
||||
ii => frames[ii],
|
||||
1,
|
||||
),
|
||||
).toEqual([1, 1, 3]);
|
||||
});
|
||||
it('handles frame boundaries', function () {
|
||||
const offsets = [0, 100, 200, 300];
|
||||
function getFrameMetrics(index: number) {
|
||||
return {
|
||||
length: 100,
|
||||
offset: 100 * index,
|
||||
};
|
||||
}
|
||||
expect(
|
||||
elementsThatOverlapOffsets(offsets, fakeProps(100), getFrameMetrics, 1),
|
||||
).toEqual([0, 0, 1, 2]);
|
||||
});
|
||||
it('handles out of bounds', function () {
|
||||
const offsets = [-100, 150, 900];
|
||||
const frames = [
|
||||
{offset: 0, length: 50},
|
||||
{offset: 50, length: 150},
|
||||
{offset: 250, length: 100},
|
||||
];
|
||||
expect(
|
||||
elementsThatOverlapOffsets(
|
||||
offsets,
|
||||
fakeProps(frames.length),
|
||||
ii => frames[ii],
|
||||
1,
|
||||
),
|
||||
).toEqual([undefined, 1]);
|
||||
});
|
||||
});
|
||||
|
||||
function fakeProps(length) {
|
||||
return {
|
||||
data: new Array(length).fill({}),
|
||||
getItemCount: () => length,
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,278 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const VirtualizedSectionList = require('../VirtualizedSectionList');
|
||||
const React = require('react');
|
||||
const ReactTestRenderer = require('react-test-renderer');
|
||||
|
||||
describe('VirtualizedSectionList', () => {
|
||||
it('renders simple list', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
sections={[
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{title: 's1', data: [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]},
|
||||
]}
|
||||
// $FlowFixMe[missing-local-annot]
|
||||
renderItem={({item}) => <item value={item.key} />}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders empty list', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
sections={[]}
|
||||
renderItem={({item}) => <item value={item.key} />}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders empty list with empty component', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
sections={[]}
|
||||
ListEmptyComponent={() => <empty />}
|
||||
ListFooterComponent={() => <footer />}
|
||||
ListHeaderComponent={() => <header />}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
renderItem={({item}) => <item value={item.key} />}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders list with empty component', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
// $FlowFixMe[incompatible-type]
|
||||
sections={[{title: 's1', data: [{key: 'hello'}]}]}
|
||||
ListEmptyComponent={() => <empty />}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
renderItem={({item}) => <item value={item.key} />}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders all the bells and whistles', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
ItemSeparatorComponent={() => <separator />}
|
||||
ListEmptyComponent={() => <empty />}
|
||||
ListFooterComponent={() => <footer />}
|
||||
ListHeaderComponent={() => <header />}
|
||||
sections={[
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{
|
||||
title: 's1',
|
||||
// $FlowFixMe[incompatible-call]
|
||||
data: new Array<void>(5).fill().map((_, ii) => ({id: String(ii)})),
|
||||
},
|
||||
]}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
getItemLayout={({index}) => ({
|
||||
index: -1,
|
||||
length: 50,
|
||||
offset: index * 50,
|
||||
})}
|
||||
inverted={true}
|
||||
keyExtractor={(item, index) => item.id}
|
||||
onRefresh={jest.fn()}
|
||||
refreshing={false}
|
||||
renderItem={({item}) => <item value={item.id} />}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('handles separators correctly', () => {
|
||||
const infos = [];
|
||||
let component;
|
||||
ReactTestRenderer.act(() => {
|
||||
component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
ItemSeparatorComponent={props => <separator {...props} />}
|
||||
sections={[
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
|
||||
]}
|
||||
renderItem={info => {
|
||||
infos.push(info);
|
||||
return <item title={info.item.key} />;
|
||||
}}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
expect(component).toMatchSnapshot();
|
||||
|
||||
ReactTestRenderer.act(() => {
|
||||
infos[1].separators.highlight();
|
||||
});
|
||||
expect(component).toMatchSnapshot();
|
||||
ReactTestRenderer.act(() => {
|
||||
infos[2].separators.updateProps('leading', {press: true});
|
||||
});
|
||||
expect(component).toMatchSnapshot();
|
||||
ReactTestRenderer.act(() => {
|
||||
infos[1].separators.unhighlight();
|
||||
});
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('handles nested lists', () => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
// $FlowFixMe[incompatible-type]
|
||||
sections={[{title: 'outer', data: [{key: 'outer0'}, {key: 'outer1'}]}]}
|
||||
renderItem={outerInfo => (
|
||||
<VirtualizedSectionList
|
||||
sections={[
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{
|
||||
title: 'inner',
|
||||
data: [
|
||||
{key: outerInfo.item.key + ':inner0'},
|
||||
{key: outerInfo.item.key + ':inner1'},
|
||||
],
|
||||
},
|
||||
]}
|
||||
horizontal={outerInfo.item.key === 'outer1'}
|
||||
renderItem={innerInfo => {
|
||||
return <item title={innerInfo.item.key} />;
|
||||
}}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
/>
|
||||
)}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
/>,
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('scrollToLocation', () => {
|
||||
const ITEM_HEIGHT = 100;
|
||||
|
||||
const createVirtualizedSectionList = (props?: {
|
||||
stickySectionHeadersEnabled: boolean,
|
||||
}) => {
|
||||
const component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
sections={[
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{title: 's1', data: [{key: 'i1.1'}, {key: 'i1.2'}, {key: 'i1.3'}]},
|
||||
// $FlowFixMe[incompatible-type]
|
||||
{title: 's2', data: [{key: 'i2.1'}, {key: 'i2.2'}, {key: 'i2.3'}]},
|
||||
]}
|
||||
renderItem={({item}) => <item value={item.key} />}
|
||||
getItem={(data, key) => data[key]}
|
||||
getItemCount={data => data.length}
|
||||
getItemLayout={(data, index) => ({
|
||||
length: ITEM_HEIGHT,
|
||||
offset: ITEM_HEIGHT * index,
|
||||
index,
|
||||
})}
|
||||
{...props}
|
||||
/>,
|
||||
);
|
||||
const instance = component.getInstance();
|
||||
const spy = jest.fn();
|
||||
|
||||
// $FlowFixMe[incompatible-use] wrong types
|
||||
// $FlowFixMe[prop-missing] wrong types
|
||||
instance._listRef.scrollToIndex = spy;
|
||||
|
||||
return {
|
||||
instance,
|
||||
spy,
|
||||
};
|
||||
};
|
||||
|
||||
it('when sticky stickySectionHeadersEnabled={true}, header height is added to the developer-provided viewOffset', () => {
|
||||
const {instance, spy} = createVirtualizedSectionList({
|
||||
stickySectionHeadersEnabled: true,
|
||||
});
|
||||
|
||||
const viewOffset = 25;
|
||||
|
||||
// $FlowFixMe[prop-missing] scrollToLocation isn't on instance
|
||||
instance?.scrollToLocation({
|
||||
sectionIndex: 0,
|
||||
itemIndex: 1,
|
||||
viewOffset,
|
||||
});
|
||||
expect(spy).toHaveBeenCalledWith({
|
||||
index: 1,
|
||||
itemIndex: 1,
|
||||
sectionIndex: 0,
|
||||
viewOffset: viewOffset + ITEM_HEIGHT,
|
||||
});
|
||||
});
|
||||
|
||||
it.each([
|
||||
[
|
||||
// prevents #18098
|
||||
{sectionIndex: 0, itemIndex: 0},
|
||||
{
|
||||
index: 0,
|
||||
itemIndex: 0,
|
||||
sectionIndex: 0,
|
||||
viewOffset: 0,
|
||||
},
|
||||
],
|
||||
[
|
||||
{sectionIndex: 2, itemIndex: 1},
|
||||
{
|
||||
index: 11,
|
||||
itemIndex: 1,
|
||||
sectionIndex: 2,
|
||||
viewOffset: 0,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
sectionIndex: 0,
|
||||
itemIndex: 1,
|
||||
viewOffset: 25,
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
itemIndex: 1,
|
||||
sectionIndex: 0,
|
||||
viewOffset: 25,
|
||||
},
|
||||
],
|
||||
])(
|
||||
'given sectionIndex, itemIndex and viewOffset, scrollToIndex is called with correct params',
|
||||
(scrollToLocationParams, expected) => {
|
||||
const {instance, spy} = createVirtualizedSectionList();
|
||||
// $FlowFixMe[prop-missing] scrollToLocation not on instance
|
||||
instance?.scrollToLocation(scrollToLocationParams);
|
||||
expect(spy).toHaveBeenCalledWith(expected);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -13,11 +13,11 @@ import type {RootTag} from '../ReactNative/RootTag';
|
||||
import type {DirectEventHandler} from '../Types/CodegenTypes';
|
||||
|
||||
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
|
||||
import {VirtualizedListContextResetter} from '../Lists/VirtualizedListContext.js';
|
||||
import {type EventSubscription} from '../vendor/emitter/EventEmitter';
|
||||
import ModalInjection from './ModalInjection';
|
||||
import NativeModalManager from './NativeModalManager';
|
||||
import RCTModalHostView from './RCTModalHostViewNativeComponent';
|
||||
import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
|
||||
|
||||
const ScrollView = require('../Components/ScrollView/ScrollView');
|
||||
const View = require('../Components/View/View');
|
||||
|
||||
@@ -15,8 +15,8 @@ import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-render
|
||||
const Switch = require('../Components/Switch/Switch').default;
|
||||
const TextInput = require('../Components/TextInput/TextInput');
|
||||
const View = require('../Components/View/View');
|
||||
const VirtualizedList = require('../Lists/VirtualizedList').default;
|
||||
const Text = require('../Text/Text');
|
||||
const {VirtualizedList} = require('@react-native/virtualized-lists');
|
||||
const React = require('react');
|
||||
const ShallowRenderer = require('react-shallow-renderer');
|
||||
const ReactTestRenderer = require('react-test-renderer');
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
describe('clamp', () => {
|
||||
const clamp = require('../clamp');
|
||||
|
||||
it('should return the value if the value does not exceed boundaries', () => {
|
||||
expect(clamp(0, 5, 10)).toEqual(5);
|
||||
expect(clamp(5, 5, 10)).toEqual(5);
|
||||
expect(clamp(0, 5, 5)).toEqual(5);
|
||||
expect(clamp(5, 5, 5)).toEqual(5);
|
||||
});
|
||||
|
||||
it('should return the min value if the value is too low', () => {
|
||||
expect(clamp(10, 5, 20)).toEqual(10);
|
||||
expect(clamp(10, 9, 20)).toEqual(10);
|
||||
});
|
||||
|
||||
it('should return the max value if the value is too high', () => {
|
||||
expect(clamp(10, 25, 20)).toEqual(20);
|
||||
expect(clamp(10, 21, 20)).toEqual(20);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow strict
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function clamp(min: number, value: number, max: number): number {
|
||||
if (value < min) {
|
||||
return min;
|
||||
}
|
||||
if (value > max) {
|
||||
return max;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
module.exports = clamp;
|
||||
Reference in New Issue
Block a user