mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
5cb2debbea
Summary: A CellRenderMask helps track regions of cells/spacers to render. It's API allows adding ranges of cells, where its otput be an ordered list of contiguous spacer/non-spacer ranges. The implementation keeps this region list internally, splitting or merging regions when cells are added. This output will be used by the render function of a refactored VirtualizedList. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Internal] [Added] - Add "CellRenderMask" Region Tracking Structure Pull Request resolved: https://github.com/facebook/react-native/pull/31420 Test Plan: Validated via UTs. Reviewed By: lunaleaps Differential Revision: D28293161 Pulled By: rozele fbshipit-source-id: a5e4e2144a90387aabe0974650429018440abf67
180 lines
5.2 KiB
JavaScript
180 lines
5.2 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its 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: -1, last: 0})).toThrow();
|
|
expect(() => renderMask.addCells({first: 1, 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('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},
|
|
]);
|
|
});
|
|
});
|