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

package/actionsExecutor/ActionExecutorContext.tsx

@@ -11,11 +11,9 @@ import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickB
 import { showConfirmationDialog } from "../alertUtils";
 import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
-import {
-  StorageMultiSelectProvider
-} from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 
-const { log_error, log_debug, log_info } = createLogger({
+const { log_error, log_info } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -110,11 +108,17 @@ const prepareDefaultActions = (actionExecutor) => {
       const tag = entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
-        const multiSelectProvider = StorageMultiSelectProvider.getProvider(keyNamespace);
+        const multiSelectProvider =
+          StorageMultiSelectProvider.getProvider(keyNamespace);
 
         const selectedItems = await multiSelectProvider.getSelectedAsync();
         const isTagInSelectedItems = selectedItems.includes(tag);
-        log_info(`handleAction: localStorageToggleFlag event will ${isTagInSelectedItems ? "remove" : "add"} tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`);
+
+        log_info(
+          `handleAction: localStorageToggleFlag event will ${
+            isTagInSelectedItems ? "remove" : "add"
+          } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+        );
 
         if (selectedItems.includes(tag)) {
           await multiSelectProvider.removeItem(tag);
@@ -122,13 +126,17 @@ const prepareDefaultActions = (actionExecutor) => {
           await multiSelectProvider.addItem(tag);
         }
       } else {
-        log_error("handleAction: localStorageToggleFlag event missing keyNamespace or tag", { keyNamespace, tag });
+        log_error(
+          "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
+          { keyNamespace, tag }
+        );
 
         return ActionResult.Error;
       }
 
       return ActionResult.Success;
-    });
+    }
+  );
 };
 
 export const ActionExecutorContext =

package/analyticsUtils/__tests__/analyticsManager.test.js

@@ -1,18 +1,18 @@
+import * as ReactNative from "react-native";
+
 const mock_postEvent = jest.fn();
 const mock_setPlugins = jest.fn();
 const mock_postTimedEvent = jest.fn();
 const mock_endTimedEvent = jest.fn();
 
-jest.mock("react-native", () => ({
-  NativeModules: {
-    AnalyticsBridge: {
-      postEvent: mock_postEvent,
-      setPlugins: mock_setPlugins,
-      postTimedEvent: mock_postTimedEvent,
-      endTimedEvent: mock_endTimedEvent,
-    },
-  },
-}));
+const AnalyticsBridge = {
+  postEvent: mock_postEvent,
+  setPlugins: mock_setPlugins,
+  postTimedEvent: mock_postTimedEvent,
+  endTimedEvent: mock_endTimedEvent,
+};
+
+ReactNative.NativeModules.AnalyticsBridge = AnalyticsBridge;
 
 const eventName = "event";
 const payload = {};
@@ -26,90 +26,92 @@ function clearAllMocks() {
   mock_endTimedEvent.mockClear();
 }
 
-describe("isValidAnalyticsData", () => {
-  beforeEach(clearAllMocks);
+describe("AnalyticsManager", () => {
+  describe("isValidAnalyticsData", () => {
+    beforeEach(clearAllMocks);
 
-  it("returns false if eventName is not a string", () => {
-    expect(analyticsManager.isValidAnalyticsData(42)).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData({})).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData([])).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData(() => ({}))).toBe(false);
-  });
+    it("returns false if eventName is not a string", () => {
+      expect(analyticsManager.isValidAnalyticsData(42)).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData({})).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData([])).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData(() => ({}))).toBe(false);
+    });
 
-  it("returns false if payload is not an object", () => {
-    expect(analyticsManager.isValidAnalyticsData(eventName, "string")).toBe(
-      false
-    );
+    it("returns false if payload is not an object", () => {
+      expect(analyticsManager.isValidAnalyticsData(eventName, "string")).toBe(
+        false
+      );
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, 42)).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData(eventName, 42)).toBe(false);
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, () => ({}))).toBe(
-      false
-    );
-  });
+      expect(analyticsManager.isValidAnalyticsData(eventName, () => ({}))).toBe(
+        false
+      );
+    });
 
-  it("returns true if eventName is a string and payload is null or an object", () => {
-    expect(analyticsManager.isValidAnalyticsData(eventName)).toBe(true);
+    it("returns true if eventName is a string and payload is null or an object", () => {
+      expect(analyticsManager.isValidAnalyticsData(eventName)).toBe(true);
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, payload)).toBe(
-      true
-    );
+      expect(analyticsManager.isValidAnalyticsData(eventName, payload)).toBe(
+        true
+      );
+    });
   });
-});
 
-describe("postAnalyticEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("postAnalyticEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("calls the postEvent method of the analytic bridge", () => {
-    analyticsManager.postAnalyticEvent(eventName, payload);
-    expect(mock_postEvent).toHaveBeenCalledWith(eventName, payload);
-  });
+    it("calls the postEvent method of the analytic bridge", () => {
+      analyticsManager.postAnalyticEvent(eventName, payload);
+      expect(mock_postEvent).toHaveBeenCalledWith(eventName, payload);
+    });
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.postAnalyticEvent(42);
-    expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.postAnalyticEvent(42);
+      expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    });
   });
-});
 
-describe("providePlugins", () => {
-  beforeEach(clearAllMocks);
+  describe("providePlugins", () => {
+    beforeEach(clearAllMocks);
 
-  it("calls the setPlugins method of the analytic bridge", () => {
-    const plugins = [];
-    const plugin_configurations = {};
-    const callback = jest.fn();
+    it("calls the setPlugins method of the analytic bridge", () => {
+      const plugins = [];
+      const plugin_configurations = {};
+      const callback = jest.fn();
 
-    analyticsManager.providePlugins(plugins, plugin_configurations, callback);
+      analyticsManager.providePlugins(plugins, plugin_configurations, callback);
 
-    expect(mock_setPlugins).toHaveBeenCalledWith(
-      plugins,
-      plugin_configurations,
-      callback
-    );
+      expect(mock_setPlugins).toHaveBeenCalledWith(
+        plugins,
+        plugin_configurations,
+        callback
+      );
+    });
   });
-});
 
-describe("startAnalyticsTimedEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("startAnalyticsTimedEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.startAnalyticsTimedEvent(42);
-    expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.startAnalyticsTimedEvent(42);
+      expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    });
   });
-});
 
-describe("endAnalyticsTimedEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("endAnalyticsTimedEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("emits a time_on_screen event and adds duration to payload", () => {
-    analyticsManager.endAnalyticsTimedEvent(eventName, payload);
-    const newEventName = "time_on_screen";
-    payload.duration = "N/A";
-    expect(mock_postEvent).toHaveBeenCalledWith(newEventName, payload);
-  });
+    it("emits a time_on_screen event and adds duration to payload", () => {
+      analyticsManager.endAnalyticsTimedEvent(eventName, payload);
+      const newEventName = "time_on_screen";
+      payload.duration = "N/A";
+      expect(mock_postEvent).toHaveBeenCalledWith(newEventName, payload);
+    });
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.endAnalyticsTimedEvent(42);
-    expect(mock_postEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.endAnalyticsTimedEvent(42);
+      expect(mock_postEvent).not.toHaveBeenCalled();
+    });
   });
 });

package/analyticsUtils/helpers/hooks.ts

@@ -26,7 +26,7 @@ export const useHookAnalytics = (props): void => {
     if (screenData?.hookPlugin?.module?.runInBackground) {
       sendScreenEvent({ analyticsScreenData });
     }
-  }, [hookPlugin.screen_id]);
+  }, [sendScreenEvent, screenData, hookPlugin.screen_id]);
 };
 
 export const useScreenAnalytics = (props) => {

package/appUtils/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

package/appUtils/focusManager/index.ts

@@ -1,9 +1,20 @@
 import * as R from "ramda";
+import {
+  isNilOrEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode, findPriorityItem } 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");
 
@@ -46,7 +57,7 @@ export const focusManager = (function () {
   let lastFocusedId = null;
   let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = true;
+  let focusAutoEnabled = false;
   const eventHandler = subscriber();
 
   function disableAutomaticFocus() {
@@ -93,7 +104,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(currentFocusable, direction);
+      currentFocusable.blur(direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -219,38 +230,55 @@ export const focusManager = (function () {
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(lastAddedParentNode?: any, fallback?: () => void) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (preferredFocus && preferredFocus.length > 0) {
-      const focusCandidate = preferredFocus[0];
-      const focusableItem = focusCandidate.component;
-
-      if (
-        focusableItem &&
-        !focusableItem.isGroup &&
-        isFocusEnabled(focusableItem)
-      ) {
-        if (initialFocusOnContent) {
-          blur();
-          initialFocusOnContent = false;
-        }
+    if (isNilOrEmpty(preferredFocus)) {
+      fallback?.();
+      return;
+    }
 
-        logger.log({
-          message: "setInitialFocus – currentFocusNode",
-          data: {
-            focusableItem,
-          },
-        });
+    const focusCandidate = preferredFocus[0];
+    const focusableItem = focusCandidate.component;
 
-        currentFocusNode = focusCandidate;
-        focusableItem.willReceiveFocus(focusableItem, null);
-        focusableItem && setFocus(focusCandidate.id, null);
+    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
+    const nextFocusedId = R.path(["props", "id"], focusableItem);
+
+    if (currentFocusedId === nextFocusedId) {
+      // we are going to move focus to the same node(already focused) -> nothing to do
+      return;
+    }
+
+    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 &&
+      !focusableItem.isGroup &&
+      isFocusEnabled(focusableItem)
+    ) {
+      if (initialFocusOnContent) {
+        blur();
+        initialFocusOnContent = false;
       }
+
+      logger.log({
+        message: "setInitialFocus – currentFocusNode",
+        data: {
+          focusableItem,
+        },
+      });
+
+      currentFocusNode = focusCandidate;
+      focusableItem.willReceiveFocus(focusableItem, null);
+      focusableItem && setFocus(focusCandidate.id, null);
     }
   }
 
@@ -323,6 +351,8 @@ 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;
@@ -338,6 +368,8 @@ 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")) {
@@ -354,6 +386,8 @@ 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);
   }
 
@@ -365,6 +399,8 @@ 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) {
@@ -403,6 +439,8 @@ export const focusManager = (function () {
   }
 
   function setupInitialFocus(id: string, focusOnContent?: boolean) {
+    console.log("debug_2", "FM - setupInitialFocus", { id, focusOnContent });
+
     if (focusOnContent) {
       initialFocusOnContent = focusOnContent;
     } else {
@@ -410,6 +448,58 @@ export const focusManager = (function () {
     }
   }
 
+  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
+    }
+  }
+
+  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);
+    }
+  }
+
   /**
    * moves the focus in a provided direction
    * @public
@@ -422,6 +512,13 @@ export const focusManager = (function () {
       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();
 
@@ -518,5 +615,7 @@ export const focusManager = (function () {
     enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
+    setFocusOnMenu,
+    setFocusOnContent,
   };
 })();

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

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,7 +143,49 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
+const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
+
+const positiveOrZero = (value) => value >= 0;
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+// const isAllScreens = all(excludeFromFocusSearching);
+
+const isNavBar = (target) => startsWith("navbar", target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => !isNavBar(n?.target));
+  }
+
+  return nodes;
+};
+
+const toDistance = ({ target, direction, comparisonRect }) => {
+  const componentRect = target.component?.getRect();
+
+  const orientationDistance = measureDistance(
+    direction,
+    comparisonRect,
+    componentRect
+  );
+
+  if (orientationDistance === -1) {
+    // ignores offscreen targets when moving up/down
+    return null;
+  }
+
+  const euclidDistance = measureEuclidianDistanceToCenter(
+    comparisonRect,
+    componentRect
+  );
+
+  return orientationDistance > 0 ? euclidDistance : orientationDistance;
+};
 
 /**
  * Get target in shortest distance in specified direction
@@ -173,43 +215,32 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .map((target) => {
-      const componentRect = target.component?.getRect();
-
-      const distance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      if (distance === -1) {
-        // ignores offscreen targets when moving up/down
-        return null;
-      }
+    .filter((target) => !excludeFromFocusSearching(target))
+    .map((target) => ({
+      distance: toDistance({ target, direction, comparisonRect }),
+      target,
+    }))
+    .filter(({ distance }) => positiveOrZero(distance));
 
-      return {
-        distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
-        target,
-      };
-    })
-    .filter((obj) => obj && obj.distance >= 0);
+  // 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
 
-  return distances && distances.length > 0 ? match.target : null;
-}
-
-function ignoreMenuIfMultipleTargets(nodes) {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => n?.target?.id !== "navbar");
-  }
-
-  return nodes;
+  // console.log("debug_2", "FM getTargetInDirection", {
+  //   direction: direction?.value,
+  //   currentNode,
+  //   targetNodes,
+  //   targets,
+  //   comparisonRect,
+  //   distances,
+  //   match,
+  // });
+
+  return match?.target;
 }
 
 /**
@@ -300,3 +331,36 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
+
+export const getNodeBeforeRoot = (node) => {
+  if (isNil(node)) {
+    return undefined;
+  }
+
+  if (node.parent.id === "root") {
+    return 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;
+  // }
+
+  // return false;
+};