From f2d1f0b0053ee1de40b265f30593c23d542149bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Thu, 25 Apr 2024 15:04:02 +0200
Subject: [PATCH 1/6] chore: add example of list with variable size

---
 packages/example/App.tsx                      |  3 +
 packages/example/src/components/Menu/Menu.tsx |  1 +
 .../src/modules/program/view/ProgramList.tsx  |  4 +-
 .../src/pages/ListWithVariableSize.tsx        | 61 +++++++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 packages/example/src/pages/ListWithVariableSize.tsx

diff --git a/packages/example/App.tsx b/packages/example/App.tsx
index e84cadd4..92b61bb4 100644
--- a/packages/example/App.tsx
+++ b/packages/example/App.tsx
@@ -17,6 +17,7 @@ import { NonVirtualizedGridPage } from './src/pages/NonVirtualizedGridPage';
 import { GridWithLongNodesPage } from './src/pages/GridWithLongNodesPage';
 import { useTVPanEvent } from './src/components/PanEvent/useTVPanEvent';
 import { SpatialNavigationDeviceTypeProvider } from '../lib/src/spatial-navigation/context/DeviceContext';
+import { ListWithVariableSize } from './src/pages/ListWithVariableSize';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -27,6 +28,7 @@ export type RootTabParamList = {
   ProgramGridPage: undefined;
   NonVirtualizedGridPage: undefined;
   GridWithLongNodesPage: undefined;
+  ListWithVariableSize: undefined;
 };
 
 export type RootStackParamList = {
@@ -54,6 +56,7 @@ const TabNavigator = () => {
         <Tab.Screen name="ProgramGridPage" component={ProgramGridPage} />
         <Tab.Screen name="NonVirtualizedGridPage" component={NonVirtualizedGridPage} />
         <Tab.Screen name="GridWithLongNodesPage" component={GridWithLongNodesPage} />
+        <Tab.Screen name="ListWithVariableSize" component={ListWithVariableSize} />
       </Tab.Navigator>
     </MenuProvider>
   );
diff --git a/packages/example/src/components/Menu/Menu.tsx b/packages/example/src/components/Menu/Menu.tsx
index f5c58874..d4023e31 100644
--- a/packages/example/src/components/Menu/Menu.tsx
+++ b/packages/example/src/components/Menu/Menu.tsx
@@ -58,6 +58,7 @@ const menuItems: Record<keyof RootTabParamList, MenuItems> = {
     label: 'Grid with long nodes',
     icon: 'LayoutDashboard',
   },
+  ListWithVariableSize: { label: 'List with variable size', icon: 'LayoutDashboard' },
 };
 
 export const Menu = ({ state, navigation }: BottomTabBarProps) => {
diff --git a/packages/example/src/modules/program/view/ProgramList.tsx b/packages/example/src/modules/program/view/ProgramList.tsx
index 6c90b8c2..0e1282f3 100644
--- a/packages/example/src/modules/program/view/ProgramList.tsx
+++ b/packages/example/src/modules/program/view/ProgramList.tsx
@@ -25,10 +25,12 @@ export const ProgramList = ({
   orientation,
   containerStyle,
   listRef,
+  data,
 }: {
   orientation?: 'vertical' | 'horizontal';
   containerStyle?: object;
   listRef: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  data?: ProgramInfo[];
 }) => {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
@@ -51,7 +53,7 @@ export const ProgramList = ({
         <Container isActive={isActive} style={containerStyle}>
           <SpatialNavigationVirtualizedList
             orientation={orientation}
-            data={programInfos}
+            data={data ?? programInfos}
             renderItem={renderItem}
             itemSize={theme.sizes.program.portrait.width + 30}
             numberOfRenderedItems={WINDOW_SIZE}
diff --git a/packages/example/src/pages/ListWithVariableSize.tsx b/packages/example/src/pages/ListWithVariableSize.tsx
new file mode 100644
index 00000000..7feb6950
--- /dev/null
+++ b/packages/example/src/pages/ListWithVariableSize.tsx
@@ -0,0 +1,61 @@
+import styled from '@emotion/native';
+import { Page } from '../components/Page';
+import { programInfos } from '../modules/program/infra/programInfos';
+import { SpatialNavigationView } from '../../../lib/src/spatial-navigation/components/View';
+import { scaledPixels } from '../design-system/helpers/scaledPixels';
+import { DefaultFocus } from '../../../lib/src/spatial-navigation/context/DefaultFocusContext';
+import { SpatialNavigationNode } from '../../../lib/src/spatial-navigation/components/Node';
+import { Spacer } from '../design-system/components/Spacer';
+import { Button } from '../design-system/components/Button';
+import { useState } from 'react';
+import { ProgramList } from '../modules/program/view/ProgramList';
+import { useTheme } from '@emotion/react';
+
+const ROW_PADDING = scaledPixels(70);
+
+export const ListWithVariableSize = () => {
+  const theme = useTheme();
+  const [programs, setPrograms] = useState(programInfos.slice(0, 4));
+
+  const addOrRemoveLastItem = () => {
+    if (programs.length === 4) {
+      setPrograms(programInfos.slice(0, 3));
+    } else {
+      setPrograms(programInfos.slice(0, 4));
+    }
+  };
+
+  return (
+    <Page>
+      <DefaultFocus>
+        <Container>
+          <SpatialNavigationNode orientation="horizontal">
+            <ListContainer>
+              <ProgramList
+                data={programs}
+                listRef={null}
+                containerStyle={{ height: theme.sizes.program.portrait.height + ROW_PADDING }}
+              />
+            </ListContainer>
+          </SpatialNavigationNode>
+          <Spacer gap="$6" />
+          <SpatialNavigationView direction="vertical">
+            <Button label="Add/Remove last item" onSelect={addOrRemoveLastItem} />
+          </SpatialNavigationView>
+        </Container>
+      </DefaultFocus>
+    </Page>
+  );
+};
+
+const Container = styled.View({
+  flex: 1,
+  padding: scaledPixels(30),
+});
+
+const ListContainer = styled.View(({ theme }) => ({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: theme.spacings.$4,
+  padding: theme.spacings.$4,
+}));

From 00b0c80cc144d5f5c50d0dfd782d1b32f6cf1f73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Thu, 25 Apr 2024 15:04:25 +0200
Subject: [PATCH 2/6] test: add test for list with variable size

---
 .../src/pages/ListWithVariableSize.test.tsx   | 49 +++++++++++++++++++
 ...igationVirtualizedListWithVirtualNodes.tsx |  5 +-
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 packages/example/src/pages/ListWithVariableSize.test.tsx

diff --git a/packages/example/src/pages/ListWithVariableSize.test.tsx b/packages/example/src/pages/ListWithVariableSize.test.tsx
new file mode 100644
index 00000000..ce3a30fe
--- /dev/null
+++ b/packages/example/src/pages/ListWithVariableSize.test.tsx
@@ -0,0 +1,49 @@
+import { ThemeProvider } from '@emotion/react';
+import { render } from '@testing-library/react-native';
+import { theme } from '../design-system/theme/theme';
+import { ListWithVariableSize } from './ListWithVariableSize';
+import { NavigationContainer } from '@react-navigation/native';
+import '../components/tests/helpers/configureTestRemoteControl';
+import testRemoteControlManager from '../components/tests/helpers/testRemoteControlManager';
+
+const renderWithProviders = (page: JSX.Element) => {
+  return render(
+    <NavigationContainer>
+      <ThemeProvider theme={theme}>{page}</ThemeProvider>
+    </NavigationContainer>,
+  );
+};
+describe('ListWithVariableSize', () => {
+  it('node is still focusable after being removed', () => {
+    const screen = renderWithProviders(<ListWithVariableSize />);
+
+    // Go to last programd and focus it
+    testRemoteControlManager.handleRight();
+    testRemoteControlManager.handleRight();
+    testRemoteControlManager.handleRight();
+    expect(screen.getByLabelText('Program 4')).toBeSelected();
+
+    // Go back to first position
+    testRemoteControlManager.handleLeft();
+    testRemoteControlManager.handleLeft();
+    testRemoteControlManager.handleLeft();
+
+    // Remove last item
+    testRemoteControlManager.handleDown();
+    testRemoteControlManager.handleEnter();
+
+    expect(screen.queryByLabelText('Program 4')).not.toBeOnTheScreen();
+
+    // Add back last item
+    testRemoteControlManager.handleEnter();
+    expect(screen.getByLabelText('Program 4')).toBeOnTheScreen();
+
+    // Focus last item
+    testRemoteControlManager.handleUp();
+    testRemoteControlManager.handleRight();
+    testRemoteControlManager.handleRight();
+    testRemoteControlManager.handleRight();
+
+    expect(screen.getByLabelText('Program 4')).toBeSelected();
+  });
+});
diff --git a/packages/lib/src/spatial-navigation/components/virtualizedList/SpatialNavigationVirtualizedListWithVirtualNodes.tsx b/packages/lib/src/spatial-navigation/components/virtualizedList/SpatialNavigationVirtualizedListWithVirtualNodes.tsx
index 6367d380..3facbb75 100644
--- a/packages/lib/src/spatial-navigation/components/virtualizedList/SpatialNavigationVirtualizedListWithVirtualNodes.tsx
+++ b/packages/lib/src/spatial-navigation/components/virtualizedList/SpatialNavigationVirtualizedListWithVirtualNodes.tsx
@@ -48,9 +48,11 @@ const useRegisterInitialAndUnregisterFinalVirtualNodes = <T,>({
 const useUpdateRegistration = <T,>({
   allItems,
   registerNthVirtualNode,
+  unregisterNthVirtualNode,
 }: {
   allItems: Array<T>;
   registerNthVirtualNode: (index: number) => void;
+  unregisterNthVirtualNode: (index: number) => void;
 }) => {
   const previousAllItems = useRef<Array<T>>();
 
@@ -63,6 +65,7 @@ const useUpdateRegistration = <T,>({
         currentItems: allItems,
         previousItems: previousAllItemsList,
         addVirtualNode: registerNthVirtualNode,
+        removeVirtualNode: unregisterNthVirtualNode,
       });
     }
     previousAllItems.current = allItems;
@@ -109,7 +112,7 @@ const useRegisterVirtualNodes = <T extends ItemWithIndex>({
     unregisterNthVirtualNode,
   });
 
-  useUpdateRegistration({ allItems, registerNthVirtualNode });
+  useUpdateRegistration({ allItems, registerNthVirtualNode, unregisterNthVirtualNode });
 
   return { getNthVirtualNodeID };
 };

From c0f0e3d7a1c2cb2febf2a7406281023e928216a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Mon, 29 Apr 2024 11:03:31 +0200
Subject: [PATCH 3/6] fix: remove error when recreating node

---
 .../updateVirtualNodeRegistration.test.ts      |  2 ++
 .../helpers/updateVirtualNodeRegistration.ts   | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.test.ts b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.test.ts
index 6098fc9c..61065f4f 100644
--- a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.test.ts
+++ b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.test.ts
@@ -11,6 +11,7 @@ describe('updateVirtualNodeRegistration', () => {
       previousItems,
       currentItems,
       addVirtualNode: mockAddNode,
+      removeVirtualNode: jest.fn(),
     });
 
     expect(mockAddNode).toHaveBeenCalledTimes(2);
@@ -24,6 +25,7 @@ describe('updateVirtualNodeRegistration', () => {
       previousItems,
       currentItems,
       addVirtualNode: mockAddNode,
+      removeVirtualNode: jest.fn(),
     });
 
     expect(mockAddNode).not.toHaveBeenCalled();
diff --git a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
index a8769577..3dd6bca7 100644
--- a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
+++ b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
@@ -15,6 +15,20 @@ const registerNewNode = <T>({
   });
 };
 
+const unregisterOldNode = <T>({
+  currentItems,
+  previousItems,
+  removeVirtualNode,
+}: {
+  currentItems: Array<T>;
+  previousItems: Array<T>;
+  removeVirtualNode: (index: number) => void;
+}) => {
+  for (let index = previousItems.length - 1; index > currentItems.length - 1; index--) {
+    removeVirtualNode(index);
+  }
+};
+
 /**
  * This function aims to compare 2 arrays of items : currentItems and previousItems and :
  * - addVirtualNode for every item from currentItems that weren't in previousItems
@@ -26,16 +40,18 @@ export const updateVirtualNodeRegistration = <T>({
   currentItems,
   previousItems,
   addVirtualNode,
+  removeVirtualNode,
 }: {
   currentItems: Array<T>;
   previousItems: Array<T>;
   addVirtualNode: (index: number) => void;
+  removeVirtualNode: (index: number) => void;
 }) => {
   // Step 1 : addVirtualNode for every item from currentItems that weren't in previousItems
   registerNewNode({ currentItems, previousItems, addVirtualNode });
 
   // Step 2 : removeVirtualNode for every from previousItems that aren't there anymore in currentItems
-  // TODO
+  unregisterOldNode({ currentItems, previousItems, removeVirtualNode });
 
   // Step 3 : re-order all the items
   // TODO

From 828e25472c355d1f7fd6429e3bb74a98d9bc7a8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Mon, 29 Apr 2024 11:44:35 +0200
Subject: [PATCH 4/6] doc: remove useless comment

---
 .../virtualizedList/helpers/updateVirtualNodeRegistration.ts   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
index 3dd6bca7..814bb746 100644
--- a/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
+++ b/packages/lib/src/spatial-navigation/components/virtualizedList/helpers/updateVirtualNodeRegistration.ts
@@ -52,7 +52,4 @@ export const updateVirtualNodeRegistration = <T>({
 
   // Step 2 : removeVirtualNode for every from previousItems that aren't there anymore in currentItems
   unregisterOldNode({ currentItems, previousItems, removeVirtualNode });
-
-  // Step 3 : re-order all the items
-  // TODO
 };

From 215193a83c9210459c0b7150687b5ec3d4449682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Leroy?= <remil@bam.tech>
Date: Tue, 30 Apr 2024 12:40:37 +0200
Subject: [PATCH 5/6] chore: remove bad flexWrap in example

---
 packages/example/src/pages/ListWithVariableSize.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/example/src/pages/ListWithVariableSize.tsx b/packages/example/src/pages/ListWithVariableSize.tsx
index 7feb6950..850935b8 100644
--- a/packages/example/src/pages/ListWithVariableSize.tsx
+++ b/packages/example/src/pages/ListWithVariableSize.tsx
@@ -55,7 +55,6 @@ const Container = styled.View({
 
 const ListContainer = styled.View(({ theme }) => ({
   flexDirection: 'row',
-  flexWrap: 'wrap',
   gap: theme.spacings.$4,
   padding: theme.spacings.$4,
 }));

From 2292ce8869346c3fc754301c211a8492013cc922 Mon Sep 17 00:00:00 2001
From: Pierre Poupin <pierrep@bam.tech>
Date: Mon, 6 May 2024 12:29:19 +0200
Subject: [PATCH 6/6] chore(example): add shuffle, add item, remove item
 mechanism

---
 .../src/pages/ListWithVariableSize.test.tsx   |  8 ++++
 .../src/pages/ListWithVariableSize.tsx        | 39 ++++++++++++++-----
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/example/src/pages/ListWithVariableSize.test.tsx b/packages/example/src/pages/ListWithVariableSize.test.tsx
index ce3a30fe..454e6bbb 100644
--- a/packages/example/src/pages/ListWithVariableSize.test.tsx
+++ b/packages/example/src/pages/ListWithVariableSize.test.tsx
@@ -6,6 +6,12 @@ import { NavigationContainer } from '@react-navigation/native';
 import '../components/tests/helpers/configureTestRemoteControl';
 import testRemoteControlManager from '../components/tests/helpers/testRemoteControlManager';
 
+jest.mock('../modules/program/infra/programInfos', () => ({
+  getPrograms: () => {
+    return jest.requireActual('../modules/program/infra/programInfos').programInfos;
+  },
+}));
+
 const renderWithProviders = (page: JSX.Element) => {
   return render(
     <NavigationContainer>
@@ -30,11 +36,13 @@ describe('ListWithVariableSize', () => {
 
     // Remove last item
     testRemoteControlManager.handleDown();
+    testRemoteControlManager.handleDown();
     testRemoteControlManager.handleEnter();
 
     expect(screen.queryByLabelText('Program 4')).not.toBeOnTheScreen();
 
     // Add back last item
+    testRemoteControlManager.handleUp();
     testRemoteControlManager.handleEnter();
     expect(screen.getByLabelText('Program 4')).toBeOnTheScreen();
 
diff --git a/packages/example/src/pages/ListWithVariableSize.tsx b/packages/example/src/pages/ListWithVariableSize.tsx
index 850935b8..e1615885 100644
--- a/packages/example/src/pages/ListWithVariableSize.tsx
+++ b/packages/example/src/pages/ListWithVariableSize.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { Page } from '../components/Page';
-import { programInfos } from '../modules/program/infra/programInfos';
+import { getPrograms } from '../modules/program/infra/programInfos';
 import { SpatialNavigationView } from '../../../lib/src/spatial-navigation/components/View';
 import { scaledPixels } from '../design-system/helpers/scaledPixels';
 import { DefaultFocus } from '../../../lib/src/spatial-navigation/context/DefaultFocusContext';
@@ -13,18 +13,35 @@ import { useTheme } from '@emotion/react';
 
 const ROW_PADDING = scaledPixels(70);
 
+const MAX = 1000;
+
 export const ListWithVariableSize = () => {
   const theme = useTheme();
-  const [programs, setPrograms] = useState(programInfos.slice(0, 4));
-
-  const addOrRemoveLastItem = () => {
-    if (programs.length === 4) {
-      setPrograms(programInfos.slice(0, 3));
-    } else {
-      setPrograms(programInfos.slice(0, 4));
-    }
+  const [programsBase, setProgramsBase] = useState(getPrograms(MAX));
+
+  const [numberOfPrograms, setNumberOfPrograms] = useState(4);
+
+  const addItem = () => {
+    setNumberOfPrograms((prev) => {
+      if (prev === MAX) return prev;
+
+      return prev + 1;
+    });
   };
 
+  const removeItem = () => {
+    setNumberOfPrograms((prev) => {
+      if (prev === 0) return prev;
+      return prev - 1;
+    });
+  };
+
+  const shuffleItems = () => {
+    setProgramsBase((prev) => [...prev].sort(() => Math.random() - 0.5));
+  };
+
+  const programs = programsBase.slice(0, numberOfPrograms);
+
   return (
     <Page>
       <DefaultFocus>
@@ -40,7 +57,9 @@ export const ListWithVariableSize = () => {
           </SpatialNavigationNode>
           <Spacer gap="$6" />
           <SpatialNavigationView direction="vertical">
-            <Button label="Add/Remove last item" onSelect={addOrRemoveLastItem} />
+            <Button label="Add item" onSelect={addItem} />
+            <Button label="Remove item" onSelect={removeItem} />
+            <Button label="Shuffle items" onSelect={shuffleItems} />
           </SpatialNavigationView>
         </Container>
       </DefaultFocus>