@applicaster/zapp-react-native-utils 14.0.0-rc.61 → 14.0.0-rc.62

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

@@ -6,7 +6,8 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
-  "focusTopNavigation": [Function],
+  "focusOnSelectedTab": [Function],
+  "focusOnSelectedTopMenuItem": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -29,6 +30,7 @@ exports[`focusManager should be defined 1`] = `
   "isFocusOnContent": [Function],
   "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
+  "isTabsScreenContentFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/events.ts

@@ -9,3 +9,5 @@ export const WILL_LOSE_FOCUS = "willLoseFocus";
 export const BLUR = "blur";
 
 export const HAS_LOST_FOCUS = "hasLostFocus";
+
+export const RESET = "reset";

package/appUtils/focusManager/index.ts

@@ -3,6 +3,7 @@ import {
   isNilOrEmpty,
   isNotNil,
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { getFocusableId } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 import { Tree } from "./treeDataStructure/Tree";
 import {
@@ -15,9 +16,7 @@ import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
 import {
-  findSelectedTabId,
-  findSelectedMenuId,
-  isTabsScreenContentFocused,
+  isTabsScreenOnContentFocused,
   isCurrentFocusOnContent,
   isCurrentFocusOnMenu,
   isCurrentFocusOn,
@@ -300,37 +299,40 @@ export const focusManager = (function () {
     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;
+  function landFocusToWithoutScrolling(id) {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
 
-        const context: FocusManager.FocusContext = {
-          source: "back",
-          preserveScroll: true,
-        };
+      const context: FocusManager.FocusContext = {
+        source: "back",
+        preserveScroll: true,
+      };
 
-        logger.log({ message: "landFocusTo", data: { id } });
+      logger.log({ message: "landFocusTo", data: { id } });
 
-        blur(direction);
-        setFocus(id, direction, context);
-      }
-    };
+      blur(direction);
+      setFocus(id, direction, context);
+    }
+  }
 
-    if (isTabsScreen && isTabsScreenContentFocused(currentFocusNode)) {
-      const selectedTabId = findSelectedTabId(item);
+  function isTabsScreenContentFocused() {
+    return isTabsScreenOnContentFocused(currentFocusNode);
+  }
 
-      // Set focus with back button context to tabs-menu
-      landFocusTo(selectedTabId);
+  function focusOnSelectedTab(item: ZappEntry): void {
+    // Move focus to appropriate top navigation tab with context
+    const selectedTabId = getFocusableId(item.id);
 
-      return;
-    }
+    // Set focus with back button context to tabs-menu
+    landFocusToWithoutScrolling(selectedTabId);
+  }
 
-    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+  function focusOnSelectedTopMenuItem(
+    selectedMenuItemId: Option<string>
+  ): void {
     // Set focus with back button context to top-menu
-    landFocusTo(selectedMenuItemId);
+    landFocusToWithoutScrolling(selectedMenuItemId);
   }
 
   /**
@@ -643,9 +645,11 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
-    focusTopNavigation,
     isFocusOnContent,
     isFocusOnMenu,
     isFocusOn,
+    focusOnSelectedTopMenuItem,
+    focusOnSelectedTab,
+    isTabsScreenContentFocused,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -123,19 +123,7 @@ export const findSelectedTabId = (item: ZappEntry): string => {
   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) => {
+export const isTabsScreenOnContentFocused = (node) => {
   if (isRoot(node)) {
     return false;
   }
@@ -152,7 +140,7 @@ export const isTabsScreenContentFocused = (node) => {
     return true;
   }
 
-  return isTabsScreenContentFocused(node.parent);
+  return isTabsScreenOnContentFocused(node.parent);
 };
 
 export const isCurrentFocusOnMenu = (node) => {

package/focusManager/FocusManager.ts

@@ -2,11 +2,24 @@ import { path } from "ramda";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
 import { logger } from "./logger";
 import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -221,7 +234,8 @@ class FocusManager {
 
   private setNextFocus(
     nextFocus: FocusManager.TouchableReactRef,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     if (nextFocus?.current?.props?.blockFocus) {
       return;
@@ -250,7 +264,7 @@ class FocusManager {
 
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
-      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
+      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {}, context);
     }
   }
 
@@ -291,7 +305,8 @@ class FocusManager {
 
   setFocus(
     newFocus: FocusManager.TouchableReactRef | string,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     // Checks if element is focusable
     const { isFocusable, error } = FocusManager.isFocusable(newFocus);
@@ -316,7 +331,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -351,6 +366,11 @@ class FocusManager {
       FocusManager.instance.focused.onBlur(FocusManager.instance.focused, {});
     }
 
+    // send reset event to some handler to reset their internal state, before real reset happens
+    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.RESET, {
+      focusedId: FocusManager.instance.focusedId,
+    });
+
     FocusManager.instance.setFocusLocal({ current: null });
   }
 
@@ -417,6 +437,60 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_NAVBAR
+    );
+  }
+
+  isFocusOnContent(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_CONTENT
+    );
+  }
+
+  private landFocusToWithoutScrolling = (id) => {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext =
+        contextWithoutScrolling("back");
+
+      logger.log({ message: "landFocusToWithoutScrolling", data: { id } });
+
+      this.setFocus(id, direction, context);
+    }
+  };
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTab(index: number): void {
+    const selectedTabId = findSelectedTabId(this.tree, index);
+
+    // Set focus with back button context to tabs-menu
+    this.landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTopMenuItem(index: number, sectionKey: string): void {
+    const selectedMenuItemId = findSelectedMenuId(this.tree, {
+      index,
+      sectionKey,
+    });
+
+    // Set focus with back button context to top-menu
+    this.landFocusToWithoutScrolling(selectedMenuItemId);
+  }
+
+  isTabsScreenContentFocused(): boolean {
+    return isTabsScreenContentFocused(
+      this.tree,
+      FocusManager.instance.focusedId
+    );
+  }
 }
 
 export const focusManager = FocusManager.getInstance();

package/focusManager/aux/index.ts

@@ -0,0 +1,98 @@
+import { isNil, pathOr } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_NAVBAR_SECTIONS,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => QUICK_BRICK_NAVBAR === node?.id;
+const isContent = (node) => QUICK_BRICK_CONTENT === node?.id;
+
+// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerSelectorContainerId;
+
+export const onRegisterScreenPickerSelectorContainer = (id) => {
+  screenPickerSelectorContainerId = id;
+};
+
+export const onUnregisterScreenPickerSelectorContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerSelectorContainerId === id) {
+    screenPickerSelectorContainerId = undefined;
+  }
+};
+// SCREEN_PICKER_SELECTOR_CONTAINER
+
+// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerContentContainerId;
+
+export const onRegisterScreenPickerContentContainer = (id) => {
+  screenPickerContentContainerId = id;
+};
+
+export const onUnregisterScreenPickerContentContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerContentContainerId === id) {
+    screenPickerContentContainerId = undefined;
+  }
+};
+
+const isScreenPickerContentContainer = (node) =>
+  screenPickerContentContainerId === node?.id;
+
+// SCREEN_PICKER_CONTENT_CONTAINER
+
+export const findSelectedMenuId = (
+  focusableTree,
+  { index, sectionKey }: { index: number; sectionKey: string }
+) => {
+  const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
+
+  return pathOr(
+    undefined,
+    ["children", index, "id"],
+    focusableTree.find(sectionName)
+  );
+};
+
+export const findSelectedTabId = (focusableTree, index: number): string => {
+  const screenSelectorContainerNode = focusableTree.find(
+    screenPickerSelectorContainerId
+  );
+
+  const selectedTabId = screenSelectorContainerNode.children[index]?.id;
+
+  return selectedTabId;
+};
+
+export const isTabsScreenContentFocused = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScreenPickerContentContainer(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(focusableTree, node.parentId);
+};
+
+export const contextWithoutScrolling = (
+  source: FocusManager.FocusContext["source"]
+): FocusManager.FocusContext => {
+  return {
+    source,
+    preserveScroll: true,
+  };
+};

package/focusManager/utils.ts

@@ -4,11 +4,11 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 export const getFocusableId = (ref) => ref?.current?.props.id;
 
-type Direction = "up" | "down" | "left" | "right";
-
 const normalizeDirection = (direction) => direction.toLowerCase();
 
-const checkDirection = (direction: Direction) => {
+const checkDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   invariant(!isNilOrEmpty(direction), "direction should not be empty");
 
   invariant(
@@ -17,19 +17,25 @@ const checkDirection = (direction: Direction) => {
   );
 };
 
-export const toFocusDirection = (direction: Direction) => {
+export const toFocusDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return `nextFocus${capitalize(normalizeDirection(direction))}`;
 };
 
-export const isHorizontalDirection = (direction: Direction) => {
+export const isHorizontalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["left", "right"].includes(normalizeDirection(direction));
 };
 
-export const isVerticalDirection = (direction: Direction) => {
+export const isVerticalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["up", "down"].includes(normalizeDirection(direction));

package/package.json

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

package/playerUtils/getPlayerActionButtons.ts

@@ -13,5 +13,5 @@ export const getPlayerActionButtons = (configuration: any) => {
     return [];
   }
 
-  return take(map(buttonsString.split(","), trim), 2);
+  return take(2, map(buttonsString.split(","), trim));
 };

package/screenPickerUtils/index.ts

@@ -5,3 +5,9 @@ export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
 export const SCREEN_PICKER_CONTAINER = "ScreenPickerContainer";
 
 export const getScreenPickerId = (id) => `${SCREEN_PICKER_CONTAINER}.${id}`;
+
+export const getScreenPickerSelectorContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-selector`;
+
+export const getScreenPickerContentContainerId = (id) =>
+  `${getScreenPickerId(id)}-screen-container`;

package/utils/__tests__/endsWith.test.ts

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

package/utils/__tests__/omit.test.ts

@@ -0,0 +1,19 @@
+import { omit } from "../omit";
+
+test("example 1", () => {
+  const path = ["a", "b", "c"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = {};
+
+  expect(omit(path, record)).toEqual(output);
+});
+
+test("example 2", () => {
+  const path = ["a", "b"];
+  const record = { a: 1, b: 2, c: 3 };
+
+  const output = { c: 3 };
+
+  expect(omit(path, record)).toEqual(output);
+});

package/utils/__tests__/path.test.ts

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

package/utils/__tests__/take.test.ts

@@ -0,0 +1,40 @@
+import { take } from "../take";
+
+describe("take", () => {
+  it("takes n elements from the beginning", () => {
+    expect(take(2, [1, 2, 3])).toEqual([1, 2]);
+  });
+
+  it("returns the whole array if n is larger than length", () => {
+    expect(take(5, [1, 2, 3])).toEqual([1, 2, 3]);
+  });
+
+  it("returns empty array if n is 0", () => {
+    expect(take(0, [1, 2, 3])).toEqual([]);
+  });
+
+  it("returns empty array for empty input array", () => {
+    expect(take(2, [])).toEqual([]);
+  });
+
+  it("returns empty array if n is negative", () => {
+    expect(take(-1, [1, 2, 3])).toEqual([]);
+  });
+
+  it("works with strings in array", () => {
+    expect(take(2, ["a", "b", "c"])).toEqual(["a", "b"]);
+  });
+
+  it("works with objects in array", () => {
+    const arr = [{ id: 1 }, { id: 2 }];
+    expect(take(1, arr)).toEqual([{ id: 1 }]);
+  });
+
+  it("returns empty array if input is not an array", () => {
+    // @ts-expect-error testing non-array input
+    expect(take(2, null)).toEqual([]);
+
+    // @ts-expect-error testing non-array input
+    expect(take(2, undefined)).toEqual([]);
+  });
+});

package/utils/endsWith.ts

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

package/utils/index.ts

@@ -8,6 +8,14 @@ export { find } from "./find";
 
 export { pathOr } from "./pathOr";
 
+export { path } from "./path";
+
+export { omit } from "./omit";
+
+export { endsWith } from "./endsWith";
+
+export { take } from "./take";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -19,10 +27,11 @@ export {
   has,
   flatMap,
   difference,
-  take,
   pick,
   map,
   trim,
   toString,
   last,
+  toLower,
+  isEqual as equals,
 } from "lodash";

package/utils/omit.ts

@@ -0,0 +1,5 @@
+import { omit as Lodash_omit } from "lodash";
+
+export const omit = (path, record) => {
+  return Lodash_omit(record, path);
+};

package/utils/path.ts

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

package/utils/take.ts

@@ -0,0 +1,5 @@
+import { take as Ltake } from "lodash";
+
+export function take<T>(n: number, xs: T[]): T[] {
+  return Ltake(xs, n);
+}