@applicaster/zapp-react-native-utils 15.0.0-rc.66 → 15.0.0-rc.68

package/appUtils/RiverFocusManager/{index.js → index.ts}

@@ -1,11 +1,31 @@
-import * as R from "ramda";
-
-import { focusManager } from "../focusManager";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import { QUICK_BRICK_CONTENT } from "@applicaster/quick-brick-core/const";
+import { isNil, isEmpty } from "@applicaster/zapp-react-native-utils/utils";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 let riverFocusData = {};
 let initialyPresentedScreenFocused = false;
 
 export const riverFocusManager = (function () {
+  /**
+   * Create unique key that will be used for save focused group data inside specific screen
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
+   *
+   */
+  function screenFocusableGroupId({
+    screenId,
+    isInsideContainer,
+  }: {
+    screenId: string;
+    isInsideContainer: Option<boolean>;
+  }) {
+    return `${QUICK_BRICK_CONTENT}-${screenId}${
+      isNil(isInsideContainer) ? "" : "-isInsideContainer"
+    }`;
+  }
+
   function setScreenFocusableData({
     screenFocusableGroupId,
     groupId,
@@ -78,8 +98,8 @@ export const riverFocusManager = (function () {
   }) {
     // Check if screen should be focused
     const shouldFocus =
-      (initialyPresentedScreenFocused === false && R.isEmpty(riverFocusData)) ||
-      R.compose(R.not, R.isNil)(riverFocusData[screenFocusableGroupId]) ||
+      (initialyPresentedScreenFocused === false && isEmpty(riverFocusData)) ||
+      isNotNil(riverFocusData[screenFocusableGroupId]) ||
       isDeepLink;
 
     // TODO: Uncommit it to start fixing bug where selection wrong item
@@ -118,19 +138,6 @@ export const riverFocusManager = (function () {
     }
   }
 
-  /**
-   * Create unique key that will be used for save focused group data inside specific screen
-   * @param {{ screenId: string, isInsideContainer: boolean }}
-   * screenId Unique Id of the screen from layout.json
-   * isInsideContainer If this screen a screen picker child
-   *
-   */
-  function screenFocusableGroupId({ screenId, isInsideContainer }) {
-    return `RiverFocusableGroup-${screenId}${
-      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
-    }`;
-  }
-
   return {
     setScreenFocusableData,
     clearAllScreensData,

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

@@ -71,6 +71,9 @@ exports[`focusManagerIOS should be defined 1`] = `
   "invokeHandler": [Function],
   "isChildOf": [Function],
   "isFocusOn": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
+  "isFocusOnTabsScreenContent": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -4,7 +4,11 @@ import * as R from "ramda";
 import {
   isCurrentFocusOn,
   isChildOf as isChildOfUtils,
-} from "../focusManagerAux/utils";
+  isPartOfMenu,
+  isPartOfContent,
+  isPartOfTabsScreenContent,
+} from "../focusManagerAux/utils/index.ios";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -279,7 +283,9 @@ export const focusManager = (function () {
   function setFocus(
     id: string,
     direction?: FocusManager.IOS.Direction,
-    options?: Partial<{ groupFocusedChanged: boolean }>,
+    options?: Partial<{
+      groupFocusedChanged: boolean;
+    }>,
     callback?: any
   ) {
     blur(direction);
@@ -418,6 +424,30 @@ export const focusManager = (function () {
     return id && isCurrentFocusOn(id, currentFocusNode);
   }
 
+  function isFocusOnMenu(): boolean {
+    const currentFocusable = getCurrentFocus();
+
+    return isPartOfMenu(focusableTree, currentFocusable?.props?.id);
+  }
+
+  function isFocusOnContent(): boolean {
+    const currentFocusable = getCurrentFocus();
+
+    return isPartOfContent(focusableTree, currentFocusable?.props?.id);
+  }
+
+  function isFocusOnTabsScreenContent(
+    screenPickerContentContainerId: string
+  ): boolean {
+    const currentFocusable = getCurrentFocus();
+
+    return isPartOfTabsScreenContent(
+      focusableTree,
+      screenPickerContentContainerId,
+      currentFocusable?.props?.id
+    );
+  }
+
   function isChildOf(childId, parentId): boolean {
     return isChildOfUtils(focusableTree, childId, parentId);
   }
@@ -444,6 +474,9 @@ export const focusManager = (function () {
     isGroupItemFocused,
     getPreferredFocusChild,
     isFocusOn,
+    isFocusOnMenu,
+    isFocusOnContent,
+    isFocusOnTabsScreenContent,
     isChildOf,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ios.ts

@@ -0,0 +1,122 @@
+import { isNil, startsWith } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
+const isRoot = (node) => node?.id === "root";
+
+export const isPartOfTabsScreenContent = (
+  focusableTree,
+  screenPickerContentContainerId,
+  id
+) => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (node?.id === screenPickerContentContainerId) {
+    return true;
+  }
+
+  return isPartOfTabsScreenContent(
+    focusableTree,
+    screenPickerContentContainerId,
+    node.parent?.id
+  );
+};
+
+export const isPartOfMenu = (focusableTree, id): boolean => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isPartOfMenu(focusableTree, node.parent?.id);
+};
+
+export const isPartOfContent = (focusableTree, id) => {
+  const node = focusableTree.findInTree(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isPartOfContent(focusableTree, node.parent?.id);
+};
+
+export const isCurrentFocusOn = (id, node) => {
+  if (!node) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (node?.id === id) {
+    return true;
+  }
+
+  return isCurrentFocusOn(id, node.parent);
+};
+
+export const isChildOf = (focusableTree, childId, parentId) => {
+  if (isNil(childId) || isNil(parentId)) {
+    return false;
+  }
+
+  const childNode = focusableTree.findInTree(childId);
+
+  if (isNil(childNode)) {
+    return false;
+  }
+
+  if (childNode.parent?.id === parentId) {
+    return true;
+  }
+
+  return isChildOf(focusableTree, childNode.parent?.id, parentId);
+};

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -1,7 +1,9 @@
 import { ReplaySubject, Subject } from "rxjs";
-import { filter, switchMap, take, map } from "rxjs/operators";
+import { filter, switchMap, take, withLatestFrom, map } from "rxjs/operators";
+
 import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import { isPartOfMenu, isPartOfContent } from "./index.ios";
 
 type FocusableID = string;
 type RegistrationEvent = {
@@ -175,3 +177,55 @@ export const emitNativeRegistered = ({
     focusableNativeGroupRegistrationSubject$.next({ id, groupId });
   }
 };
+
+// /////
+
+const focusedSubject$ = new Subject<FocusableID>();
+
+const focused$ = focusedSubject$.asObservable();
+
+export const emitFocused = (id: FocusableID): void => {
+  focusedSubject$.next(id);
+};
+
+export const topMenuItemFocused$ = focused$.pipe(
+  filter((id) => id && isPartOfMenu(focusManager.focusableTree, id))
+);
+
+export const contentFocused$ = focused$.pipe(
+  filter((id) => {
+    const isContent = isPartOfContent(focusManager.focusableTree, id);
+
+    return id && isContent;
+  })
+);
+
+const createFocusableRegistry = () => {
+  const subject$ = new ReplaySubject<FocusableID | undefined>(1);
+
+  return {
+    observable$: subject$.asObservable(),
+    register: (id: FocusableID) => {
+      // save focusable_id on registration
+      subject$.next(id);
+    },
+    unregister: () => {
+      // reset focusable_id on unregistration
+      subject$.next(undefined);
+    },
+  };
+};
+
+/// HOME_TOP_MENU_ITEM
+export const HomeTopMenuItemRegistry = createFocusableRegistry();
+
+export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
+  withLatestFrom(HomeTopMenuItemRegistry.observable$),
+  filter(([id, homeId]) => id === homeId)
+);
+
+/// SCREEN_PICKER
+export const ScreenPickerContentContainerRegistry = createFocusableRegistry();
+
+/// SEARCH_INPUT
+export const SearchInputRegistry = createFocusableRegistry();

package/package.json

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

package/utils/__tests__/mergeRight.test.ts

@@ -0,0 +1,48 @@
+import { mergeRight } from "../mergeRight";
+
+describe("mergeRight", () => {
+  test("merges two objects with no overlapping keys", () => {
+    const a = { x: 1, y: 2 };
+    const b = { z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 2, z: 3 });
+  });
+
+  test("overwrites keys from the second object", () => {
+    const a = { x: 1, y: 2 };
+    const b = { y: 10, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 10, z: 3 });
+  });
+
+  test("does not mutate the original objects", () => {
+    const a = { x: 1 };
+    const b = { y: 2 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).not.toBe(a);
+    expect(result).not.toBe(b);
+    expect(a).toEqual({ x: 1 });
+    expect(b).toEqual({ y: 2 });
+  });
+
+  test("works with empty objects", () => {
+    expect(mergeRight({}, { a: 1 })).toEqual({ a: 1 });
+    expect(mergeRight({ a: 1 }, {})).toEqual({ a: 1 });
+    expect(mergeRight({}, {})).toEqual({});
+  });
+
+  test("works with nested objects (shallow merge only)", () => {
+    const a = { x: { nested: 1 }, y: 2 };
+    const b = { x: { nested: 10 }, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: { nested: 10 }, y: 2, z: 3 });
+  });
+});

package/utils/index.ts

@@ -18,6 +18,8 @@ export { take } from "./take";
 
 export { mapAccum } from "./mapAccum";
 
+export { mergeRight } from "./mergeRight";
+
 export {
   cloneDeep as clone,
   flatten,

package/utils/mergeRight.ts

@@ -0,0 +1,5 @@
+import { assign } from "lodash";
+
+export const mergeRight = (a, b) => {
+  return assign({}, a, b);
+};