@applicaster/zapp-react-native-utils 15.0.0-alpha.1456157166 → 15.0.0-alpha.2239032089

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

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

package/appUtils/focusManager/index.ios.ts

@@ -1,12 +1,18 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
-import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import { findChild } from "./utils";
 
+import {
+  isCurrentFocusOn,
+  isPartOfMenu,
+  isPartOfContent,
+  isPartOfTabsScreenContent,
+} from "../focusManagerAux/utils/index.ios";
+
 const { FocusableManagerModule } = NativeModules;
 
 /**
@@ -261,7 +267,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);
@@ -400,6 +408,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
+    );
+  }
+
   return {
     on,
     invokeHandler,
@@ -422,5 +454,8 @@ export const focusManager = (function () {
     isGroupItemFocused,
     getPreferredFocusChild,
     isFocusOn,
+    isFocusOnMenu,
+    isFocusOnContent,
+    isFocusOnTabsScreenContent,
   };
 })();

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

@@ -0,0 +1,104 @@
+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);
+};

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

@@ -0,0 +1,63 @@
+import { Subject, ReplaySubject, withLatestFrom } from "rxjs";
+import { filter } from "rxjs/operators";
+
+import { isPartOfMenu, isPartOfContent } from "./index.ios";
+
+import { focusManager } from "../../focusManager/index.ios";
+
+type FocusableID = string;
+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 registeredHomeTopMenuItemSubject$ = new ReplaySubject<FocusableID>(1);
+
+export const registeredHomeTopMenuItem$ =
+  registeredHomeTopMenuItemSubject$.asObservable();
+
+export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
+  withLatestFrom(registeredHomeTopMenuItem$),
+  filter(([id, homeId]) => id === homeId)
+);
+
+export const emitHomeTopMenuItemRegistered = (id) => {
+  // save homeId on registration
+  registeredHomeTopMenuItemSubject$.next(id);
+};
+
+export const emitHomeTopMenuItemUnregistered = () => {
+  // reset homeId on unregistration
+  registeredHomeTopMenuItemSubject$.next(undefined);
+};
+
+const registeredScreenPickerContentContainerSubject$ =
+  new ReplaySubject<FocusableID>(1);
+
+export const registeredScreenPickerContentContainer$ =
+  registeredScreenPickerContentContainerSubject$.asObservable();
+
+export const emitScreenPickerContentContainerRegistered = (id) => {
+  // save screenPickerContentContainerId on registration
+  registeredScreenPickerContentContainerSubject$.next(id);
+};
+
+export const emitScreenPickerContentContainerUnregistered = () => {
+  // reset screenPickerContentContainerId on unregistration
+  registeredScreenPickerContentContainerSubject$.next(undefined);
+};

package/package.json

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

package/reactHooks/feed/useFeedLoader.tsx

@@ -37,6 +37,15 @@ export const useFeedLoader = ({
   mapping,
   pipesOptions = {},
 }: Props): FeedLoaderResponse => {
+  useEffect(() => {
+    if (!feedUrl) {
+      logger.warning({
+        message: "Required parameter feedUrl is missing",
+        data: { feedUrl },
+      });
+    }
+  }, []);
+
   const isInitialRender = useIsInitialRender();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });

package/reactHooks/feed/useInflatedUrl.ts

@@ -18,7 +18,6 @@ import {
 } from "@applicaster/zapp-pipes-v2-client";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { ENDPOINT_TAGS } from "../../types";
-import { isNilOrEmpty } from "../../reactUtils/helpers";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -76,19 +75,15 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
    * https://foo.com/shows/A1234
    */
 
-  if (!isNilOrEmpty(mapping)) {
-    if (!source) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        throw new Error(
-          "getInflatedDataSourceUrl: source is empty while mapping is provided"
-        );
-      }
+  if (!source) {
+    // eslint-disable-next-line no-console
+    console.error("source is empty", {
+      source,
+      contexts,
+      mapping,
+    });
 
-      return null;
-    }
-  } else {
-    return source || null;
+    return null;
   }
 
   // Hack because in tv we expect to get key names instead of values from the fake entry
@@ -198,17 +193,28 @@ export function useInflatedUrl({
 
   const url = useMemo(
     () =>
-      getInflatedDataSourceUrl({
-        source: feedUrl,
-        contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
-        },
-        mapping,
-      }),
-    [entryContext, feedUrl, mapping, screenContext, searchContext]
+      mapping
+        ? getInflatedDataSourceUrl({
+            source: feedUrl,
+            contexts: {
+              entry: entryContext,
+              screen: screenContext,
+              search: getSearchContext(searchContext, mapping),
+            },
+            mapping,
+          })
+        : feedUrl,
+    [feedUrl, mapping]
   );
 
+  if (!feedUrl) {
+    logger.warning({
+      message: "Required parameter feedUrl is missing",
+      data: { feedUrl },
+    });
+
+    return null;
+  }
+
   return url;
 }

package/utils/index.ts

@@ -34,4 +34,5 @@ export {
   last,
   toLower,
   isEqual as equals,
+  flowRight as compose,
 } from "lodash";