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

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/search-screen/src/tv/utils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,9 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import { emitFocused } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -84,6 +85,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -34,6 +34,11 @@ type Props = {
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {
+  constructor(props) {
+    super(props);
+    this.isGroup = true;
+  }
+
   render() {
     const {
       children,

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -142,15 +142,17 @@ export const useCurationAPI = (
       const url = path(SOURCE_PATH, component);
       const mapping = path(MAPPING_PATH, component);
 
-      map[component.id] = getInflatedDataSourceUrl({
-        source: url,
-        contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
-        },
-        mapping,
-      });
+      map[component.id] = mapping
+        ? getInflatedDataSourceUrl({
+            source: url,
+            contexts: {
+              entry: entryContext,
+              screen: screenContext,
+              search: getSearchContext(searchContext, mapping),
+            },
+            mapping,
+          })
+        : url;
     });
 
     return map;

package/Components/River/TV/River.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -24,6 +25,7 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
+  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -35,6 +37,7 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
+    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -52,7 +55,7 @@ export const River = (props: Props) => {
   );
 
   const stringOrEmpty = (value: string | number | undefined): string =>
-    R.isNil(value) ? "" : String(value);
+    isNil(value) ? "" : String(value);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
@@ -92,8 +95,10 @@ export const River = (props: Props) => {
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={R.merge(river, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={componentsMapExtraProps}
+        screenData={Object.assign(river || {}, { groupId: extraData?.groupId })}
+        componentsMapExtraProps={Object.assign(componentsMapExtraProps || {}, {
+          groupId,
+        })}
         {...extraData}
       />
     );
@@ -106,6 +111,7 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
+      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,11 @@
 import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
-import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
+import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
 
 export const River = compose(
-  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader
+  withRiverDataLoader,
+  withFocusableGroupForContent
 )(RiverComponent);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { View } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
+
+import { QUICK_BRICK_TOP_CONTAINER } from "@applicaster/quick-brick-core/const";
+
+const useTopMenuLayout = () => {
+  const [layout, setLayout] = React.useState(undefined);
+
+  const handleLayout = React.useCallback((layout) => {
+    setLayout(layout);
+  }, []);
+
+  useSubscriberFor(QBUIComponentEvents.topMenuBarTV_onLayout, handleLayout);
+
+  return layout;
+};
+
+export const withFocusableGroupForContent = (Component) => {
+  return function (props) {
+    const { screenId, isInsideContainer } = props;
+
+    const topMenuLayout = useTopMenuLayout();
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    const topMenuHeight = toNumberWithDefaultZero(topMenuLayout?.height);
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // workaround to avoid intersection between FocusableGroup for content and FocusableGroup for top-menu
+        style={{ flex: 1, marginTop: topMenuHeight }}
+        groupId={QUICK_BRICK_TOP_CONTAINER}
+      >
+        <View style={{ flex: 1, marginTop: -1 * topMenuHeight }}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -24,12 +24,16 @@ export const getDatasourceUrl: (
   ) => {
     const { source, mapping } = R.propOr({}, ["data"], component);
 
-    const contexts = {
-      entry: entryContext,
-      screen: screenContext || screenData,
-      search: getSearchContext(searchContext, mapping),
-    };
+    if (mapping) {
+      const contexts = {
+        entry: entryContext,
+        screen: screenContext || screenData,
+        search: getSearchContext(searchContext, mapping),
+      };
 
-    return getInflatedDataSourceUrl({ source, mapping, contexts });
+      return getInflatedDataSourceUrl({ source, mapping, contexts });
+    }
+
+    return source;
   }
 );

package/events/index.ts

@@ -5,4 +5,6 @@ export enum QBUIComponentEvents {
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
   focusOnSelectedTab = "focusOnSelectedTab",
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
+  focusOnHomeTopMenuItem = "focusOnHomeTopMenuItem",
+  topMenuBarTV_onLayout = "topMenuBarTV_onLayout",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.1456157166",
+  "version": "15.0.0-alpha.2239032089",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.1456157166",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1456157166",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1456157166",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1456157166",
+    "@applicaster/applicaster-types": "15.0.0-alpha.2239032089",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.2239032089",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.2239032089",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.2239032089",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/River/TV/withTVEventHandler.tsx

@@ -1,27 +0,0 @@
-/* eslint max-len: off */
-
-import React from "react";
-import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-export const withTvEventHandler = (Component) => {
-  return function WithTVEventHandler(props) {
-    const navigator = useNavigation();
-
-    const remoteHandler = (event) => {
-      const { eventType } = event;
-
-      const canGoBack = navigator.canGoBack();
-
-      if (eventType === "menu" && canGoBack) {
-        navigator.goBack();
-      }
-    };
-
-    return (
-      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
-        <Component {...props} />
-      </TVEventHandlerComponent>
-    );
-  };
-};