add initialFocusIndex to row component

flexn-io · Jan 16, 2024 · c6ad7fd · c6ad7fd
1 parent 5a2b2d6
commit c6ad7fd
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/packages/create/src/components/Pressable/index.tsx b/packages/create/src/components/Pressable/index.tsx
@@ -144,11 +144,13 @@ const View = React.forwardRef<RNView | undefined, PressableProps>(
         }, []);
 
         useEffect(() => {
-            model?.updateEvents?.({
-                onPress,
-                onFocus,
-                onBlur,
-            });
+            if (model && model.getType() === "view") {
+                model?.updateEvents?.({
+                    onPress,
+                    onFocus,
+                    onBlur,
+                });
+            }
         }, [onPress, onFocus, onBlur]);
 
         // In recycled mode we must re-measure on render

diff --git a/packages/create/src/focusManager/model/abstractFocusModel.ts b/packages/create/src/focusManager/model/abstractFocusModel.ts
@@ -193,8 +193,8 @@ export default abstract class FocusModel {
         return this._children;
     }
 
-    public getFirstFocusableChildren(): View | undefined {
-        return this._children.find((ch) => ch.isFocusable()) as View;
+    public getInitialFocusableChildren(index: number): View | undefined {
+        return this._children.find((ch, i) => ch.isFocusable() && index === i) as View;
     }
 
     public getMostBottomChildren(): FocusModel {

diff --git a/packages/create/src/focusManager/model/recycler.ts b/packages/create/src/focusManager/model/recycler.ts
@@ -18,6 +18,7 @@ class RecyclerView extends FocusModel {
     private _isHorizontal: boolean;
     private _focusedIndex: number;
     private _initialRenderIndex: number;
+    private _initialFocusIndex: number;
     private _focusedView: View | null = null;
     private _isScrollingHorizontally: boolean;
     private _isScrollingVertically: boolean;
@@ -40,6 +41,7 @@ class RecyclerView extends FocusModel {
             onFocus,
             onBlur,
             initialRenderIndex = 0,
+            initialFocusIndex = 0,
             autoLayoutSize = 0,
             listHeaderDimensions = { width: 0, height: 0 },
             autoLayoutScaleAnimation = false,
@@ -57,6 +59,7 @@ class RecyclerView extends FocusModel {
         this._forbiddenFocusDirections = forbiddenFocusDirections;
         this._focusedIndex = 0;
         this._initialRenderIndex = initialRenderIndex;
+        this._initialFocusIndex = initialFocusIndex;
         this._isScrollingHorizontally = false;
         this._isScrollingVertically = false;
         this._autoLayoutScaleAnimation = autoLayoutScaleAnimation;
@@ -189,6 +192,11 @@ class RecyclerView extends FocusModel {
         return this._initialRenderIndex;
     }
 
+    public getInitialFocusIndex(): number {
+        return this._initialFocusIndex;
+    }
+
+
     public getFocusedView(): View | null {
         return this._focusedView;
     }

diff --git a/packages/create/src/focusManager/model/row.ts b/packages/create/src/focusManager/model/row.ts
@@ -49,7 +49,7 @@ class Row extends Recycler {
     // END EVENTS
 
     public getLastFocused(): ViewType | null {
-        return this?.getFocusedView() ?? this.getFirstFocusableChildren() ?? null;
+        return this?.getFocusedView() ?? this.getInitialFocusableChildren(this.getInitialFocusIndex()) ?? null;
     }
 
     private getCurrentFocusIndex(): number {

diff --git a/packages/create/src/focusManager/types.ts b/packages/create/src/focusManager/types.ts
@@ -117,6 +117,7 @@ export type RecyclableListFocusOptions = {
     autoLayoutSize?: number;
     listHeaderDimensions?: { width: number; height: number };
     verticalViewportOffset?: number;
+    initialFocusIndex?: number;
 };
 
 type MouseEvents = {