@applicaster/zapp-react-native-ui-components 12.0.0-rc.13 → 12.0.0-rc.131

package/Components/Image/Image.android.tsx

@@ -3,32 +3,10 @@ import FastImage, {
   FastImageProps,
 } from "@applicaster/react-native-fast-image";
 
-export const QBImage = (props: FastImageProps) => {
-  const source = React.useMemo(() => {
-    if (typeof props.source === "number") {
-      return props.source;
-    }
+import { useImageSource } from "./utils";
 
-    return {
-      uri: props.source.uri,
-      headers: props.source.headers,
-      priority: props.source.priority,
-      cache: props.source.cache,
-      maxWidth: props.source.maxWidth,
-      maxHeight: props.source.maxHeight,
-    };
-  }, [
-    ...(typeof props.source === "object"
-      ? [
-          props.source?.uri,
-          props.source?.priority,
-          props.source?.cache,
-          props.source?.headers,
-          props.source?.maxWidth,
-          props.source?.maxHeight,
-        ]
-      : []),
-  ]);
+export const QBImage = (props: FastImageProps) => {
+  const source = useImageSource(props.source);
 
   return <FastImage {...props} source={source} />;
 };

package/Components/Image/Image.tsx

@@ -1,8 +1,24 @@
-import { Image, ImageProps, ImageStyle, StyleProp } from "react-native";
+import React from "react";
+import {
+  Image,
+  ImageBackground,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+} from "react-native";
 
 export interface Props extends ImageProps {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
 // TODO - React.FC<Props> QBImage should process incoming url and apply any transformations if needed
-export const QBImage = Image;
+export const QBImage = ({
+  children,
+  ...props
+}: Props & { children?: React.ReactNode }) => {
+  if (children) {
+    return <ImageBackground {...props}>{children}</ImageBackground>;
+  }
+
+  return <Image {...props} />;
+};

package/Components/Image/utils/index.ts

@@ -0,0 +1,39 @@
+import FastImage, { Source } from "@applicaster/react-native-fast-image";
+import { useMemo } from "react";
+import { ImageRequireSource } from "react-native";
+
+function getSourceCache(cache: Source["cache"]) {
+  return cache || FastImage.cacheControl.web;
+}
+
+export const useImageSource = (source?: Source | ImageRequireSource) => {
+  return useMemo(() => {
+    if (source) {
+      if (typeof source === "number") {
+        return source;
+      }
+
+      return {
+        uri: source.uri,
+        headers: source.headers,
+        priority: source.priority,
+        cache: getSourceCache(source?.cache),
+        maxWidth: source.maxWidth,
+        maxHeight: source.maxHeight,
+      };
+    }
+
+    return undefined;
+  }, [
+    ...(typeof source === "object"
+      ? [
+          source?.uri,
+          source?.priority,
+          source?.cache,
+          source?.headers,
+          source?.maxWidth,
+          source?.maxHeight,
+        ]
+      : []),
+  ]);
+};

package/Components/Layout/TV/ScreenContainer.tsx

@@ -5,13 +5,30 @@ import * as R from "ramda";
 import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import {
+  useCurrentScreenData,
+  useNavbarState,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import { useScreenConfiguration } from "../../River/useScreenConfiguration";
-import { routeIsPlayerScreen } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  findMenuPlugin,
+  getNavigationProps,
+  routeIsPlayerScreen,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { NavBarContainer } from "./NavBarContainer";
+
+type ComponentsExtraProps = {
+  Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
+};
 
 type Props = {
+  ComponentsExtraProps?: ComponentsExtraProps;
+  NavBar: React.ComponentType<any>;
   children: React.ReactNode;
 };
 
@@ -30,9 +47,13 @@ const styles = StyleSheet.create({
   container: { flex: 1, height: "100%", width: "100%" },
 });
 
+const isTVOS = isApplePlatform();
+
 // eslint-disable-next-line react/display-name
 export const ScreenContainer = React.memo(function ScreenContainer({
   children,
+  ComponentsExtraProps,
+  NavBar,
 }: Props) {
   const { screenMarginBottom } = React.useContext(ScreenLayoutContext);
   const { currentRoute, screenData } = useNavigation();
@@ -80,9 +101,62 @@ export const ScreenContainer = React.memo(function ScreenContainer({
     [themeStyles]
   );
 
+  const navigator = useNavigation();
+  const { activeRiver } = navigator;
+  const { title, visible } = useNavbarState();
+
+  const { plugins = [] } = usePickFromState([
+    "appState",
+    "remoteConfigurations",
+    "plugins",
+  ]);
+
+  const navigationProps = getNavigationProps({
+    navigator,
+    title,
+    category: "menu",
+  });
+
+  const menuPlugin = React.useMemo(
+    () => findMenuPlugin(activeRiver?.navigations, plugins),
+    [activeRiver?.navigations]
+  );
+
+  const NavBarComponent = React.useMemo(
+    () => NavBar || (menuPlugin.module as React.ComponentType<any>),
+    []
+  );
+
+  const [navBarReady, setNavBarReady] = React.useState(false);
+
+  const navBarContainer = (
+    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
+      <NavBarComponent
+        ref={ComponentsExtraProps?.NavBar?.ref}
+        isVisible={visible}
+        menuPlugin={menuPlugin}
+        navigationProps={navigationProps}
+        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
+      />
+    </NavBarContainer>
+  );
+
   return (
-    <View testID="screen-container" style={viewStyles}>
-      {children}
-    </View>
+    <>
+      {!isTVOS ? navBarContainer : null}
+      {navBarReady ? (
+        /**
+          Need to re-mount this component on each navigation event
+          It's a hack to work around the fact that we don't support
+          correct screen rendering in our navigator (shared currentRoute state)
+        **/
+        <View testID="screen-container" style={viewStyles}>
+          {children}
+        </View>
+      ) : null}
+      {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              focus manager works correctly to focus nav bar items first **/}
+      {isTVOS ? navBarContainer : null}
+    </>
   );
 });

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,7 +60,7 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
-  const screeenLayoutValue = React.useMemo(
+  const screenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx

@@ -1,14 +1,27 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
 
 const navigator_mock = {
   currentRoute: "/river/A1234",
   screenData: {},
+  activeRiver: {
+    navigations: {},
+    id: "A1234",
+    home: false,
+  },
 };
 
+jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
+  ...jest.requireActual<any>(
+    "@applicaster/zapp-react-native-utils/navigationUtils"
+  ),
+  findMenuPlugin: () => ({}),
+}));
+
 jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
@@ -17,13 +30,13 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: () => navigator_mock,
 }));
 
-jest.mock("../../../River/useScreenConfiguration.ts", () => ({
+jest.mock("../../../River/useScreenConfiguration", () => ({
   useScreenConfiguration: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({})),
-}));
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData"
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: () => ({}),
@@ -44,42 +57,39 @@ describe("ScreenContainer", () => {
   const setScreenLayout = () => {};
 
   const wrapper = ({ children }) => (
-    <ScreenLayoutContext.Provider value={{ ...screenLayout, setScreenLayout }}>
-      {children}
-    </ScreenLayoutContext.Provider>
+    <WrappedWithProviders>
+      <ScreenLayoutContext.Provider
+        value={{ ...screenLayout, setScreenLayout }}
+      >
+        <ScreenContainer NavBar={View}>{children}</ScreenContainer>
+      </ScreenLayoutContext.Provider>
+    </WrappedWithProviders>
   );
 
   const TestComp = () => <View testID="test-component" />;
 
   it("renders", () => {
-    const { toJSON } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+    const { toJSON } = render(<TestComp />, { wrapper });
 
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders passed component", () => {
-    const { getByTestId } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+  it("renders passed component", async () => {
+    const { getByTestId } = render(<TestComp />, { wrapper });
+
+    await waitFor(() => {
+      return expect(getByTestId("screen-container")).toBeDefined();
+    });
 
     expect(getByTestId("test-component")).toBeDefined();
   });
 
-  it("sets margins provided by the theme", () => {
-    const { getByTestId } = render(
-      <ScreenContainer>
-        <TestComp />
-      </ScreenContainer>,
-      { wrapper }
-    );
+  it("sets margins provided by the theme", async () => {
+    const { getByTestId } = render(<TestComp />, { wrapper });
+
+    await waitFor(() => {
+      return expect(getByTestId("screen-container")).toBeDefined();
+    });
 
     const screen = getByTestId("screen-container");
     expect(screen.props.style).toMatchSnapshot();

package/Components/Layout/TV/__tests__/__snapshots__/ScreenContainer.test.tsx.snap

@@ -1,28 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScreenContainer renders 1`] = `
-<View
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
         "flex": 1,
-        "height": "100%",
-        "width": "100%",
-      },
-      Object {
-        "backgroundColor": "transparent",
-        "marginBottom": 10,
-        "paddingBottom": 0,
-        "paddingTop": 0,
       },
+      undefined,
     ]
   }
-  testID="screen-container"
 >
   <View
-    testID="test-component"
-  />
-</View>
+    style={
+      Array [
+        Object {
+          "position": "absolute",
+          "top": 0,
+          "width": 1920,
+          "zIndex": 10,
+        },
+        Object {
+          "maxHeight": 10,
+        },
+      ]
+    }
+    testID="nav-bar-container"
+  >
+    <View
+      isVisible={true}
+      menuPlugin={Object {}}
+      navigationProps={null}
+    />
+  </View>
+</RNCSafeAreaProvider>
 `;
 
 exports[`ScreenContainer sets margins provided by the theme 1`] = `

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,58 +2,18 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  style={
-    Object {
-      "flex": 1,
-      "height": 1080,
-      "width": 1920,
-    }
-  }
-  testID="layout-container"
+  excludeFromFocusSearching={true}
+  id="/river/A1234"
+  preferredFocus={true}
 >
   <View
-    backgroundImageUrl="http://applicaster.com"
-    testID="background-component"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "position": "absolute",
-            "top": 0,
-            "width": 1920,
-            "zIndex": 10,
-          },
-          Object {
-            "maxHeight": 10,
-          },
-        ]
+    Components={
+      Object {
+        "Background": [Function],
+        "NavBar": [Function],
       }
-      testID="nav-bar-container"
-    >
-      <View
-        isVisible={true}
-        menuPlugin={
-          Object {
-            "module": [Function],
-            "name": "resolved-menu-plug",
-            "type": "menu",
-          }
-        }
-        navigationProps={
-          Object {
-            "assets": undefined,
-            "home": undefined,
-            "nav_items": undefined,
-            "rules": undefined,
-            "selected": undefined,
-            "styles": undefined,
-            "title": "",
-          }
-        }
-        testID="nav-bar-component"
-      />
-    </View>
-  </View>
+    }
+    route="/river/A1234"
+  />
 </View>
 `;

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -1,91 +1,49 @@
 import * as React from "react";
-import * as R from "ramda";
+import { omit } from "ramda";
 import { View } from "react-native";
 import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
-import { createStore } from "redux";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
+import configureStore from "redux-mock-store";
 
-import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+const withoutChildren = omit(["children"]);
 
-jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
-  useRiverInitialState: () => ({}),
+jest.mock("../../../Screen/TV/index.web", () => ({
+  Screen: View,
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
-    navigations: [
-      {
-        category: "menu",
-        navigation_type: "menu",
-        styles: {
-          hide_secondary_level_menu: false,
-        },
-      },
-    ],
-  })),
-}));
-
-const Layout = require("..").default;
-
-const ResolvedMenuPlug = () => <View testID="resolved-menu-plug" />;
+const Layout = require("../index.web").default;
 
-const plugins = [
-  {
-    module: ResolvedMenuPlug,
-    type: "menu",
-    name: "resolved-menu-plug",
-  },
-];
-
-const bgImage = "http://applicaster.com";
-const isNavBarVisible = true;
-
-const store = createStore(() => ({
+const mockStore = configureStore()({
   appState: { appReady: true },
-  remoteConfigurations: { sdkAssets: { bgImage } },
-  plugins,
-}));
+});
 
 describe("Layout TV", () => {
-  const themes = {
-    myTheme: { screen_margin_top: 10, screen_margin_bottom: 10 },
-  };
-
-  const selectedThemeId = "myTheme";
-
   const navigator = {
-    activeRiver: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    canGoBack: () => false,
     currentRoute: "/river/A1234",
-    screenData: {
-      navigations: [{ category: "menu", navigation_type: "menu" }],
-    },
-    isNavBarVisible: isNavBarVisible,
+    canGoBack: jest.fn(),
+    mainStack: [
+      {
+        route: "/river/A1234",
+        state: { screen: {} },
+      },
+    ],
   };
 
   const wrapper = ({ children }) => (
-    <Provider store={store}>
+    <Provider store={mockStore}>
       <NavigationContext.Provider value={navigator}>
-        <ThemeContext.Provider value={{ themes, selectedThemeId }}>
-          {children}
-        </ThemeContext.Provider>
+        {children}
       </NavigationContext.Provider>
     </Provider>
   );
 
-  const Screen = (props) => (
-    <View testID="screen-component" {...R.omit(["children"])(props)} />
-  );
-
   const NavBar = (props) => (
-    <View testID="nav-bar-component" {...R.omit(["children"])(props)} />
+    <View testID="nav-bar-component" {...withoutChildren(props)} />
   );
 
   const Background = (props: Record<any, any>) => (
-    <View testID="background-component" {...R.omit(["children"])(props)}>
+    <View testID="background-component" {...withoutChildren(props)}>
       {props.children}
     </View>
   );
@@ -96,54 +54,8 @@ describe("Layout TV", () => {
   };
 
   it("renders", () => {
-    const { toJSON } = render(
-      <Layout Components={Components}>
-        <Screen />
-      </Layout>,
-      { wrapper }
-    );
+    const { toJSON } = render(<Layout Components={Components} />, { wrapper });
 
     expect(toJSON()).toMatchSnapshot();
   });
-
-  describe("props passed to background component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            Background: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const bgComponent = getByTestId("background-component");
-      expect(bgComponent.props.backgroundImageUrl).toBe(bgImage);
-      expect(bgComponent.props.testProp).toBe(true);
-    });
-  });
-
-  describe("props passed to navbar component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            NavBar: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const navbarComponent = getByTestId("nav-bar-component");
-      expect(navbarComponent.props.isVisible).toBe(isNavBarVisible);
-      expect(navbarComponent.props.menuPlugin).toBe(plugins[0]);
-      expect(navbarComponent.props.testProp).toBe(true);
-    });
-  });
 });