@applicaster/zapp-react-native-utils 13.0.0-alpha.4528460103 → 13.0.0-alpha.4574923605

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -33,6 +33,7 @@ exports[`focusManager should be defined 1`] = `
   "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
+  "resetFocus": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
   "unregister": [Function],

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -1,5 +1,6 @@
 import { focusManager } from "../index.ts";
 import { focusManager as focusManagerIOS } from "../index.ios.ts";
+import { findFirstFocusableItem } from "../utils";
 
 describe("focusManagerIOS", () => {
   it("should be defined", () => {
@@ -8,6 +9,67 @@ describe("focusManagerIOS", () => {
   });
 });
 
+const focusableTree = {
+  root: {
+    children: [
+      {
+        children: [
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/1",
+          },
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/2/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: false,
+                },
+                id: "route/2/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/2",
+          },
+        ],
+        component: {
+          isGroup: true,
+        },
+        id: "/river/1234",
+      },
+    ],
+    component: null,
+    id: "root",
+  },
+};
+
 describe("focusManager", () => {
   it("should be defined", () => {
     expect(focusManager).toBeDefined();
@@ -45,4 +107,24 @@ describe("focusManager", () => {
   it("placeholder test", () => {
     expect(true).toBe(true);
   });
+
+  it("findFirstFocusableItem returns focusableItem", () => {
+    const expectedItemId =
+      focusableTree.root.children[0].children[1].children[1].id;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(
+      focusableItem !== undefined && expectedItemId === focusableItem.id
+    ).toBe(true);
+  });
+
+  it("findFirstFocusableItem does not return focusableItem", () => {
+    focusableTree.root.children[0].children[1].children[1].component.isGroup =
+      true;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(focusableItem === undefined).toBe(true);
+  });
 });

package/appUtils/focusManager/__tests__/index.test.ts

@@ -30,6 +30,7 @@ describe("focusManager", () => {
       "isGroupItemFocused",
       "recoverFocus",
       "isCurrentFocusOnTheTopScreen",
+      "resetFocus",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -13,6 +13,7 @@ import {
 import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
+import { findFirstFocusableItem } from "./utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
 
@@ -492,20 +493,29 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  function recoverFocus() {
+  function resetFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
-      // We've failed to set focused node on the new screen => run focus recovery
+      // We've failed to set focused node on the new screen => run focus reset
       setInitialFocus();
     }
   }
 
+  /**
+   * sets the focus on first focusable item
+   * @public
+   */
+  function recoverFocus() {
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+    focusableItem && setFocus(focusableItem.id);
+  }
+
   /**
    * moves the focus in a provided direction
    * @public
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (!isCurrentFocusOnTheTopScreen()) {
+    if (!isCurrentFocusOnTheTopScreen() && currentFocusNode) {
       // We are opening new screen. We need to ignore movement of focus.
       return false;
     }
@@ -528,6 +538,8 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
+    } else {
+      recoverFocus();
     }
   }
 
@@ -572,5 +584,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    resetFocus,
   };
 })();

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,17 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findFirstFocusableItem = (items) => {
+  for (const item of items) {
+    if (!item.component.isGroup) {
+      return item;
+    } else {
+      if (item.children) {
+        const focusableItem = findFirstFocusableItem(item.children);
+
+        if (focusableItem) return focusableItem;
+      }
+    }
+  }
+};

package/appUtils/focusManagerAux/index.ts

@@ -54,7 +54,7 @@ export async function setFocusOnContent(currentRoute: string) {
   // For doing it we have to wait registration of first focusable node into focusableTree
   // we wait until content node starts having children
 
-  const { setInitialFocus, focusableTree } = focusManager;
+  const { setInitialFocus, focusableTree, getCurrentFocus } = focusManager;
 
   try {
     await waitForActiveScreen(currentRoute, focusableTree);
@@ -71,6 +71,6 @@ export async function setFocusOnContent(currentRoute: string) {
       );
     }
   } catch (error) {
-    setFocusOnContent(currentRoute);
+    !getCurrentFocus() && setFocusOnContent(currentRoute);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.4528460103",
+  "version": "13.0.0-alpha.4574923605",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.4528460103",
+    "@applicaster/applicaster-types": "13.0.0-alpha.4574923605",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -121,10 +123,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +158,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +256,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );