@applicaster/zapp-react-native-utils 12.0.0-alpha.5208030571 → 12.0.0-alpha.5230293331

package/appUtils/accessibilityManager/logger.ts

@@ -0,0 +1,5 @@
+import { utilsLogger } from "../../logger";
+
+export const accessibilityManagerLogger = utilsLogger.addSubsystem(
+  "accessibilityManager"
+);

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

@@ -3,9 +3,7 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
-  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
-  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -23,6 +21,7 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
+  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -30,11 +29,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
+  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
-  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

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

@@ -14,10 +14,8 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("enableAutomaticFocus should not block setting focus", () => {
+  it("manages to land initial focus", () => {
     const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -31,31 +29,13 @@ describe("focusManager", () => {
       },
     });
 
+    const { success } = focusManager.setInitialFocus();
+
+    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
-  it("enableAutomaticFocus should block setting focus", () => {
-    const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.disableAutomaticFocus();
-
-    focusManager.register({
-      id: "1",
-      component: {
-        setFocus: mockSetFocus,
-        willReceiveFocus: function () {},
-        isMounted: function () {
-          return true;
-        },
-        props: { groupId: "121" },
-      },
-    });
-
-    expect(mockSetFocus).toBeCalledTimes(0);
-    expect(mockSetFocus).not.toBeCalledWith(null);
-  });
-
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

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

@@ -18,7 +18,6 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
-      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -27,10 +26,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
-      "disableAutomaticFocus",
-      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
+      "recoverFocus",
+      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -5,17 +5,14 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { Tree } from "./treeDataStructure/Tree";
-import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
+import {
+  findFocusableNode,
+  findPriorityItem,
+  haveSameParentBeforeRoot,
+} from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
-import {
-  waitForActiveScreen,
-  waitForContent,
-  getContentNode,
-  getActiveScreen,
-} from "./utils";
-
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -55,21 +52,9 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
-  let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = false;
   const eventHandler = subscriber();
 
-  function disableAutomaticFocus() {
-    logger.log({ message: "disableAutomaticFocus" });
-    focusAutoEnabled = false;
-  }
-
-  function enableAutomaticFocus() {
-    logger.log({ message: "focusManager: enableAutomaticFocus" });
-    focusAutoEnabled = true;
-  }
-
   function enableFocus() {
     focusDisabled = false;
   }
@@ -230,7 +215,7 @@ export const focusManager = (function () {
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any, fallback?: () => void) {
+  function setInitialFocus(lastAddedParentNode?: any) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -238,8 +223,7 @@ export const focusManager = (function () {
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
     if (isNilOrEmpty(preferredFocus)) {
-      fallback?.();
-      return;
+      return { success: false };
     }
 
     const focusCandidate = preferredFocus[0];
@@ -248,15 +232,18 @@ export const focusManager = (function () {
     const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
     const nextFocusedId = R.path(["props", "id"], focusableItem);
 
-    if (currentFocusedId === nextFocusedId) {
+    if (
+      isNotNil(currentFocusedId) &&
+      isNotNil(nextFocusedId) &&
+      currentFocusedId === nextFocusedId
+    ) {
       // we are going to move focus to the same node(already focused) -> nothing to do
-      return;
+      return { success: true };
     }
 
-    if (preferredFocus.length === 1 && focusableItem && focusableItem.isGroup) {
-      // we've found only one FocusableGroup as a candidate to focus, try to use fallback
-      fallback?.();
-      return;
+    if (focusableItem?.isGroup) {
+      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
+      return { success: false };
     }
 
     if (
@@ -264,10 +251,7 @@ export const focusManager = (function () {
       !focusableItem.isGroup &&
       isFocusEnabled(focusableItem)
     ) {
-      if (initialFocusOnContent) {
-        blur();
-        initialFocusOnContent = false;
-      }
+      blur();
 
       logger.log({
         message: "setInitialFocus – currentFocusNode",
@@ -279,7 +263,11 @@ export const focusManager = (function () {
       currentFocusNode = focusCandidate;
       focusableItem.willReceiveFocus(focusableItem, null);
       focusableItem && setFocus(focusCandidate.id, null);
+
+      return { success: true };
     }
+
+    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -289,17 +277,8 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
-        initialFocusOnContent,
       },
     });
-
-    if ((val && !currentFocusNode) || initialFocusOnContent) {
-      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
-
-      if (focusAutoEnabled) {
-        setInitialFocus(initialFocusOnContent ? node : undefined);
-      }
-    }
   }
 
   /**
@@ -351,8 +330,6 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerGroup(id, component) {
-    // console.log("debug_2", "FM registerGroup", { id, component });
-
     focusableTree.addNode({ id, component });
 
     return component;
@@ -368,8 +345,6 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerItem(id, component) {
-    // console.log("debug_2", "FM registerItem", { id, component });
-
     focusableTree.addNode({ id, component });
 
     if (!currentFocusNode && id === lastFocusedId && !id.includes("menu")) {
@@ -386,8 +361,6 @@ export const focusManager = (function () {
    * @param {String} id of the group to unregister
    */
   function unregisterGroup(id) {
-    // console.log("debug_2", "FM unregisterGroup", { id });
-
     focusableTree.findAndRemoveNode(id);
   }
 
@@ -399,8 +372,6 @@ export const focusManager = (function () {
    * @param {String} id of the Focusable to unregister
    */
   function unregisterItem(id) {
-    // console.log("debug_2", "FM unregisterItem", { id });
-
     focusableTree.findAndRemoveNode(id);
 
     if (currentFocusNode && currentFocusNode.id === id) {
@@ -438,65 +409,21 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    console.log("debug_2", "FM - setupInitialFocus", { id, focusOnContent });
+  function isCurrentFocusOnTheTopScreen() {
+    const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (focusOnContent) {
-      initialFocusOnContent = focusOnContent;
-    } else {
-      setFocus(id);
+    if (routes.length <= 1) {
+      // there is only one or zero routes
+      return true;
     }
-  }
-
-  async function setFocusOnMenu(currentRoute: string) {
-    try {
-      await waitForActiveScreen(currentRoute, focusableTree);
-
-      const navbar = R.find(
-        (child) => R.startsWith("navbar", child.id),
-        getActiveScreen(focusableTree).children
-      );
 
-      const selectedMenuItemId = R.find(
-        (child) => child.component.props.selected,
-        navbar?.children || []
-      )?.id;
-
-      if (selectedMenuItemId) {
-        // set focus on selected menu item
-        setFocus(selectedMenuItemId);
-        return;
-      }
-
-      const firstMenuItemId = R.path(["children", 0, "id"], navbar);
-
-      if (firstMenuItemId) {
-        // set focus on first menu item
-        setFocus(firstMenuItemId);
-      }
-    } catch (error) {
-      // failed to put focus on top-menu => log it
-    }
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  async function setFocusOnContent(currentRoute: string) {
-    // we need to put focus on content here
-    // For doing it we have to wait registration of first focusable node into focusableTree
-    // this is the temporary hack with waiting until content node starts having children
-    try {
-      await waitForActiveScreen(currentRoute, focusableTree);
-      await waitForContent(focusableTree);
-
-      const content = getContentNode(focusableTree);
-
-      const fallback = () => {
-        throw Error("Failed to land focus on content");
-      };
-
-      setInitialFocus(content, fallback);
-    } catch (e) {
-      // we've failed to put initial focus on content, put focus on menu as a last chance
-      setFocusOnMenu(currentRoute);
+  function recoverFocus() {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We've failed to set focused node on the new screen => run focus recovery
+      setInitialFocus();
     }
   }
 
@@ -506,19 +433,17 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We are opening new screen. We need to ignore movement of focus.
+      return false;
+    }
+
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
       currentFocusNode.component.willLoseFocus(currentFocusNode, direction);
       const nextFocusable = findFocusableNode(direction, currentFocusNode);
 
-      // console.log("debug_2", "FM moveFocus", {
-      //   direction: direction?.value,
-      //   currentFocusNode,
-      //   focusableTree,
-      //   nextFocusable,
-      // });
-
       if (nextFocusable?.component?.isMounted?.()) {
         const nextRect = nextFocusable.component.getRect();
 
@@ -541,8 +466,6 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
-    } else {
-      setInitialFocus();
     }
   }
 
@@ -602,7 +525,6 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
-    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -611,11 +533,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
-    disableAutomaticFocus,
-    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
-    setFocusOnMenu,
-    setFocusOnContent,
+    recoverFocus,
+    isCurrentFocusOnTheTopScreen,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,5 +1,7 @@
 import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { QUICK_BRICK_NAVBAR } from "@applicaster/quick-brick-core/const";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -145,7 +147,7 @@ const hasComponent = (target) => !!target?.component;
 
 const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
 
-const positiveOrZero = (value) => value >= 0;
+const positiveOrZero = (value) => value > 0 || isZero(value);
 
 const excludeFromFocusSearching = pathOr(false, [
   "component",
@@ -153,12 +155,10 @@ const excludeFromFocusSearching = pathOr(false, [
   "excludeFromFocusSearching",
 ]);
 
-// const isAllScreens = all(excludeFromFocusSearching);
-
-const isNavBar = (target) => startsWith("navbar", target?.id);
+const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
 
 const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+  if (nodes.length > 1) {
     return nodes.filter((n) => !isNavBar(n?.target));
   }
 
@@ -206,7 +206,7 @@ export function getTargetInDirection(
   const overrideTarget = currentNode?.component?.props[overridePropName];
 
   if (overrideTarget) {
-    const target = targetNodes.find((n) => n.id === overrideTarget);
+    const target = targetNodes.find((n) => n?.id === overrideTarget);
 
     if (target) return target;
   }
@@ -222,24 +222,10 @@ export function getTargetInDirection(
     }))
     .filter(({ distance }) => positiveOrZero(distance));
 
-  // if (isAllScreens(targets)) {
-  //   return last(targets);
-  // }
-
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  // console.log("debug_2", "FM getTargetInDirection", {
-  //   direction: direction?.value,
-  //   currentNode,
-  //   targetNodes,
-  //   targets,
-  //   comparisonRect,
-  //   distances,
-  //   match,
-  // });
-
   return match?.target;
 }
 
@@ -337,6 +323,10 @@ export const getNodeBeforeRoot = (node) => {
     return undefined;
   }
 
+  if (isNil(node.parent)) {
+    return undefined;
+  }
+
   if (node.parent.id === "root") {
     return node;
   }
@@ -344,23 +334,9 @@ export const getNodeBeforeRoot = (node) => {
   return getNodeBeforeRoot(node.parent);
 };
 
-export const isAllowedToMoveTo = (currentNode, nextNode) => {
-  const screenForCurrentNode = getNodeBeforeRoot(currentNode);
-  const screenForNextNode = getNodeBeforeRoot(nextNode);
-
-  return screenForCurrentNode.id === screenForNextNode.id;
-
-  // console.log("debug_2", "isAllowedToMoveTo", {
-  //   nodeBeforeRoot,
-  // });
-
-  // if (nodeBeforeRoot?.id === "navbar") {
-  //   return true;
-  // }
-
-  // if (nodeBeforeRoot?.component?.props?.isActive) {
-  //   return true;
-  // }
+export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
+  const routeForCurrentNode = getNodeBeforeRoot(currentNode);
+  const routeForNextNode = getNodeBeforeRoot(nextNode);
 
-  // return false;
+  return routeForCurrentNode?.id === routeForNextNode?.id;
 };

package/appUtils/focusManager/utils/index.ts

@@ -1,9 +1,13 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith } from "ramda";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
 // run this check too often could lead to performance penalty on low-end devices
-const HOW_OFTEN_TO_CHECK_CONDITION = 300; //ms
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
 
 type Props = {
   maxTimeout: number;
@@ -12,16 +16,29 @@ type Props = {
 
 export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
   let interval;
+  let timeout;
+
   return new Promise((resolve, reject) => {
+    // run interval check
     interval = setInterval(() => {
       if (conditionFn()) {
         clearInterval(interval);
+        clearTimeout(timeout);
+
         resolve(undefined);
       }
     }, HOW_OFTEN_TO_CHECK_CONDITION);
 
-    setTimeout(() => {
-      reject();
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
     }, maxTimeout);
   });
 };
@@ -31,35 +48,53 @@ export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
     const routes = focusableTree.root.children;
 
     const route = find((route) => route.id === currentRoute, routes);
+
     return isNotNil(route);
   };
 
   return waitUntil({
-    maxTimeout: 2500, //ms
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
     conditionFn: isActiveScreenAvailableToFocus,
   });
 };
 
-export const getActiveScreen = (focusableTree) => {
-  return last(focusableTree.root.children);
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
 };
 
 export const getContentNode = (focusableTree) => {
   const content = find(
-    (child) => startsWith("content", child.id),
-    getActiveScreen(focusableTree)?.children
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
   );
 
   return content;
 };
 
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
 export const waitForContent = (focusableTree) => {
   const contentHasAnyChildren = (): boolean => {
-    return getContentNode(focusableTree)?.children.length > 0;
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
   };
 
   return waitUntil({
-    maxTimeout: 1000, //ms
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
     conditionFn: contentHasAnyChildren,
   });
 };

package/appUtils/focusManagerAux/index.ts

@@ -0,0 +1,76 @@
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { find, path } from "ramda";
+
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getNavbarNode,
+} from "./utils";
+
+import { coreLogger } from "../../logger";
+
+const logger = coreLogger.addSubsystem("focusManagerAux");
+
+export async function setFocusOnMenu(currentRoute: string) {
+  const { setFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+
+    const navbar = getNavbarNode(focusableTree);
+
+    const selectedMenuItemId = find(
+      (child) => child.component.props.selected,
+      navbar.children
+    )?.id;
+
+    if (selectedMenuItemId) {
+      // set focus on selected menu item
+      setFocus(selectedMenuItemId);
+
+      return;
+    }
+
+    const firstMenuItemId = path(["children", 0, "id"], navbar);
+
+    if (firstMenuItemId) {
+      // set focus on first menu item
+      setFocus(firstMenuItemId);
+    }
+  } catch (error) {
+    logger.log({
+      message: "setFocusOnMenu – failed to put focus on top-menu",
+      data: {
+        currentRoute,
+        error,
+      },
+    });
+  }
+}
+
+export async function setFocusOnContent(currentRoute: string) {
+  // we need to put focus on content here
+  // 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;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+    await waitForContent(focusableTree);
+
+    const content = getContentNode(focusableTree);
+
+    const { success } = setInitialFocus(content);
+
+    if (!success) {
+      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
+      throw Error(
+        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
+      );
+    }
+  } catch (error) {
+    setFocusOnContent(currentRoute);
+  }
+}