chore: adding header example on non virtualized list (#52)

bamlab · Jan 31, 2024 · 0240ada · 0240ada
1 parent 7b16ff3
commit 0240ada
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 7 deletions.
diff --git a/packages/example/src/modules/header/assets/rabbitLarge.png b/packages/example/src/modules/header/assets/rabbitLarge.png
diff --git a/packages/example/src/modules/header/view/Header.tsx b/packages/example/src/modules/header/view/Header.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Button } from '../../../design-system/components/Button';
+import { Typography } from '../../../design-system/components/Typography';
+import { SpatialNavigationNode } from 'react-tv-space-navigation';
+import { Spacer } from '../../../design-system/components/Spacer';
+import { Image } from 'react-native';
+import styled from '@emotion/native';
+
+interface HeaderProps {
+  title: string;
+  description: string;
+  verticalSize: number;
+}
+
+const imageSource = require('../assets/rabbitLarge.png');
+
+export const Header = ({ title, description, verticalSize }: HeaderProps) => {
+  return (
+    <SpatialNavigationNode orientation="horizontal">
+      <Container height={verticalSize}>
+        <InformationContainer>
+          <Typography variant="title">{title}</Typography>
+          <Spacer gap={'$6'} />
+          <Descritption variant="body">{description}</Descritption>
+          <ButtonContainer>
+            <Button label="Play random" onSelect={() => console.log('Randomed!')} />
+            <Button label="Add to favorites" onSelect={() => console.log('Favorited!')} />
+          </ButtonContainer>
+        </InformationContainer>
+        <ImageContainer>
+          <ProgramImage source={imageSource} />
+        </ImageContainer>
+      </Container>
+    </SpatialNavigationNode>
+  );
+};
+
+const InformationContainer = styled.View({
+  width: '48%',
+});
+
+const ButtonContainer = styled.View(({ theme }) => ({
+  flexDirection: 'row',
+  gap: theme.spacings.$6,
+}));
+
+const ImageContainer = styled.View({
+  width: '48%',
+});
+
+const Descritption = styled(Typography)({
+  flex: 1,
+});
+
+const Container = styled.View<{ height: number }>(({ height, theme }) => ({
+  height: height,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  padding: theme.spacings.$6,
+}));
+
+const ProgramImage = styled(Image)({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 20,
+});
diff --git a/packages/example/src/pages/NonVirtualizedGridPage.tsx b/packages/example/src/pages/NonVirtualizedGridPage.tsx
@@ -1,4 +1,8 @@
-import { DefaultFocus, SpatialNavigationNode } from 'react-tv-space-navigation';
+import {
+  DefaultFocus,
+  SpatialNavigationNode,
+  SpatialNavigationScrollView,
+} from 'react-tv-space-navigation';
 import { Page } from '../components/Page';
 import '../components/configureRemoteControl';
 import { getPrograms } from '../modules/program/infra/programInfos';
@@ -11,19 +15,30 @@ import { ProgramNode } from '../modules/program/view/ProgramNode';
 import chunk from 'lodash/chunk';
 import { ProgramInfo } from '../modules/program/domain/programInfo';
 import { theme } from '../design-system/theme/theme';
+import { Header } from '../modules/header/view/Header';
 
 const ROW_SIZE = 7;
+const HEADER_SIZE = 400;
 
-const renderProgramsList = (programsList: ProgramInfo[]) => <ProgramRow programs={programsList} />;
+const renderProgramsList = (programsList: ProgramInfo[]) => (
+  <ProgramRow programs={programsList} key={programsList[0].id} />
+);
 
 export const NonVirtualizedGridPage = () => {
   const programsLists = chunk(getPrograms(), ROW_SIZE);
   return (
     <Page>
       <Container>
-        <SpatialNavigationNode alignInGrid>
-          <DefaultFocus>{programsLists.map(renderProgramsList)}</DefaultFocus>
-        </SpatialNavigationNode>
+        <SpatialNavigationScrollView offsetFromStart={HEADER_SIZE + 20}>
+          <Header
+            title="Rabbit Movies"
+            description="Delve into the delightful world of Rabbit Movies, where every film celebrates the charm and whimsy of our favorite fluffy friends. This category is a haven for rabbit lovers, featuring animated escapades and heartwarming family stories starring these adorable creatures."
+            verticalSize={HEADER_SIZE}
+          />
+          <SpatialNavigationNode alignInGrid>
+            <DefaultFocus>{programsLists.map(renderProgramsList)}</DefaultFocus>
+          </SpatialNavigationNode>
+        </SpatialNavigationScrollView>
       </Container>
     </Page>
   );
@@ -51,15 +66,15 @@ const ProgramRow = ({ programs }: { programs: ProgramInfo[] }) => {
 const ListContainer = styled.View(({ theme }) => ({
   flexDirection: 'row',
   flexWrap: 'wrap',
-  justifyContent: 'center',
   gap: theme.spacings.$4,
   padding: theme.spacings.$4,
 }));
 
 const Container = styled.View({
   backgroundColor: theme.colors.background.mainHover,
   margin: 'auto',
+  height: '95%',
+  width: '88%',
   borderRadius: scaledPixels(20),
   padding: scaledPixels(30),
-  alignItems: 'flex-start',
 });