chore: refactor example components (#150)

* chore(example): remove duplicated component

* chore(example): remove dead props

* chore(example): add missing memo

* chore(example): refactor duplicate Program and ProgramLandscape components into one

* chore(example): refactor duplicate ProgramList

Author: Pierre Poupin

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

@@ -9,6 +9,7 @@ type ProgramProps = {
   isFocused?: boolean;
   programInfo: ProgramInfo;
   label?: string;
+  variant?: 'portrait' | 'landscape';
 };
 
 const Label = React.memo(({ label }: { label: string }) => {
@@ -17,33 +18,41 @@ const Label = React.memo(({ label }: { label: string }) => {
 Label.displayName = 'Label';
 
 export const Program = React.memo(
-  React.forwardRef<View, ProgramProps>(({ isFocused = false, programInfo, label }, ref) => {
-    const imageSource = programInfo.image;
+  React.forwardRef<View, ProgramProps>(
+    ({ isFocused = false, programInfo, label, variant = 'portrait' }, ref) => {
+      const imageSource = programInfo.image;
+      const scaleAnimation = useFocusAnimation(isFocused);
 
-    const scaleAnimation = useFocusAnimation(isFocused);
-
-    return (
-      <ProgramContainer
-        style={scaleAnimation} // Apply the animated scale transform
-        ref={ref}
-        isFocused={isFocused}
-      >
-        <ProgramImage source={imageSource} accessible />
-        {label ? (
-          <Overlay>
-            <Label label={label} />
-          </Overlay>
-        ) : null}
-      </ProgramContainer>
-    );
-  }),
+      return (
+        <ProgramContainer
+          style={scaleAnimation} // Apply the animated scale transform
+          ref={ref}
+          isFocused={isFocused}
+          variant={variant}
+        >
+          <ProgramImage source={imageSource} accessible />
+          {label ? (
+            <Overlay>
+              <Label label={label} />
+            </Overlay>
+          ) : null}
+        </ProgramContainer>
+      );
+    },
+  ),
 );
 
 Program.displayName = 'Program';
 
-const ProgramContainer = styled(Animated.View)<{ isFocused: boolean }>(({ isFocused, theme }) => ({
-  height: theme.sizes.program.portrait.height,
-  width: theme.sizes.program.portrait.width,
+const ProgramContainer = styled(Animated.View)<{
+  isFocused: boolean;
+  variant: 'portrait' | 'landscape';
+}>(({ isFocused, variant, theme }) => ({
+  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.portrait.width,
   overflow: 'hidden',
   borderRadius: 20,
   borderColor: isFocused ? theme.colors.primary.light : 'transparent',

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

@@ -21,42 +21,61 @@ const NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN = 7;
 const WINDOW_SIZE = NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN + 8;
 const ROW_PADDING = scaledPixels(70);
 
+type ProgramListProps = {
+  orientation?: 'vertical' | 'horizontal';
+  containerStyle?: object;
+  listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  data?: ProgramInfo[];
+  variant?: 'normal' | 'variable-size';
+};
+
 export const ProgramList = ({
-  orientation,
+  orientation = 'horizontal',
   containerStyle,
   listRef,
   data,
-}: {
-  orientation?: 'vertical' | 'horizontal';
-  containerStyle?: object;
-  listRef: MutableRefObject<SpatialNavigationVirtualizedListRef>;
-  data?: ProgramInfo[];
-}) => {
+  variant = 'normal',
+}: 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
         programInfo={item}
         onSelect={() => navigation.push('ProgramDetail', { programInfo: item })}
         label={index.toString()}
+        variant={variant === 'variable-size' && isItemLarge(item) ? 'landscape' : 'portrait'}
       />
     ),
-    [navigation],
+    [navigation, isItemLarge, variant],
   );
-  const theme = useTheme();
 
-  const programInfos = useMemo(() => getPrograms(1000), []);
+  const programInfos = useMemo(
+    () => data ?? getPrograms(variant === 'variable-size' ? 10 : 1000),
+    [data, variant],
+  );
 
   return (
     <SpatialNavigationNode>
       {({ isActive }) => (
         <Container isActive={isActive} style={containerStyle}>
           <SpatialNavigationVirtualizedList
             orientation={orientation}
-            data={data ?? programInfos}
+            data={programInfos}
             renderItem={renderItem}
-            itemSize={theme.sizes.program.portrait.width + 30}
+            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"
+            }
             numberOfRenderedItems={WINDOW_SIZE}
             numberOfItemsVisibleOnScreen={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
             onEndReachedThresholdItemsNumber={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
@@ -75,9 +94,11 @@ export const ProgramList = ({
 export const ProgramsRow = ({
   containerStyle,
   listRef,
+  variant = 'normal',
 }: {
   containerStyle?: object;
-  listRef: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  variant?: 'normal' | 'variable-size';
 }) => {
   const theme = useTheme();
   return (
@@ -87,6 +108,7 @@ export const ProgramsRow = ({
         height: theme.sizes.program.portrait.height + ROW_PADDING,
       }}
       listRef={listRef}
+      variant={variant}
     />
   );
 };