Fix invariant violation when nesting VirtualizedList inside ListEmptyComponent

Summary:
Fixes #35871

Nested VirtualizedLists register to their parents for updates, associated to a specfific cellKey set by VirtualizedListCellContextProvider. This cellKey is usually set when rendering a cell for a data item, but we can also render a nested VirtualizedList by putting one in a ListHeaderComponent/ListFooterComponent/ListEmptyComponent.

D6603342 (a010a0c) added cellKeys when we render from a header/footer, but not ListEmptyComponent, so that association would silently fail earlier.

D39466677 (010da67) added extra invariants to child list handling, that are now triggered by this case, complaining because we are trying to unregister a child list we never successfully registered, due to a missing cellKey.

This fixes the issue by providing a cellKey for ListEmptyComponent as well. It also cleans up some of the parameterization needed from when we had two VirtualizedList implementations.

Changelog:
[General][Fixed] - Fix invariant violation when nesting VirtualizedList inside ListEmptyComponent

Differential Revision: D42574462

fbshipit-source-id: 4d7817fa6298ca1ef1b0c5977f19f6b68123db8b

Author: NickGerleman

Libraries/Lists/ChildListCollection.js

@@ -8,13 +8,15 @@
  * @format
  */
 
+import type VirtualizedList from './VirtualizedList';
+
 import invariant from 'invariant';
 
-export default class ChildListCollection<TList> {
-  _cellKeyToChildren: Map<string, Set<TList>> = new Map();
-  _childrenToCellKey: Map<TList, string> = new Map();
+export default class ChildListCollection {
+  _cellKeyToChildren: Map<string, Set<VirtualizedList>> = new Map();
+  _childrenToCellKey: Map<VirtualizedList, string> = new Map();
 
-  add(list: TList, cellKey: string): void {
+  add(list: VirtualizedList, cellKey: string): void {
     invariant(
       !this._childrenToCellKey.has(list),
       'Trying to add already present child list',
@@ -27,7 +29,7 @@ export default class ChildListCollection<TList> {
     this._childrenToCellKey.set(list, cellKey);
   }
 
-  remove(list: TList): void {
+  remove(list: VirtualizedList): void {
     const cellKey = this._childrenToCellKey.get(list);
     invariant(cellKey != null, 'Trying to remove non-present child list');
     this._childrenToCellKey.delete(list);
@@ -41,22 +43,22 @@ export default class ChildListCollection<TList> {
     }
   }
 
-  forEach(fn: TList => void): void {
+  forEach(fn: VirtualizedList => void): void {
     for (const listSet of this._cellKeyToChildren.values()) {
       for (const list of listSet) {
         fn(list);
       }
     }
   }
 
-  forEachInCell(cellKey: string, fn: TList => void): void {
+  forEachInCell(cellKey: string, fn: VirtualizedList => void): void {
     const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
     for (const list of listSet) {
       fn(list);
     }
   }
 
-  anyInCell(cellKey: string, fn: TList => boolean): boolean {
+  anyInCell(cellKey: string, fn: VirtualizedList => boolean): boolean {
     const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
     for (const list of listSet) {
       if (fn(list)) {

Libraries/Lists/VirtualizedList.js

@@ -648,6 +648,10 @@ export default class VirtualizedList extends StateSafePureComponent<
 
   componentDidMount() {
     if (this._isNestedWithSameOrientation()) {
+      invariant(
+        this.context.cellKey != null,
+        'A cellkey should be set for nested children',
+      );
       this.context.registerAsNestedChild({
         ref: this,
         cellKey: this.context.cellKey,
@@ -871,16 +875,19 @@ export default class VirtualizedList extends StateSafePureComponent<
         <ListEmptyComponent />
       )): any);
       cells.push(
-        React.cloneElement(element, {
-          key: '$empty',
-          onLayout: (event: LayoutEvent) => {
-            this._onLayoutEmpty(event);
-            if (element.props.onLayout) {
-              element.props.onLayout(event);
-            }
-          },
-          style: StyleSheet.compose(inversionStyle, element.props.style),
-        }),
+        <VirtualizedListCellContextProvider
+          cellKey={this._getCellKey() + '-empty'}
+          key="$empty">
+          {React.cloneElement(element, {
+            onLayout: (event: LayoutEvent) => {
+              this._onLayoutEmpty(event);
+              if (element.props.onLayout) {
+                element.props.onLayout(event);
+              }
+            },
+            style: StyleSheet.compose(inversionStyle, element.props.style),
+          })}
+        </VirtualizedListCellContextProvider>,
       );
     }
 

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -245,6 +245,32 @@ describe('VirtualizedList', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('handles nested list in ListEmptyComponent', () => {
+    const ListEmptyComponent = (
+      <VirtualizedList {...baseItemProps(generateItems(1))} />
+    );
+
+    let component;
+
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <VirtualizedList
+          {...baseItemProps([])}
+          ListEmptyComponent={ListEmptyComponent}
+        />,
+      );
+    });
+
+    ReactTestRenderer.act(() => {
+      component.update(
+        <VirtualizedList
+          {...baseItemProps(generateItems(5))}
+          ListEmptyComponent={ListEmptyComponent}
+        />,
+      );
+    });
+  });
+
   it('returns the viewableItems correctly in the onViewableItemsChanged callback after changing the data', () => {
     const ITEM_HEIGHT = 800;
     let data = [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}];