Commit Graph
5 Commits
Author SHA1 Message Date
Pieter Vanderwerff ee3d3c248d Add missing class annotations xplat/js
Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a
2022-08-03 12:43:58 -07:00
Nick Gerleman 0cfe5ae526 Allow empty cell ranges in CellRenderMask.addCells()
Summary:
VirtualizedList state is represented in terms of [first, last] ranges, where it is possible to express a zero-cell range by having [n, n-1]. This includes some awkward examples, like [0, -1] being valid.

CellRenderMask assumes `addCells` is called with at least one cell, with VirtualizedList previously guarding against adding the no cell case. This guard is present for adding main cell regions, but not for `_initialRenderRegion()`, which can be overridden to have a zero length as well.

This moves the `CellRenderMask` to be permissive of zero-length cell regions, and removes the caller guard.

Changelog:
[Internal][Fixed] - Allow empty cell ranges in CellRenderMask

Reviewed By: rshest

Differential Revision: D38184444

fbshipit-source-id: d2dadfdd9628b24f894126d63b1eb93f6387b877
2022-07-28 11:08:18 -07:00
Nick Gerleman 479053cb3c Add VirtualizedList_EXPERIMENTAL (CellRenderMask Usage)
Summary:
# This Change

https://github.com/react-native-community/discussions-and-proposals/pull/335  discussed a set of problems with VirtualizedList and focus. These were seen as severe externally for a11y on desktop. The issues center on users of keyboard and accessibility tools, where users expect to be able to move focus in an uninterrupted loop.

The design and implementation evolved to be a bit more general, and without any API-surface behavior changes. It was implemented and rolled out externally as a series of changes. The remaining changes that were not upstreamed into RN are rolled into https://github.com/facebook/react-native/pull/32646

This diff brings this change into the repo, as a separate copy of VirtualizedList, to measure its impact to guardrail metrics, without yet making it the default implementation. The intention is for this to be temporary, until there is confidence the implementation is correct.

## List Implementation (more on GitHub)

This change makes it possible to synchronously move native focus to arbitrary items in a VirtualizedList. This is implemented by switching component state to a sparse bitset. This was previously implemented and upstreamed as `CellRenderMask`.

A usage of this is added, to keep the last focused item rendered. This allows the focus loop to remain unbroken, when scrolling away, or tab loops which leave/re-enter the list.

VirtualizedList tracks the last focused cell through the capture phase of `onFocus`. It will keep the cell, and a viewport above and below the last focused cell rendered, to allow movement to it without blanking (without using too much memory).

## Experimentation Implementation

A mechanism is added to gate the change via VirtualizedListInjection, mirroring the approach taken for Switch with D27381306 (https://github.com/facebook/react-native/commit/683b825b327e7fa71e87e3d613cb9acd37c24288).

It allows VirtualizedList to delegate to a global override. It has a slight penalty to needing to import both modules, but means code which imports VirtualizedList directly is affected the changes.

Changelog:
[Internal][Added] - Add VirtualizedList_EXPERIMENTAL (CellRenderMask Usage)

Reviewed By: lunaleaps

Differential Revision: D38020408

fbshipit-source-id: ad0aaa6791f3f4455e3068502a2841f3ffb40b41
2022-07-26 20:06:58 -07:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Nick Gerleman 5cb2debbea Add "CellRenderMask" Region Tracking Structure (#31420)
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
2021-06-24 07:57:01 -07:00