@applicaster/zapp-react-native-utils 14.0.0-rc.28 → 14.0.0-rc.29

package/focusManager/FocusManager.ts

@@ -176,18 +176,30 @@ class FocusManager {
     }
   }
 
-  registerFocusable(
-    component: FocusManager.TouchableReactRef,
-    parentFocusable: FocusManager.TouchableReactRef,
-    isFocusableCell: boolean
-  ) {
-    const focusableId = getFocusableId(component);
+  registerFocusable({
+    touchableRef,
+    parentFocusableRef,
+    isFocusableCell,
+    parentFocusableId,
+  }: {
+    touchableRef: FocusManager.TouchableReactRef;
+    parentFocusableRef: FocusManager.TouchableReactRef;
+    isFocusableCell: boolean;
+    parentFocusableId: string;
+  }) {
+    const focusableId = getFocusableId(touchableRef);
+
     const focusableComponent = FocusManager.findFocusable(focusableId);
 
-    if (!focusableComponent && component) {
-      this.focusableComponents.push(component);
+    if (!focusableComponent && touchableRef) {
+      this.focusableComponents.push(touchableRef);
 
-      this.tree.add(component, parentFocusable, isFocusableCell);
+      this.tree.add(
+        touchableRef,
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId
+      );
     } else {
       logger.warning("Focusable component already registered", {
         id: focusableId,
@@ -267,7 +279,7 @@ class FocusManager {
 
       if (nextFocus) {
         // HACK: hack to fix the hack below
-        // HACK: putting call to the end of the event loop so the next component has a chane to be registered
+        // HACK: putting call to the end of the event loop so the next component has a chance to be registered
         setTimeout(() => {
           FocusManager.instance.setFocus(nextFocus, {
             direction: "down",

package/focusManager/Tree.ts

@@ -8,37 +8,41 @@ export class Tree {
     this.tree = focusManagerTree;
   }
 
-  add(component, parentFocusable, isFocusableCell) {
-    const focusableId = getFocusableId(component);
-    const parentId = getFocusableId(parentFocusable);
+  add(
+    touchableRef: FocusManager.TouchableReactRef,
+    parentFocusableRef: FocusManager.TouchableReactRef,
+    isFocusableCell: boolean,
+    parentFocusableId: string
+  ) {
+    const focusableId = getFocusableId(touchableRef);
+    const parentId = getFocusableId(parentFocusableRef) || parentFocusableId;
     const focusableComponentInTree = this.find(focusableId);
 
     // update node if it already exists
     if (focusableComponentInTree) {
-      focusableComponentInTree.updateNode(component);
+      focusableComponentInTree.updateNode(touchableRef);
     }
 
-    if (parentFocusable?.current) {
-      if (!this.find(parentId)) {
-        this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
-      }
+    if (!this.find(parentId)) {
+      // create temporary node to the root of the tree
+      this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
+    }
 
-      const parentNode = this.find(parentId);
+    const parentNode = this.find(parentId);
 
-      if (parentNode) {
-        if (focusableComponentInTree) {
-          focusableComponentInTree.isFocusableCell = isFocusableCell;
-          focusableComponentInTree.parentId = parentNode.id;
+    if (parentNode) {
+      if (focusableComponentInTree) {
+        focusableComponentInTree.isFocusableCell = isFocusableCell;
+        focusableComponentInTree.parentId = parentNode.id;
 
-          parentNode.addChild(focusableComponentInTree);
+        parentNode.addChild(focusableComponentInTree);
 
-          // remove root object from the list
-          this.tree = this.tree.filter(
-            (node) => node !== focusableComponentInTree
-          );
-        } else {
-          parentNode.addChild(component, focusableId, isFocusableCell);
-        }
+        // remove root object from the list
+        this.tree = this.tree.filter(
+          (node) => node !== focusableComponentInTree
+        );
+      } else {
+        parentNode.addChild(touchableRef, focusableId, isFocusableCell);
       }
     }
   }

package/focusManager/__tests__/FocusManager.test.ts

@@ -1,5 +1,8 @@
 import { focusManager } from "../FocusManager";
 
+const isFocusableCell = true;
+const parentFocusableId = "parentFocusableId";
+
 const group = {
   current: {
     props: {
@@ -62,13 +65,47 @@ jest.useFakeTimers();
 
 describe("FocusManager", () => {
   beforeAll(() => {
-    focusManager.registerFocusable(group, { current: null });
-    focusManager.registerFocusable(child1, group);
-    focusManager.registerFocusable(child2, group);
-    focusManager.registerFocusable(child3, child2);
-
-    focusManager.registerFocusable(child4, child2);
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: group,
+      parentFocusableRef: { current: null },
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child1,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child2,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child3,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child4,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
   });
 
   it("focusManager should be defined", () => {
@@ -199,7 +236,12 @@ describe("FocusManager", () => {
   });
 
   it("focusManager registerFocusable should register", () => {
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
 
     expect(
       focusManager.isFocusableChildOf(child5.current.props.id, child2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-rc.28",
+  "version": "14.0.0-rc.29",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-rc.28",
+    "@applicaster/applicaster-types": "14.0.0-rc.29",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",