@applicaster/zapp-react-native-utils 12.0.14 → 12.0.16-rc.0

package/focusManager/index.ts

@@ -8,6 +8,8 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
 export function useFocusManager() {
   return focusManager;
 }
@@ -74,6 +76,14 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
+export function shouldShowEmptyGroup(component) {
+  return (
+    component?.ui_components?.filter(
+      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
+    )?.length > 0
+  );
+}
+
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,15 +111,50 @@ export const useIsFocusable = (props: Props): void => {
     component.rules.hide_component_if_data_is_empty
   );
 
+  const isLoadingData = !!zappPipesData?.loading;
+
   const hasNoData =
     isNilOrEmpty(zappPipesData?.data) ||
     isNilOrEmpty(zappPipesData?.data?.entry);
 
+  const hasNoUIComponents = isNilOrEmpty(component?.ui_components);
+
+  const hasDataError = !!zappPipesData?.error;
+
+  const hasEmptyGroup = shouldShowEmptyGroup(component);
+
+  const isGallery = component?.component_type === "gallery-qb";
+
+  const isGroup = component?.component_type === "group-qb";
+
+  const isHiddenDueToEmptyData =
+    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+
+  const isEmptyGroup = isGroup && hasNoUIComponents;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable &&
+    (!hasNoData || !hideIfDataEmpty) &&
+    !isEmptyGroup;
+
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
-      setIsFocusable(
-        componentCellsFocusable && (!hasNoData || !hideIfDataEmpty)
-      );
+      let isFocusableNew = false;
+
+      if (isGallery) {
+        isFocusableNew = true;
+      } else if (isFocusable(component)) {
+        isFocusableNew = defaultFocusableLogic;
+      }
+
+      setIsFocusable(isFocusableNew);
     }
-  }, [setIsFocusable, componentCellsFocusable, hasNoData]);
+  }, [
+    defaultFocusableLogic,
+    isHiddenDueToEmptyData,
+    isGallery,
+    setIsFocusable,
+    hasDataError,
+    hasEmptyGroup,
+  ]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.14",
+  "version": "12.0.16-rc.0",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.14",
+    "@applicaster/applicaster-types": "12.0.16-rc.0",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -55,7 +55,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

package/reactHooks/navigation/index.ts

@@ -17,7 +17,6 @@ import {
   QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
 } from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
@@ -36,6 +35,7 @@ import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 export { useNavigation } from "./useNavigation";
 
@@ -156,6 +156,7 @@ export const useRoute = (): {
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
+
   const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
@@ -165,14 +166,13 @@ export const useRoute = (): {
   ]);
 
   const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
-    navigator.videoModalState?.item &&
+    navigator?.videoModalState?.item &&
     legacyScreenData(
       {
         entry: navigator.videoModalState?.item as ZappEntry,