Merge branch 'main' of github.com:flexn-io/create

flexn-io · Jun 1, 2023 · 14fcb7a · 14fcb7a
2 parents babc1e7 + 95fd18c
commit 14fcb7a
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 14 deletions.
diff --git a/packages/app-harness/src/screens/row.tsx b/packages/app-harness/src/screens/row.tsx
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
         // borderColor: 'red',
         // borderWidth: 1,
         marginHorizontal: 5,
-        // marginVertical: Ratio(50),
+        marginVertical: Ratio(50),
         // borderWidth: 2,
         // top: 100,
     },

diff --git a/packages/create/src/components/FlashList/index.native.tv.tsx b/packages/create/src/components/FlashList/index.native.tv.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View as RNView } from 'react-native';
-import { FlashList as FlashListComp, ListRenderItemInfo } from '@flexn/shopify-flash-list';
-
+import { FlashList as FlashListComp, ListRenderItemInfo, CellContainer } from '@flexn/shopify-flash-list';
+import { isPlatformAndroidtv, isPlatformFiretv } from '@rnv/renative';
 import Grid from '../../focusManager/model/grid';
 import List from '../../focusManager/model/list';
 import Row from '../../focusManager/model/row';
-import { FlashListProps } from '../../focusManager/types';
+import { FlashListProps, CellContainerProps } from '../../focusManager/types';
 import useOnLayout from '../../hooks/useOnLayout';
 import useOnRefChange from '../../hooks/useOnRefChange';
+import { useCombinedRefs } from '../../hooks/useCombinedRef';
 import useFocusAwareComponentRegister from '../../hooks/useOnComponentLifeCycle';
 import Event, { EVENT_TYPES } from '../../focusManager/events';
 
@@ -85,6 +86,30 @@ const FlashList = ({
         });
     };
 
+    const ItemContainer = React.forwardRef((props: CellContainerProps, ref: any) => {
+        const target = useCombinedRefs<RNView>({ refs: [ref], model: null });
+
+        useEffect(() => {
+            const eventFocus = Event.subscribe(model, EVENT_TYPES.ON_CELL_CONTAINER_FOCUS, (index) => {
+                if (index === props.index) {
+                    target.current?.setNativeProps({ zIndex: 1 });
+                }
+            });
+            const eventBlur = Event.subscribe(model, EVENT_TYPES.ON_CELL_CONTAINER_BLUR, (index) => {
+                if (index === props.index) {
+                    target.current?.setNativeProps({ zIndex: 0 });
+                }
+            });
+
+            return () => {
+                eventFocus();
+                eventBlur();
+            };
+        }, [props.index]);
+
+        return <CellContainer ref={target} {...props} />;
+    });
+
     return (
         <RNView ref={onRefChange} onLayout={onLayout} style={style}>
             {measured && (
@@ -93,6 +118,7 @@ const FlashList = ({
                     data={data}
                     renderItem={rowRendererWithProps}
                     horizontal={horizontal}
+                    CellRendererComponent={isPlatformAndroidtv || isPlatformFiretv ? ItemContainer : undefined}
                     {...props}
                     overrideProps={{
                         ...scrollViewProps,

diff --git a/packages/create/src/focusManager/events.ts b/packages/create/src/focusManager/events.ts
@@ -7,6 +7,8 @@ export const EVENT_TYPES = {
     ON_UNMOUNT: 'onUnMount',
     ON_LAYOUT: 'onLayout',
     ON_LAYOUT_MEASURE_COMPLETED: 'onLayoutMeasureCompleted',
+    ON_CELL_CONTAINER_FOCUS: 'onCellContainerFocus',
+    ON_CELL_CONTAINER_BLUR: 'onCellContainerBlur',
 };
 
 const events: { [key: string]: { [key: string]: { [key: string]: { [key: string]: (...args: any) => void } } } } = {};

diff --git a/packages/create/src/focusManager/model/view.ts b/packages/create/src/focusManager/model/view.ts
@@ -6,6 +6,8 @@ import Event, { EVENT_TYPES } from '../events';
 import { measureAsync } from '../layoutManager';
 import Row from './row';
 import ViewGroup from './viewGroup';
+import Grid from './grid';
+import List from './list';
 
 class View extends FocusModel {
     private _parentRecyclerView?: Recycler;
@@ -17,9 +19,9 @@ class View extends FocusModel {
     private _verticalContentContainerGap: number;
     private _repeatContext:
         | {
-            focusContext: FocusModel;
-            index: number;
-        }
+              focusContext: FocusModel;
+              index: number;
+          }
         | undefined;
 
     private _onPress?: () => void;
@@ -36,7 +38,7 @@ class View extends FocusModel {
             onPress,
             focusKey,
             hasPreferredFocus,
-            verticalContentContainerGap = 0
+            verticalContentContainerGap = 0,
         } = params;
 
         const id = CoreManager.generateID(8);
@@ -102,6 +104,18 @@ class View extends FocusModel {
 
     // END EVENTS
 
+    public onBlur(): void {
+        const parent = this.getParent();
+
+        if (this._onBlur) {
+            this._onBlur();
+        }
+
+        if (parent instanceof Row || parent instanceof Grid || parent instanceof List) {
+            Event.emit(parent, EVENT_TYPES.ON_CELL_CONTAINER_BLUR, this.getRepeatContext()?.index);
+        }
+    }
+
     public onFocus(): void {
         const parent = this.getParent();
 
@@ -111,6 +125,10 @@ class View extends FocusModel {
         if (parent instanceof Row) {
             parent.setFocusedView(this);
         }
+
+        if (parent instanceof Row || parent instanceof Grid || parent instanceof List) {
+            Event.emit(parent, EVENT_TYPES.ON_CELL_CONTAINER_FOCUS, this.getRepeatContext()?.index);
+        }
     }
 
     public isFocusable(): boolean {
@@ -208,7 +226,7 @@ class View extends FocusModel {
         }
 
         return group || this.getScreen()?.getGroup();
-    };
+    }
 }
 
 export default View;
diff --git a/packages/create/src/focusManager/types.ts b/packages/create/src/focusManager/types.ts
@@ -44,7 +44,7 @@ export type PressableFocusOptions = {
     nextFocusRight?: string | string[];
     nextFocusUp?: string | string[];
     nextFocusDown?: string | string[];
-    group?: string
+    group?: string;
 };
 
 export type ScreenFocusOptions = {
@@ -144,4 +144,8 @@ export interface FlashListProps<Item> extends FLProps<Item> {
     onFocus?: () => void;
 }
 
+export interface CellContainerProps extends ViewProps {
+    index: number;
+}
+
 export type FocusContext = FocusModel;
diff --git a/packages/create/src/hooks/useCombinedRef.ts b/packages/create/src/hooks/useCombinedRef.ts
@@ -1,4 +1,4 @@
-import { useEffect, MutableRefObject, ForwardedRef, LegacyRef } from 'react';
+import { useEffect, MutableRefObject, ForwardedRef } from 'react';
 import FocusModel from '../focusManager/model/FocusModel';
 import useOnRefChange from './useOnRefChange';
 
@@ -8,10 +8,8 @@ export function useCombinedRefs<T = undefined>({
 }: {
     refs: MutableRefObject<T>[] | ForwardedRef<T>[];
     model: FocusModel | null;
-}): MutableRefObject<T> | LegacyRef<T> {
-    // const targetRef = useRef<MutableRefObject<T>>();
+}): MutableRefObject<T> {
     const { targetRef } = useOnRefChange(model);
-    // const targetRef = useRef<MutableRefObject<any>>();
 
     useEffect(() => {
         refs.forEach((ref: any) => {