@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5471145113 → 12.0.0-alpha.5521005225

package/Components/BaseFocusable/index.tsx

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

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { join, path, merge } from "ramda";
+import { join, merge, path } from "ramda";
 import { View } from "react-native";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
@@ -11,6 +11,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   item: {
@@ -66,6 +67,10 @@ type Props = {
   behavior: Behavior;
 };
 
+type State = {
+  hasFocusableInside: boolean;
+};
+
 const baseCellStyles = {
   height: "100%",
   display: "flex",
@@ -77,7 +82,7 @@ const touchableStyles = {
   height: "100%",
 } as const;
 
-export class CellComponent extends React.Component<Props> {
+export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -87,6 +92,10 @@ export class CellComponent extends React.Component<Props> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+
+    this.state = {
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+    };
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -139,6 +148,10 @@ export class CellComponent extends React.Component<Props> {
         shouldScrollVertically?.(mouse, focusable, id, title)
       ) {
         this.scrollVertically(focusable);
+
+        const accessibilityManager = AccessibilityManager.getInstance();
+        // Text from DSP should be localized already
+        accessibilityManager.readText({ text: title });
       }
     }
   }
@@ -187,6 +200,16 @@ export class CellComponent extends React.Component<Props> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (prevProps.item !== this.props.item) {
+      this.setState({
+        hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
+          this.props.item
+        ),
+      });
+    }
+  }
+
   render() {
     const {
       item,
@@ -215,9 +238,7 @@ export class CellComponent extends React.Component<Props> {
       this.onFocus(focusable, mouse);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
-    if (hasFocusableInside) {
+    if (this.state.hasFocusableInside) {
       return (
         <CellWithFocusable
           CellRenderer={CellRenderer}

package/Components/Cell/CellWithFocusable.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
@@ -54,7 +56,7 @@ type Props = {
   skipFocusManagerRegistration?: boolean;
   isFocusable?: boolean;
   behavior: Behavior;
-  selected?: boolean;
+  focused?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -70,7 +72,7 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected,
+    focused,
   } = props;
 
   const isFocused = useCellFocusedState(
@@ -82,8 +84,7 @@ export function CellWithFocusable(props: Props) {
   const state = useCellState({
     id: item.id,
     behavior,
-    focused: isFocused,
-    selected,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
   });
 
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
@@ -114,6 +115,7 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
+      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,13 +226,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {
-    // Workaround for HL autoscroll/autoloop feature, we scroll manually on tvOS.
-    // Should be removed after refactoring autoscroll/autoloop feature
-    if (this.props.component?.component_type !== "horizontal_list_qb") {
-      this.props?.scrollToIndex?.(index);
-    }
-  }
+  scrollTo() {}
 
   render() {
     const {
@@ -279,7 +273,9 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
             behavior={behavior}
+            isFocusable={isFocusable}
           />
         </View>
       );

package/Components/Focusable/Focusable.tsx

@@ -4,6 +4,7 @@ import * as R from "ramda";
 import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   initialFocus?: boolean;
@@ -23,7 +24,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export class Focusable extends BaseFocusable<Props> {
+class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
@@ -198,3 +199,7 @@ export class Focusable extends BaseFocusable<Props> {
     );
   }
 }
+
+const FocusableWithFocusableContext = withFocusableContext(Focusable);
+
+export { FocusableWithFocusableContext as Focusable };

package/Components/FocusableGroup/index.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";
+import { FocusableGroupContextProvider } from "../../Contexts/FocusableGroupContext";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   testID?: string;
@@ -29,7 +31,7 @@ type Props = {
   excludeFromFocusSearching?: boolean;
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroup extends BaseFocusable<Props> {
   constructor(props) {
     super(props);
     this.isGroup = true;
@@ -82,8 +84,14 @@ export class FocusableGroup extends BaseFocusable<Props> {
         style={style}
         ref={this.ref}
       >
-        {children}
+        <FocusableGroupContextProvider id={id}>
+          {children}
+        </FocusableGroupContextProvider>
       </div>
     );
   }
 }
+
+const FocusableGroupWithFocusableContext = withFocusableContext(FocusableGroup);
+
+export { FocusableGroupWithFocusableContext as FocusableGroup };

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/__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

@@ -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

@@ -4,22 +4,14 @@ 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 { 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";
+import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -40,20 +32,9 @@ type Props = {
 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 { appState: { appReady = false } = {}, remoteConfigurations } =
+    usePickFromState(["appState", "remoteConfigurations", "plugins"]);
 
   const backgroundColor = React.useMemo(() => theme.app_background_color, []);
 
@@ -62,37 +43,6 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     [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;
   }
@@ -107,18 +57,14 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
         >
           <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}
+              <ScreenContextProvider pathname={navigator.currentRoute}>
+                <ScreenContainer
+                  ComponentsExtraProps={ComponentsExtraProps}
+                  NavBar={Components.NavBar}
+                >
+                  {children}
+                </ScreenContainer>
+              </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
         </Components.Background>

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

@@ -22,6 +22,10 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     borderColor: COLOR_TRANSPARENT,
   },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
 });
 
 const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
@@ -87,8 +91,9 @@ const Border = ({
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
+        ...styles.border,
         right: -containerPadding - paddingRight,
         bottom: -containerPadding - paddingBottom,
         left: -containerPadding - paddingLeft,
@@ -130,8 +135,8 @@ export const BorderContainerView = (props: Props) => {
       {...props}
       style={[style, styles.container, borderStyleForMissingBorder]}
     >
-      {children}
       <Border style={style} padding={padding} borderPosition={borderPosition} />
+      {children}
     </View>
   );
 };