chore: refactor example components part 2 (#151)

* chore(example): fix weird size behaviours

* chore(example): take out isItemLarge function

* chore(example): extract itemSize function

* chore(example): pass list size as props

Author: Pierre Poupin

packages/example/src/design-system/theme/sizes.ts

@@ -2,7 +2,7 @@ import { scaledPixels } from '../helpers/scaledPixels';
 
 export const sizes = {
   program: {
-    landscape: { width: scaledPixels(250), height: scaledPixels(200) },
+    landscape: { width: scaledPixels(450), height: scaledPixels(200) },
     portrait: { width: scaledPixels(200), height: scaledPixels(250) },
     long: { width: scaledPixels(416), height: scaledPixels(250) },
   },

packages/example/src/modules/program/view/Program.tsx

@@ -51,7 +51,7 @@ const ProgramContainer = styled(Animated.View)<{
   height: theme.sizes.program.portrait.height, // Height is the same for both variants
   width:
     variant === 'landscape'
-      ? theme.sizes.program.landscape.width * 2
+      ? theme.sizes.program.landscape.width
       : theme.sizes.program.portrait.width,
   overflow: 'hidden',
   borderRadius: 20,

packages/example/src/modules/program/view/ProgramList.tsx

@@ -21,28 +21,32 @@ const NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN = 7;
 const WINDOW_SIZE = NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN + 8;
 const ROW_PADDING = scaledPixels(70);
 
+const GAP_BETWEEN_ELEMENTS = scaledPixels(30);
+
 type ProgramListProps = {
   orientation?: 'vertical' | 'horizontal';
   containerStyle?: object;
   listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
   data?: ProgramInfo[];
+  listSize?: number;
   variant?: 'normal' | 'variable-size';
 };
 
+const isItemLarge = (item: { id: string }) => {
+  return parseInt(item.id, 10) % 2 === 0; // Arbitrary condition to decide size
+};
+
 export const ProgramList = ({
   orientation = 'horizontal',
   containerStyle,
   listRef,
   data,
   variant = 'normal',
+  listSize = 1000,
 }: ProgramListProps) => {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useTheme();
 
-  const isItemLarge = useCallback((item: ProgramInfo) => {
-    return parseInt(item.id, 10) % 2 === 0; // Arbitrary condition to decide size
-  }, []);
-
   const renderItem = useCallback(
     ({ item, index }: { item: ProgramInfo; index: number }) => (
       <ProgramNode
@@ -52,12 +56,23 @@ export const ProgramList = ({
         variant={variant === 'variable-size' && isItemLarge(item) ? 'landscape' : 'portrait'}
       />
     ),
-    [navigation, isItemLarge, variant],
+    [navigation, variant],
   );
 
-  const programInfos = useMemo(
-    () => data ?? getPrograms(variant === 'variable-size' ? 10 : 1000),
-    [data, variant],
+  const programInfos = useMemo(() => data ?? getPrograms(listSize), [data, listSize]);
+
+  const itemSize = useMemo(
+    () => {
+      if (variant === 'normal') {
+        return theme.sizes.program.portrait.width + GAP_BETWEEN_ELEMENTS;
+      }
+
+      return (item: ProgramInfo) =>
+        isItemLarge(item)
+          ? theme.sizes.program.landscape.width + GAP_BETWEEN_ELEMENTS
+          : theme.sizes.program.portrait.width + GAP_BETWEEN_ELEMENTS;
+    }, // Default item size for "normal"
+    [theme.sizes.program.landscape.width, theme.sizes.program.portrait.width, variant],
   );
 
   return (
@@ -68,14 +83,7 @@ export const ProgramList = ({
             orientation={orientation}
             data={programInfos}
             renderItem={renderItem}
-            itemSize={
-              variant === 'variable-size'
-                ? (item: ProgramInfo) =>
-                    isItemLarge(item)
-                      ? theme.sizes.program.landscape.width * 2 + 45
-                      : theme.sizes.program.portrait.width + 30
-                : theme.sizes.program.portrait.width + 30 // Default item size for "normal"
-            }
+            itemSize={itemSize}
             numberOfRenderedItems={WINDOW_SIZE}
             numberOfItemsVisibleOnScreen={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
             onEndReachedThresholdItemsNumber={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
@@ -95,10 +103,12 @@ export const ProgramsRow = ({
   containerStyle,
   listRef,
   variant = 'normal',
+  listSize,
 }: {
   containerStyle?: object;
   listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
   variant?: 'normal' | 'variable-size';
+  listSize?: number;
 }) => {
   const theme = useTheme();
   return (
@@ -109,6 +119,7 @@ export const ProgramsRow = ({
       }}
       listRef={listRef}
       variant={variant}
+      listSize={listSize}
     />
   );
 };

packages/example/src/modules/program/view/ProgramListWithTitle.tsx

@@ -8,28 +8,29 @@ import { SpatialNavigationVirtualizedListRef } from '../../../../../lib/src/spat
 type Props = {
   title: string;
   listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  listSize?: number;
 };
 
-export const ProgramListWithTitle = ({ title, listRef }: Props) => {
+export const ProgramListWithTitle = ({ title, listRef, listSize }: Props) => {
   return (
     <Box direction="vertical">
       <Typography variant="body" fontWeight="strong">
         {title}
       </Typography>
       <Spacer direction="vertical" gap="$2" />
-      <ProgramsRow listRef={listRef ?? null} />
+      <ProgramsRow listRef={listRef ?? null} listSize={listSize} />
     </Box>
   );
 };
 
-export const ProgramListWithTitleAndVariableSizes = ({ title }: Props) => {
+export const ProgramListWithTitleAndVariableSizes = ({ title, listSize }: Props) => {
   return (
     <Box direction="vertical">
       <Typography variant="body" fontWeight="strong">
         {title}
       </Typography>
       <Spacer direction="vertical" gap="$2" />
-      <ProgramsRow variant="variable-size" />
+      <ProgramsRow variant="variable-size" listSize={listSize} />
     </Box>
   );
 };

packages/example/src/pages/Home.tsx

@@ -35,9 +35,15 @@ export const Home = () => {
             <Spacer gap="$6" />
             <ProgramListWithTitle title="You may also like..." />
             <Spacer gap="$6" />
-            <ProgramListWithTitleAndVariableSizes title="Our selection"></ProgramListWithTitleAndVariableSizes>
+            <ProgramListWithTitleAndVariableSizes
+              listSize={10}
+              title="Our selection"
+            ></ProgramListWithTitleAndVariableSizes>
             <Spacer gap="$6" />
-            <ProgramListWithTitleAndVariableSizes title="Oscar Winners"></ProgramListWithTitleAndVariableSizes>
+            <ProgramListWithTitleAndVariableSizes
+              listSize={100}
+              title="Oscar Winners"
+            ></ProgramListWithTitleAndVariableSizes>
             <Spacer gap="$6" />
             <ProgramListWithTitleAndVariableSizes title="Child section"></ProgramListWithTitleAndVariableSizes>
           </Box>