@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4433422595 → 12.0.0-alpha.4757075613

package/Components/BaseFocusable/index.tsx

@@ -73,7 +73,7 @@ export class BaseFocusable<
   getId(props?: { id: string; groupId: string }) {
     const { id, groupId = null } = props || this.props;
 
-    return groupId ? `groupId:${groupId}___${id}` : id;
+    return groupId ? `${groupId}-${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,11 +207,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [
-      `componentId:${component?.id}`,
-      `id:${id}`,
-      `index:${index}`,
-    ]);
+    const focusableId = R.join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/FocusableGroup/index.tsx

@@ -26,7 +26,6 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
-  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

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

package/Components/Layout/TV/index.tsx

@@ -1,15 +1,11 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet } from "react-native";
 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 { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {
   getNavigationProps,
-  getPathAttributes,
   resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
@@ -21,23 +17,9 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-
-import { FocusableGroup } from "../../FocusableGroup";
-import { Screen } from "../../Screen/TV/index.web";
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    width: 1920,
-    height: 1080,
-    backgroundColor: "black",
-    // opacity: 0.5,
-
-    borderWidth: 4,
-    borderColor: "magenta",
-  },
-});
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -45,65 +27,16 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  NavBar?: Record<string, any>;
   Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  componentsExtraProps?: ComponentsExtraProps;
-};
-
-const StackNavigator = ({ Components }: Props) => {
-  // @ts-ignore
-  const { mainStack, currentRoute } = useNavigation();
-
-  console.log("DEBUG", { mainStack });
-
-  const renderScreen = ({ route, action, key, state }) => {
-    const pathAttributes = getPathAttributes({ pathname: route });
-
-    if (R.isEmpty(pathAttributes)) {
-      return null;
-    }
-
-    console.log("SCENE:", { route, state, key, action });
-
-    const id = `${route}`;
-
-    return (
-      <FocusableGroup
-        id={id}
-        preferredFocus={route === currentRoute}
-        excludeFromFocusSearching
-        key={id}
-      >
-        <View style={styles.container}>
-          <PathnameContext.Provider value={route}>
-            <Screen route={route} Components={Components} />
-          </PathnameContext.Provider>
-        </View>
-      </FocusableGroup>
-    );
-  };
-
-  return mainStack.map(renderScreen);
-};
-
-const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
-  return (
-    <>
-      <ScreenLayoutContextProvider>
-        <StackNavigator
-          componentsExtraProps={componentsExtraProps}
-          Components={Components}
-        />
-      </ScreenLayoutContextProvider>
-    </>
-  );
+  ComponentsExtraProps?: ComponentsExtraProps;
+  children: React.ReactNode;
 };
 
-// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
@@ -164,57 +97,33 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     return null;
   }
 
-  console.log("DEBUG", "TV Layout");
-
   return (
-    // @ts-ignore
-    <TransitionerTV
-      componentsExtraProps={ComponentsExtraProps}
-      Components={Components}
-    >
-      <LayoutContainer>
-        <ScreenLayoutContextProvider>
-          <Components.Background
-            backgroundColor={backgroundColor}
-            backgroundImageUrl={backgroundImageUrl}
-            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-          >
-            {!isTVOS ? navBarContainer : null}
-            {navBarReady ? (
-              /**
+    <LayoutContainer>
+      <ScreenLayoutContextProvider>
+        <Components.Background
+          backgroundColor={backgroundColor}
+          backgroundImageUrl={backgroundImageUrl}
+          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+        >
+          {!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)
              **/
-              <PathnameContext.Provider value={navigator.currentRoute}>
-                <ScreenContainer>{children}</ScreenContainer>
-              </PathnameContext.Provider>
-            ) : null}
-            {/** Render NavBarContainer over ScreenContainer to let tvOS native
+            <PathnameContext.Provider value={navigator.currentRoute}>
+              <ScreenContainer>{children}</ScreenContainer>
+            </PathnameContext.Provider>
+          ) : null}
+          {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-            {isTVOS ? navBarContainer : null}
-            <TransitionOverlay />
-          </Components.Background>
-        </ScreenLayoutContextProvider>
-      </LayoutContainer>
-    </TransitionerTV>
+          {isTVOS ? navBarContainer : null}
+          <TransitionOverlay />
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 
 export default Layout;
-
-/// Transitioner:
-/*
-Component: Transitioner
-Responsibilities:
-- Transitione between screens.
-Tehere is no transition on Tv so no need for transitioner.
-
-Component: StackNavigator
-Responsibilities:
-- Render the screens in the stack.
-- Render the NavBar? I guess navbar should be part of the screen
-- Render the screen.
-
-Q
- */

package/Components/MasterCell/utils/index.ts

@@ -127,7 +127,7 @@ export const useFilterChildren = <
     const item = child.props.item;
     const action = actions.actions[child.props.pluginIdentifier];
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    const currentValue = action?.module?.context?._currentValue;
 
     return currentValue?.isActionAvailable
       ? currentValue.isActionAvailable(item)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4433422595",
+  "version": "12.0.0-alpha.4757075613",
   "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-alpha.4433422595",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4433422595",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4433422595",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4433422595",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4757075613",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4757075613",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4757075613",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4757075613",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

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

@@ -1,88 +0,0 @@
-import React from "react";
-import { last, pathOr } from "ramda";
-import { ScreenResolver } from "../../ScreenResolver";
-import {
-  getNavigationProps,
-  getPathAttributes,
-  resolveNavigationPlugin,
-} from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
-type Components = {
-  NavBar: React.ComponentType<any>;
-  Background: React.ComponentType<any>;
-};
-
-type Props = {
-  route: string;
-  Components: Components;
-};
-
-const isPlayer = (routeState): boolean => {
-  const pluginType = pathOr(
-    "unknown_plugin_type",
-    ["state", "screen", "plugin_type"],
-    routeState
-  );
-
-  return pluginType === "player";
-};
-
-export const Screen = (props: Props) => {
-  if (!props.route) {
-    throw new Error("Required props route is missing");
-  }
-
-  const { getStackForPathname } = useNavigation();
-  const { plugins = [] } = usePickFromState(["plugins"]);
-
-  const pathAttributes = getPathAttributes({ pathname: props.route });
-  const routeState = getStackForPathname(props.route);
-
-  console.log("debug_2", "Screen", { routeState, route: props.route });
-
-  const { screenType, screenId } = last(pathAttributes);
-
-  const navigationProps = getNavigationProps({
-    navigator: {
-      activeRiver: routeState.state.screen,
-      // @ts-ignore
-      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
-    },
-    category: "menu",
-  });
-
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations: routeState.state.screen?.navigations,
-    plugins,
-  }) as QuickBrickPlugin;
-
-  const NavBar = (props.Components.NavBar ||
-    menuPlugin.module) as React.ComponentType<any>;
-
-  const isNavBarVisible = !isPlayer(routeState);
-
-  return (
-    <>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
-          groupId={props.route}
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
-          // Maybe activeRiver?
-        />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={routeState?.state?.screen}
-        groupId={props.route}
-      />
-    </>
-  );
-};