@applicaster/zapp-react-native-ui-components 12.0.0-rc.72 → 12.0.0-rc.74

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

@@ -12,7 +12,7 @@ jest.mock("../../../Screen/TV/index.web", () => ({
   Screen: View,
 }));
 
-const Layout = require("..").default;
+const Layout = require("../index.web").default;
 
 const mockStore = configureStore()({
   appState: { appReady: true },

package/Components/Layout/TV/index.tsx

@@ -1,32 +1,129 @@
 import * as React from "react";
-import { pathOr } from "ramda";
-
+import * as R from "ramda";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  getNavigationProps,
+  resolveNavigationPlugin,
+  routeIsPlayerScreen,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+
+import { getBackgroundImageUrl } from "../utils";
+import { LayoutContainer } from "./LayoutContainer";
+import { NavBarContainer } from "./NavBarContainer";
+import { ScreenContainer } from "./ScreenContainer";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { StackNavigator } from "../../Navigator";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PathnameContext } from "../../../Contexts/PathnameContext";
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
   Background: React.ComponentType<any>;
 };
 
+type ComponentsExtraProps = {
+  Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
+};
+
 type Props = {
   Components: Components;
+  ComponentsExtraProps?: ComponentsExtraProps;
+  children: React.ReactNode;
 };
 
-const Layout = ({ Components }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
+  const navigator = useNavigation();
+  const theme = useTheme();
+  const { title, visible } = useNavbarState();
+  const { activeRiver, currentRoute } = navigator;
+
+  const {
+    appState: { appReady = false } = {},
+    remoteConfigurations,
+    plugins = [],
+  } = usePickFromState(["appState", "remoteConfigurations", "plugins"]);
+
+  const navigationProps = getNavigationProps({
+    navigator,
+    title,
+    category: "menu",
+  });
+
+  const backgroundColor = React.useMemo(() => theme.app_background_color, []);
+
+  const backgroundImageUrl = React.useMemo(
+    () => getBackgroundImageUrl(remoteConfigurations),
+    [remoteConfigurations]
+  );
+
+  const menuPlugin = React.useMemo(
+    () =>
+      resolveNavigationPlugin({
+        category: "menu",
+        navigations: activeRiver?.navigations,
+        plugins,
+      }) as QuickBrickPlugin,
+    []
+  );
+
+  const NavBar = React.useMemo(
+    () => Components.NavBar || (menuPlugin.module as React.ComponentType<any>),
+    []
+  );
+
+  const [navBarReady, setNavBarReady] = React.useState(false);
+
+  const navBarContainer = (
+    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
+      <NavBar
+        ref={ComponentsExtraProps?.NavBar?.ref}
+        isVisible={visible && !routeIsPlayerScreen(currentRoute)}
+        menuPlugin={menuPlugin}
+        navigationProps={navigationProps}
+        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
+      />
+    </NavBarContainer>
+  );
+
+  const isTVOS = isApplePlatform();
 
   if (!appReady) {
     return null;
   }
 
   return (
-    <ScreenLayoutContextProvider>
-      <StackNavigator Components={Components} />
-    </ScreenLayoutContextProvider>
+    <LayoutContainer>
+      <ScreenLayoutContextProvider>
+        <Components.Background
+          backgroundColor={backgroundColor}
+          backgroundImageUrl={backgroundImageUrl}
+          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+        >
+          <ScreenDataContext.Provider value={navigator.data}>
+            <PathnameContext.Provider value={navigator.currentRoute}>
+              {!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)
+             **/
+                <ScreenContainer>{children}</ScreenContainer>
+              ) : null}
+              {/** Render NavBarContainer over ScreenContainer to let tvOS native
+          focus manager works correctly to focus nav bar items first **/}
+              {isTVOS ? navBarContainer : null}
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 

package/Components/Layout/TV/index.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { pathOr } from "ramda";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { StackNavigator } from "../../Navigator";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+const Layout = ({ Components }: Props) => {
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
+
+  if (!appReady) {
+    return null;
+  }
+
+  return (
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
+  );
+};
+
+export default Layout;

package/Components/Layout/index.tsx

@@ -1,8 +1,20 @@
 import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  isTV,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import Mobile from "./Mobile";
-import TV from "./TV";
+
+import TVWeb from "./TV/index.web";
+import TVDefault from "./TV/index";
+
+const TV = platformSelect({
+  samsung_tv: TVWeb,
+  lg_tv: TVWeb,
+  web: TVWeb,
+  default: TVDefault,
+});
 
 export default function Layout(props) {
   if (isTV()) {

package/Contexts/ScreenContext/index.tsx

@@ -2,6 +2,7 @@ import React, {
   createContext,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
 } from "react";
@@ -113,6 +114,11 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
+  useEffect(() => {
+    // purge the getScreenNavBarState store when the pathname changes
+    screenNavBarStateRef.current = null;
+  }, [pathname]);
+
   const screenNavBarState = getScreenNavBarState()(
     useShallow((state) => ({
       visible: state.visible,

package/Contexts/ScreenDataContext/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export const ScreenDataContext = React.createContext<any>(null);
+
+// Use this only to provide initial screenData context, before the Transitioner and Screen is rendered.
+export const withScreenDataContextProvider = (Component: any) => {
+  return function ScreenDataContextProvider(props: any) {
+    const { activeRiver } = useNavigation();
+
+    // use only initial activeRiver as this context should only be used for "Home", initial route
+    const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
+
+    return (
+      <ScreenDataContext.Provider value={screenData}>
+        <Component {...props} />
+      </ScreenDataContext.Provider>
+    );
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.72",
+  "version": "12.0.0-rc.74",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.72",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.72",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.72",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.72",
+    "@applicaster/applicaster-types": "12.0.0-rc.74",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.74",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.74",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.74",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Contexts/ScreenDataContext/index.ts

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const ScreenDataContext = React.createContext<any>(null);