@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4201443043 → 12.0.0-alpha.4220424021

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__/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 },
@@ -21,10 +21,11 @@ const mockStore = configureStore()({
 describe("Layout TV", () => {
   const navigator = {
     currentRoute: "/river/A1234",
+    canGoBack: jest.fn(),
     mainStack: [
       {
         route: "/river/A1234",
-        state: "state",
+        state: { screen: {} },
       },
     ],
   };

package/Components/Layout/TV/index.tsx

@@ -1,32 +1,75 @@
 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 { getBackgroundImageUrl } from "../utils";
+import { LayoutContainer } from "./LayoutContainer";
+import { ScreenContainer } from "./ScreenContainer";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { StackNavigator } from "../../Navigator";
+import { PathnameContext } from "../../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 
 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 { appState: { appReady = false } = {}, remoteConfigurations } =
+    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
+
+  const backgroundColor = React.useMemo(() => theme.app_background_color, []);
+
+  const backgroundImageUrl = React.useMemo(
+    () => getBackgroundImageUrl(remoteConfigurations),
+    [remoteConfigurations]
+  );
 
   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}>
+              <ScreenContextProvider pathname={navigator.currentRoute}>
+                <ScreenContainer
+                  ComponentsExtraProps={ComponentsExtraProps}
+                  NavBar={Components.NavBar}
+                >
+                  {children}
+                </ScreenContainer>
+              </ScreenContextProvider>
+            </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,20 +1,24 @@
 import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import {
+  isTV,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import Mobile from "./Mobile";
-import TV from "./TV";
 
-export default function Layout(props) {
-  const { currentRoute: pathname } = useNavigation();
+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()) {
-    return (
-      <ScreenContextProvider pathname={pathname}>
-        <TV {...props} />
-      </ScreenContextProvider>
-    );
+    return <TV {...props} />;
   } else {
     return <Mobile {...props} />;
   }

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -53,6 +53,7 @@ export function ActionButton(props: Props) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
+  // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
@@ -68,7 +69,7 @@ export function ActionButton(props: Props) {
     if (actionDisabled || !actionContext) return;
 
     setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id]);
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -7,50 +7,28 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
+  borderPaddingTop: number;
+  borderPaddingRight: number;
+  borderPaddingBottom: number;
+  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const MARGINS = [
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-] as const;
-
-const PADDINGS = [
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-] as const;
-
-const isPercentageValue = (value: number | string) => {
-  if (typeof value === "string" && value.endsWith("%")) {
-    return true;
-  }
-
-  return false;
-};
-
-const calculateContainerSpacing = ({
-  spacingKey,
-  style,
-  additionalSpacing,
-}: {
-  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
-  style: ImageStyle | ViewStyle;
-  additionalSpacing: number;
-}) => {
-  return {
-    [spacingKey]:
-      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
-  };
-};
-
-const getContainerBorderWidth = (
-  borderPosition: BorderPosition,
-  borderWidth
-) => {
+const COLOR_TRANSPARENT = "transparent";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
+});
+
+const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -63,104 +41,96 @@ const getContainerBorderWidth = (
   }
 };
 
-const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
-  switch (borderPosition) {
-    case "inside":
-      return borderWidth;
-    case "center":
-      return borderWidth / 2;
-    case "outside":
-      return 0;
-    default:
-      return 0;
-  }
-};
-
-const InsideBorder = ({
+const Border = ({
   style,
+  padding,
   borderPosition,
 }: {
   style: ViewStyle;
+  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (borderPosition === "outside") {
+  if (!borderPosition) {
     return null;
   }
 
-  const insideBorderWidth =
-    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
+  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
+  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
+  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
+  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
+
+  const borderRadiusStyle = initialBorderRadius
+    ? {
+        borderTopLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingLeft),
+        borderTopRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingRight),
+        borderBottomLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingLeft),
+        borderBottomRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingRight),
+      }
+    : {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      };
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
-        borderWidth: insideBorderWidth,
+        ...styles.border,
+        right: -containerPadding - paddingRight,
+        bottom: -containerPadding - paddingBottom,
+        left: -containerPadding - paddingLeft,
+        top: -containerPadding - paddingTop,
+        borderWidth,
         borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
+        ...borderRadiusStyle,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { style, children } = props;
-  // Return border position prop after re-implementing
-  const borderPosition = "outside";
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const spacing = getContainerPadding(borderPosition, borderWidth);
-
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
-  const updatedMargins = MARGINS.reduce((acc, margin) => {
-    const marginValue = calculateContainerSpacing({
-      spacingKey: margin,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...marginValue };
-  }, {});
-
-  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
-    const paddingValue = calculateContainerSpacing({
-      spacingKey: padding,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...paddingValue };
-  }, {});
-
-  const updatedWidth = style.width
-    ? isPercentageValue(style.width)
-      ? style.width
-      : toNumberWithDefaultZero(style.width) - spacing * 2
-    : undefined;
-
-  const updatedHeight = style.height
-    ? isPercentageValue(style.height)
-      ? style.height
-      : toNumberWithDefaultZero(style.height) - spacing * 2
-    : undefined;
-
-  const containerStyle = {
-    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
-    padding: spacing,
-    ...updatedMargins,
-    ...updatedPaddings,
-    width: updatedWidth,
-    height: updatedHeight,
-  };
+  const {
+    borderPosition,
+    borderPaddingTop,
+    borderPaddingRight,
+    borderPaddingBottom,
+    borderPaddingLeft,
+    style,
+    children,
+  } = props;
+
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
 
   return (
-    <View {...props} style={[style, containerStyle]}>
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
+      <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
-      <InsideBorder
-        style={{ ...style, ...borderStyleForMissingBorder }}
-        borderPosition={borderPosition}
-      />
     </View>
   );
 };

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;