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

package/Components/Focusable/Focusable.tsx

@@ -8,8 +8,6 @@ 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;
@@ -108,7 +106,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -122,7 +120,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (!isSearchInputId(id)) {
+    if (id !== "search_input_group_id") {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

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

package/Components/FocusableGroup/FocusableTvOS.tsx

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

package/Components/River/TV/River.tsx

@@ -4,7 +4,6 @@ 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";
@@ -25,7 +24,6 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
-  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -37,7 +35,6 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
-    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -55,7 +52,7 @@ export const River = (props: Props) => {
   );
 
   const stringOrEmpty = (value: string | number | undefined): string =>
-    isNil(value) ? "" : String(value);
+    R.isNil(value) ? "" : String(value);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
@@ -95,10 +92,8 @@ export const River = (props: Props) => {
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={Object.assign(river || {}, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={Object.assign(componentsMapExtraProps || {}, {
-          groupId,
-        })}
+        screenData={R.merge(river, { groupId: extraData?.groupId })}
+        componentsMapExtraProps={componentsMapExtraProps}
         {...extraData}
       />
     );
@@ -111,7 +106,6 @@ 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,
-  withFocusableGroupForContent
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withTVEventHandler.tsx

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

package/Components/ScreenResolver/index.tsx

@@ -16,6 +16,7 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -26,6 +27,7 @@ type Props = {
   feedId?: string;
   feedTitle?: string;
   focused?: boolean;
+  resultCallback?: ScreenResultCallback;
   parentFocus?: {
     nextFocusDown?: React.Ref<any>;
     nextFocusRight?: React.Ref<any>;
@@ -61,13 +63,17 @@ export function ScreenResolverComponent(props: Props) {
 
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-  }, [screenId]);
+  }, [rivers, screenId, setScreenContext]);
 
-  const callbackAction = useCallbackActions(
+  const parentCallback = props.resultCallback;
+
+  const screenAction = useCallbackActions(
     hookPlugin || screenData,
     screenData.callback
   );
 
+  const callbackAction = parentCallback || screenAction;
+
   const ScreenPlugin =
     findPluginByType(screenType, plugins, { skipWarning: true }) ||
     findPluginByIdentifier(screenType, plugins) ||

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

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

package/events/index.ts

@@ -5,6 +5,4 @@ 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.2239032089",
+  "version": "15.0.0-alpha.3339012525",
   "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.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",
+    "@applicaster/applicaster-types": "15.0.0-alpha.3339012525",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3339012525",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3339012525",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3339012525",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/River/TV/withFocusableGroupForContent.tsx

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