refactor: computing all scrollable offsets for virtualized list once

bamlab · Feb 9, 2024 · 8dada49 · 8dada49
1 parent 91d4e6a
commit 8dada49
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 65 deletions.
diff --git a/packages/lib/src/spatial-navigation/components/virtualizedList/VirtualizedList.tsx b/packages/lib/src/spatial-navigation/components/virtualizedList/VirtualizedList.tsx
@@ -9,6 +9,7 @@ import { NodeOrientation } from '../../types/orientation';
 import { typedMemo } from '../../helpers/TypedMemo';
 import { getLastLeftItemIndex, getLastRightItemIndex } from './helpers/getLastItemIndex';
 import { getSizeInPxFromOneItemToAnother } from './helpers/getSizeInPxFromOneItemToAnother';
+import { createScrollOffsetArray } from './helpers/createScrollOffsetArray';
 
 /**
  * @TODO: VirtualizedList should be able to take any data as params.
@@ -170,6 +171,18 @@ export const VirtualizedList = typedMemo(
     const maxPossibleLeftAlignedIndex = getLastLeftItemIndex<T>(data, itemSize, listSizeInPx);
     const maxPossibleRightAlignedIndex = getLastRightItemIndex<T>(data, itemSize, listSizeInPx);
 
+    const scrollOffsetsArray = createScrollOffsetArray({
+      currentlyFocusedItemIndex: currentlyFocusedItemIndex,
+      itemSize: itemSize,
+      nbMaxOfItems: nbMaxOfItems ?? data.length,
+      numberOfItemsVisibleOnScreen: numberOfItemsVisibleOnScreen,
+      scrollBehavior: scrollBehavior,
+      data: data,
+      listSizeInPx: listSizeInPx,
+      maxPossibleLeftAlignedIndex: maxPossibleLeftAlignedIndex,
+      maxPossibleRightAlignedIndex: maxPossibleRightAlignedIndex,
+    });
+
     useOnEndReached({
       numberOfItems: data.length,
       range,
@@ -182,29 +195,15 @@ export const VirtualizedList = typedMemo(
       Platform.OS === 'web'
         ? useWebVirtualizedListAnimation({
             currentlyFocusedItemIndex,
-            itemSizeInPx: itemSize,
             vertical,
-            nbMaxOfItems: nbMaxOfItems ?? data.length,
-            numberOfItemsVisibleOnScreen,
-            scrollBehavior,
             scrollDuration,
-            data,
-            listSizeInPx,
-            maxPossibleLeftAlignedIndex,
-            maxPossibleRightAlignedIndex,
+            scrollOffsetsArray,
           })
         : useVirtualizedListAnimation({
             currentlyFocusedItemIndex,
-            itemSizeInPx: itemSize,
             vertical,
-            nbMaxOfItems: nbMaxOfItems ?? data.length,
-            numberOfItemsVisibleOnScreen,
-            scrollBehavior,
             scrollDuration,
-            data,
-            listSizeInPx,
-            maxPossibleLeftAlignedIndex,
-            maxPossibleRightAlignedIndex,
+            scrollOffsetsArray,
           });
 
     /*

diff --git a/.../lib/src/spatial-navigation/components/virtualizedList/helpers/createScrollOffsetArray.ts b/.../lib/src/spatial-navigation/components/virtualizedList/helpers/createScrollOffsetArray.ts
@@ -0,0 +1,42 @@
+import { ScrollBehavior } from '../VirtualizedList';
+import { computeTranslation } from './computeTranslation';
+
+export const createScrollOffsetArray = <T>({
+  currentlyFocusedItemIndex,
+  itemSize,
+  nbMaxOfItems,
+  numberOfItemsVisibleOnScreen,
+  scrollBehavior,
+  data,
+  listSizeInPx,
+  maxPossibleLeftAlignedIndex,
+  maxPossibleRightAlignedIndex,
+}: {
+  currentlyFocusedItemIndex: number;
+  itemSize: number | ((item: T) => number);
+  nbMaxOfItems: number;
+  numberOfItemsVisibleOnScreen: number;
+  scrollBehavior: ScrollBehavior;
+  data: T[];
+  listSizeInPx: number;
+  maxPossibleLeftAlignedIndex: number;
+  maxPossibleRightAlignedIndex: number;
+}) => {
+  const scrollOffsets = [];
+  for (let i = 0; i < data.length; i++) {
+    scrollOffsets.push(
+      computeTranslation({
+        currentlyFocusedItemIndex: currentlyFocusedItemIndex,
+        itemSizeInPx: itemSize,
+        nbMaxOfItems: nbMaxOfItems ?? data.length,
+        numberOfItemsVisibleOnScreen: numberOfItemsVisibleOnScreen,
+        scrollBehavior: scrollBehavior,
+        data: data,
+        listSizeInPx: listSizeInPx,
+        maxPossibleLeftAlignedIndex: maxPossibleLeftAlignedIndex,
+        maxPossibleRightAlignedIndex: maxPossibleRightAlignedIndex,
+      }),
+    );
+  }
+  return scrollOffsets;
+};
diff --git a/...ib/src/spatial-navigation/components/virtualizedList/hooks/useVirtualizedListAnimation.ts b/...ib/src/spatial-navigation/components/virtualizedList/hooks/useVirtualizedListAnimation.ts
@@ -1,33 +1,15 @@
 import { useEffect, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
 import { TypeVirtualizedListAnimation } from '../../../types/TypeVirtualizedListAnimation';
-import { computeTranslation } from '../helpers/computeTranslation';
 
 export const useVirtualizedListAnimation: TypeVirtualizedListAnimation = ({
   currentlyFocusedItemIndex,
-  itemSizeInPx,
-  nbMaxOfItems,
-  numberOfItemsVisibleOnScreen,
   vertical = false,
-  scrollBehavior,
   scrollDuration,
-  data,
-  listSizeInPx,
-  maxPossibleLeftAlignedIndex,
-  maxPossibleRightAlignedIndex,
+  scrollOffsetsArray,
 }) => {
   const translation = useRef<Animated.Value>(new Animated.Value(0)).current;
-  const newTranslationValue = computeTranslation({
-    currentlyFocusedItemIndex,
-    itemSizeInPx,
-    nbMaxOfItems,
-    numberOfItemsVisibleOnScreen,
-    scrollBehavior,
-    data,
-    listSizeInPx,
-    maxPossibleLeftAlignedIndex,
-    maxPossibleRightAlignedIndex,
-  });
+  const newTranslationValue = scrollOffsetsArray[currentlyFocusedItemIndex];
 
   useEffect(() => {
     Animated.timing(translation, {
@@ -45,29 +27,12 @@ export const useVirtualizedListAnimation: TypeVirtualizedListAnimation = ({
 
 export const useWebVirtualizedListAnimation: TypeVirtualizedListAnimation = ({
   currentlyFocusedItemIndex,
-  itemSizeInPx,
-  nbMaxOfItems,
-  numberOfItemsVisibleOnScreen,
   vertical = false,
-  scrollBehavior,
   scrollDuration,
-  data,
-  listSizeInPx,
-  maxPossibleLeftAlignedIndex,
-  maxPossibleRightAlignedIndex,
+  scrollOffsetsArray,
 }) => {
   const animationDuration = `${scrollDuration}ms`;
-  const newTranslationValue = computeTranslation({
-    currentlyFocusedItemIndex,
-    itemSizeInPx,
-    nbMaxOfItems,
-    numberOfItemsVisibleOnScreen,
-    scrollBehavior,
-    data,
-    listSizeInPx,
-    maxPossibleLeftAlignedIndex,
-    maxPossibleRightAlignedIndex,
-  });
+  const newTranslationValue = scrollOffsetsArray[currentlyFocusedItemIndex];
 
   return {
     transitionDuration: animationDuration,

diff --git a/packages/lib/src/spatial-navigation/types/TypeVirtualizedListAnimation.ts b/packages/lib/src/spatial-navigation/types/TypeVirtualizedListAnimation.ts
@@ -1,16 +1,8 @@
 import { ViewStyle, Animated } from 'react-native';
-import { ScrollBehavior } from '../components/virtualizedList/VirtualizedList';
 
-export type TypeVirtualizedListAnimation = <T>(args: {
+export type TypeVirtualizedListAnimation = (args: {
   currentlyFocusedItemIndex: number;
-  itemSizeInPx: number | ((item: T) => number);
   vertical?: boolean;
-  nbMaxOfItems: number;
-  numberOfItemsVisibleOnScreen: number;
-  scrollBehavior: ScrollBehavior;
   scrollDuration: number;
-  data: T[];
-  listSizeInPx: number;
-  maxPossibleLeftAlignedIndex: number;
-  maxPossibleRightAlignedIndex: number;
+  scrollOffsetsArray: number[];
 }) => Animated.WithAnimatedValue<ViewStyle>;