chore: add example of node ref usage

bamlab · Feb 16, 2024 · ffdeb5d · ffdeb5d
1 parent 107ad42
commit ffdeb5d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 23 deletions.
diff --git a/packages/example/src/modules/program/view/ProgramNode.tsx b/packages/example/src/modules/program/view/ProgramNode.tsx
@@ -3,25 +3,39 @@ import { SpatialNavigationNode } from 'react-tv-space-navigation';
 import { ProgramInfo } from '../domain/programInfo';
 import { Program } from './Program';
 import { LongProgram } from './LongProgram';
+import { forwardRef } from 'react';
+import { SpatialNavigationNodeRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
 
 type Props = {
   programInfo: ProgramInfo;
   onSelect?: () => void;
   indexRange?: [number, number];
 };
 
-export const ProgramNode = ({ programInfo, onSelect, indexRange }: Props) => {
-  return (
-    <SpatialNavigationNode isFocusable onSelect={onSelect} indexRange={indexRange}>
-      {({ isFocused }) => <Program isFocused={isFocused} programInfo={programInfo} />}
-    </SpatialNavigationNode>
-  );
-};
+export const ProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
+  ({ programInfo, onSelect, indexRange }: Props, ref) => {
+    return (
+      <SpatialNavigationNode isFocusable onSelect={onSelect} indexRange={indexRange} ref={ref}>
+        {({ isFocused }) => <Program isFocused={isFocused} programInfo={programInfo} />}
+      </SpatialNavigationNode>
+    );
+  },
+);
+ProgramNode.displayName = 'ProgramNode';
 
-export const LongProgramNode = ({ programInfo, onSelect, indexRange }: Props) => {
-  return (
-    <SpatialNavigationNode isFocusable onSelect={onSelect} alignInGrid indexRange={indexRange}>
-      {({ isFocused }) => <LongProgram isFocused={isFocused} programInfo={programInfo} />}
-    </SpatialNavigationNode>
-  );
-};
+export const LongProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
+  ({ programInfo, onSelect, indexRange }: Props, ref) => {
+    return (
+      <SpatialNavigationNode
+        isFocusable
+        onSelect={onSelect}
+        alignInGrid
+        indexRange={indexRange}
+        ref={ref}
+      >
+        {({ isFocused }) => <LongProgram isFocused={isFocused} programInfo={programInfo} />}
+      </SpatialNavigationNode>
+    );
+  },
+);
+LongProgramNode.displayName = 'LongProgramNode';
diff --git a/packages/example/src/pages/GridWithLongNodesPage.tsx b/packages/example/src/pages/GridWithLongNodesPage.tsx
@@ -10,10 +10,16 @@ import styled from '@emotion/native';
 import { scaledPixels } from '../design-system/helpers/scaledPixels';
 import { LongProgramNode, ProgramNode } from '../modules/program/view/ProgramNode';
 import { theme } from '../design-system/theme/theme';
+import { MutableRefObject, forwardRef, useRef } from 'react';
+import { Button } from '../design-system/components/Button';
+import { SpatialNavigationNodeRef } from '../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
 
 const HEADER_SIZE = scaledPixels(400);
 
 export const GridWithLongNodesPage = () => {
+  const firstItemRef = useRef<SpatialNavigationNodeRef>(null);
+  const lastItemRef = useRef<SpatialNavigationNodeRef>(null);
+
   return (
     <Page>
       <CenteringView>
@@ -22,8 +28,9 @@ export const GridWithLongNodesPage = () => {
             <SpatialNavigationNode alignInGrid>
               <DefaultFocus>
                 <>
-                  <FirstRow />
-                  <SecondRow />
+                  <FirstRow ref={firstItemRef} />
+                  <SecondRow ref={lastItemRef} />
+                  <ButtonRow firstItemRef={firstItemRef} lastItemRef={lastItemRef} />
                 </>
               </DefaultFocus>
             </SpatialNavigationNode>
@@ -34,32 +41,56 @@ export const GridWithLongNodesPage = () => {
   );
 };
 
-const FirstRow = () => {
+const FirstRow = forwardRef<SpatialNavigationNodeRef>((_, ref) => {
   return (
     <SpatialNavigationNode orientation="horizontal">
       <ListContainer>
-        <LongProgramNode programInfo={programInfos[0]} indexRange={[0, 1]} />
+        <LongProgramNode programInfo={programInfos[0]} indexRange={[0, 1]} ref={ref} />
         <ProgramNode programInfo={programInfos[1]} indexRange={[2, 2]} />
         <ProgramNode programInfo={programInfos[2]} indexRange={[3, 3]} />
         <LongProgramNode programInfo={programInfos[3]} indexRange={[4, 5]} />
         <ProgramNode programInfo={programInfos[4]} indexRange={[6, 6]} />
       </ListContainer>
     </SpatialNavigationNode>
   );
-};
+});
+FirstRow.displayName = 'FirstRow';
 
-const SecondRow = () => {
+const SecondRow = forwardRef<SpatialNavigationNodeRef>((_, ref) => {
   const programs = programInfos.slice(6, 13);
   return (
     <SpatialNavigationNode orientation="horizontal">
       <ListContainer>
-        {/* <LongProgramNode programInfo={programInfos[0]} indexRange={[0, 1]} /> */}
-        {programs.map((program) => {
-          return <ProgramNode programInfo={program} key={program.id} />;
+        {programs.map((program, index) => {
+          return (
+            <ProgramNode
+              programInfo={program}
+              key={program.id}
+              ref={index === programs.length - 1 ? ref : null}
+            />
+          );
         })}
       </ListContainer>
     </SpatialNavigationNode>
   );
+});
+SecondRow.displayName = 'SecondRow';
+
+const ButtonRow = ({
+  firstItemRef,
+  lastItemRef,
+}: {
+  firstItemRef: MutableRefObject<SpatialNavigationNodeRef>;
+  lastItemRef: MutableRefObject<SpatialNavigationNodeRef>;
+}) => {
+  return (
+    <SpatialNavigationNode orientation="horizontal">
+      <ListContainer>
+        <Button label="Go to first item" onSelect={() => firstItemRef.current.focus()} />
+        <Button label="Go to last item" onSelect={() => lastItemRef.current.focus()} />
+      </ListContainer>
+    </SpatialNavigationNode>
+  );
 };
 
 const ListContainer = styled.View(({ theme }) => ({