chore(example): pass list size as props

bamlab · Sep 13, 2024 · 15436a3 · 15436a3
1 parent 4c8b816
commit 15436a3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/packages/example/src/modules/program/view/ProgramList.tsx b/packages/example/src/modules/program/view/ProgramList.tsx
@@ -28,6 +28,7 @@ type ProgramListProps = {
   containerStyle?: object;
   listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
   data?: ProgramInfo[];
+  listSize?: number;
   variant?: 'normal' | 'variable-size';
 };
 
@@ -41,6 +42,7 @@ export const ProgramList = ({
   listRef,
   data,
   variant = 'normal',
+  listSize = 1000,
 }: ProgramListProps) => {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useTheme();
@@ -57,10 +59,7 @@ export const ProgramList = ({
     [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(
     () => {
@@ -104,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 (
@@ -118,6 +119,7 @@ export const ProgramsRow = ({
       }}
       listRef={listRef}
       variant={variant}
+      listSize={listSize}
     />
   );
 };

diff --git a/packages/example/src/modules/program/view/ProgramListWithTitle.tsx b/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>
   );
 };
diff --git a/packages/example/src/pages/Home.tsx b/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>