@applicaster/zapp-react-native-utils 14.0.0-rc.50 → 14.0.0-rc.51

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

@@ -6,6 +6,7 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
+  "focusTopNavigation": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -25,6 +26,8 @@ exports[`focusManager should be defined 1`] = `
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isFocusOn": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],

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

@@ -33,7 +33,7 @@ describe("focusManager", () => {
 
     expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
-    expect(mockSetFocus).toBeCalledWith(null);
+    expect(mockSetFocus).toBeCalledWith(null, undefined);
   });
 
   describe("register", () => {});

package/appUtils/focusManager/index.ts

@@ -14,7 +14,14 @@ import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
-import { isCurrentFocusOn } from "../focusManagerAux/utils";
+import {
+  findSelectedTabId,
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  isCurrentFocusOnContent,
+  isCurrentFocusOnMenu,
+  isCurrentFocusOn,
+} from "../focusManagerAux/utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
 
@@ -102,7 +109,7 @@ export const focusManager = (function () {
    * @private
    * @param {Object} direction of the navigation which led to this action
    */
-  function focus(direction) {
+  function focus(direction, context?: FocusManager.FocusContext) {
     const currentFocusable = getCurrentFocus();
 
     if (
@@ -110,7 +117,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.setFocus(direction);
+      currentFocusable.setFocus(direction, context);
     }
   }
 
@@ -207,7 +214,7 @@ export const focusManager = (function () {
    * @param {Array<string>} ids - An array of node IDs to update.
    * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
    */
-  const updateNodeFocus = (ids, action) => {
+  const updateNodeFocus = (ids, action, context: FocusManager.FocusContext) => {
     if (!ids || ids.length === 0) {
       return; // Nothing to do
     }
@@ -224,11 +231,13 @@ export const focusManager = (function () {
 
     // Function to apply the action (focus or blur)
     const applyAction = (node) => {
+      const direction = undefined;
+
       if (node && node.component) {
         if (action === "focus") {
-          node.component.setFocus();
+          node.component.setFocus(direction, context);
         } else if (action === "blur") {
-          node.component.setBlur();
+          node.component.setBlur(direction, context);
         }
       }
     };
@@ -255,7 +264,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the navigation, which led to this focus change
    * to another group or not. defaults to false
    */
-  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    context?: FocusManager.FocusContext
+  ) {
     if (focusDisabled) return false;
 
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
@@ -268,21 +281,65 @@ export const focusManager = (function () {
       );
 
       // Set focus on current node parents and blur on previous node parents
-      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
-      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS, context);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR, context);
 
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    focus(direction);
+    focus(direction, context);
+  }
+
+  function isFocusOnContent() {
+    return isCurrentFocusOnContent(currentFocusNode);
+  }
+
+  function isFocusOnMenu() {
+    return isCurrentFocusOnMenu(currentFocusNode);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  function focusTopNavigation(isTabsScreen: boolean, item: ZappEntry) {
+    const landFocusTo = (id) => {
+      if (id) {
+        // set focus on selected menu item
+        const direction = undefined;
+
+        const context: FocusManager.FocusContext = {
+          source: "back",
+          preserveScroll: true,
+        };
+
+        logger.log({ message: "landFocusTo", data: { id } });
+
+        blur(direction);
+        setFocus(id, direction, context);
+      }
+    };
+
+    if (isTabsScreen && isTabsScreenContentFocused(currentFocusNode)) {
+      const selectedTabId = findSelectedTabId(item);
+
+      // Set focus with back button context to tabs-menu
+      landFocusTo(selectedTabId);
+
+      return;
+    }
+
+    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+    // Set focus with back button context to top-menu
+    landFocusTo(selectedMenuItemId);
   }
 
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(
+    lastAddedParentNode?: any,
+    context?: FocusManager.FocusContext
+  ) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -328,7 +385,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -586,6 +643,9 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
+    focusTopNavigation,
+    isFocusOnContent,
+    isFocusOnMenu,
     isFocusOn,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,16 +1,31 @@
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, pathOr, startsWith } from "ramda";
+import {
+  isNil,
+  last,
+  startsWith,
+  find,
+  pathOr,
+} from "@applicaster/zapp-react-native-utils/utils";
+
 import {
   QUICK_BRICK_CONTENT,
   QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
+import {
+  getFocusableId,
+  SCREEN_PICKER_CONTAINER,
+} from "@applicaster/zapp-react-native-utils/screenPickerUtils";
+
 // 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 isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
 const isRoot = (node) => node?.id === "root";
 
+const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
+
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -51,7 +66,7 @@ export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
 
     const route = find((route) => route.id === currentRoute, routes);
 
-    return isNotNil(route);
+    return !isNil(route);
   };
 
   return waitUntil({
@@ -102,6 +117,76 @@ export const waitForContent = (focusableTree) => {
   });
 };
 
+export const findSelectedTabId = (item: ZappEntry): string => {
+  const selectedTabId = getFocusableId(item.id);
+
+  return selectedTabId;
+};
+
+export const findSelectedMenuId = (focusableTree) => {
+  // Set focus with back button context
+  const navbar = getNavbarNode(focusableTree);
+
+  const selectedMenuItemId = find(
+    (child) => child.component.props.selected,
+    navbar.children
+  )?.id;
+
+  return selectedMenuItemId;
+};
+
+export const isTabsScreenContentFocused = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScrenPicker(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(node.parent);
+};
+
+export const isCurrentFocusOnMenu = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isCurrentFocusOnMenu(node.parent);
+};
+
+export const isCurrentFocusOnContent = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isCurrentFocusOnContent(node.parent);
+};
+
 export const isCurrentFocusOn = (id, node) => {
   if (!node) {
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-rc.50",
+  "version": "14.0.0-rc.51",
   "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.50",
+    "@applicaster/applicaster-types": "14.0.0-rc.51",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/state/index.ts

@@ -1,5 +1,5 @@
 export { useRivers } from "./useRivers";
 
-export { useHomeRiver } from "./useHomeRiver";
+export { useHomeRiver, getHomeRiver } from "./useHomeRiver";
 
 export { ZStoreProvider, useZStore } from "./ZStoreProvider";

package/reactHooks/state/useHomeRiver.ts

@@ -1,8 +1,10 @@
-import * as R from "ramda";
 import { useRivers } from "./useRivers";
 
+export const getHomeRiver = (rivers: Record<string, ZappRiver>) =>
+  Object.values(rivers).find((river: ZappRiver) => river.home);
+
 export const useHomeRiver = () => {
   const rivers = useRivers();
 
-  return R.compose(R.find(R.propEq("home", true)), R.values)(rivers);
+  return getHomeRiver(rivers);
 };

package/screenPickerUtils/index.ts

@@ -0,0 +1,7 @@
+export const getFocusableId = (id) => `PickerItem.${id}`;
+
+export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
+
+export const SCREEN_PICKER_CONTAINER = "ScreenPickerContainer";
+
+export const getScreenPickerId = (id) => `${SCREEN_PICKER_CONTAINER}.${id}`;

package/utils/__tests__/find.test.ts

@@ -0,0 +1,36 @@
+import { find } from "../find";
+
+test("example 1", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 0;
+  const xs = ["1", "2", "2", "3", "4"];
+
+  expect(find(predicate, xs)).toBe("1");
+});
+
+test("example 2", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 0;
+  const xs: string[] = [];
+
+  expect(find(predicate, xs)).toBe(undefined);
+});
+
+test("example 3", () => {
+  const predicate = () => false;
+  const xs = ["1", "2", "2", "3"];
+
+  expect(find(predicate, xs)).toBe(undefined);
+});
+
+test("example 4", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 1;
+  const xs = ["1", "2", "2", "3"];
+
+  expect(find(predicate, xs)).toBe("2");
+});
+
+test("example 5", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 2;
+  const xs = ["1", "2.1", "2", "3", "2", "4"];
+
+  expect(find(predicate, xs)).toBe("2");
+});

package/utils/__tests__/pathOr.test.ts

@@ -0,0 +1,37 @@
+import { pathOr } from "../pathOr";
+
+test("example 1", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "c"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = 1;
+
+  expect(pathOr(defaultValue, path, xs)).toEqual(output);
+});
+
+test("example 2", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = { c: 1 };
+
+  expect(pathOr(defaultValue, path, xs)).toEqual(output);
+});
+
+test("example 3", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "x"];
+  const xs = { a: { b: { c: 1 } } };
+
+  expect(pathOr(defaultValue, path, xs)).toBe(defaultValue);
+});
+
+test("example 4", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "c"];
+  const xs = undefined;
+
+  expect(pathOr(defaultValue, path, xs)).toBe(defaultValue);
+});

package/utils/__tests__/startsWith.test.ts

@@ -0,0 +1,30 @@
+import { startsWith } from "../startsWith";
+
+describe("startsWith", () => {
+  it("returns false when str is null", () => {
+    expect(startsWith("a", null)).toBe(false);
+  });
+
+  it("returns false when str is undefined", () => {
+    expect(startsWith("a", undefined)).toBe(false);
+  });
+
+  it("returns true when string starts with target", () => {
+    expect(startsWith("he", "hello")).toBe(true);
+    expect(startsWith("", "hello")).toBe(true); // empty target always matches
+  });
+
+  it("returns false when string does not start with target", () => {
+    expect(startsWith("yo", "hello")).toBe(false);
+  });
+
+  it("works with single character target", () => {
+    expect(startsWith("h", "hello")).toBe(true);
+    expect(startsWith("x", "hello")).toBe(false);
+  });
+
+  it("is case-sensitive", () => {
+    expect(startsWith("He", "hello")).toBe(false);
+    expect(startsWith("he", "hello")).toBe(true);
+  });
+});

package/utils/find.ts

@@ -0,0 +1,3 @@
+export const find = (predicate, xs) => {
+  return (xs || []).find((x, index) => predicate(x, index));
+};

package/utils/index.ts

@@ -2,6 +2,12 @@ export { chunk } from "./chunk";
 
 export { times } from "./times";
 
+export { startsWith } from "./startsWith";
+
+export { find } from "./find";
+
+export { pathOr } from "./pathOr";
+
 export {
   cloneDeep as clone,
   flatten,

package/utils/pathOr.ts

@@ -0,0 +1,5 @@
+import { get } from "lodash";
+
+export const pathOr = (defaultValue, path, record) => {
+  return get(record, path, defaultValue);
+};

package/utils/startsWith.ts

@@ -0,0 +1,9 @@
+import { isNil } from "lodash";
+
+export const startsWith = (target, str) => {
+  if (isNil(str)) {
+    return false;
+  }
+
+  return str.startsWith(target);
+};