@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1488035644 → 13.0.0-alpha.1605643562

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -0,0 +1,126 @@
+/** TODO: Remove this file when tvos FocusableGroup
+ * behaviour is aligned to the web one
+ * FocusableGroup should only send onFocus and onBlur events when
+ * Focus enters and leaves the Focusables inside the branch
+ */
+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";
+
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+
+  React.useEffect(() => {
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
+
+    const handler = () => {
+      // tvOS hack for properly checking focus
+      if (isAppleTV()) {
+        setTimeout(() => {
+          isGroupItemFocused();
+        }, 0);
+      } else {
+        isGroupItemFocused();
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+
+    return () => {
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    };
+  }, [groupId, skipFocusManagerRegistration]);
+
+  return currentCellFocused;
+};
+
+type Props = {
+  item: ZappEntry;
+  CellRenderer: React.FunctionComponent<any>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  focused?: boolean;
+};
+
+export function CellWithFocusable(props: Props) {
+  const {
+    index,
+    item,
+    CellRenderer,
+    id,
+    groupId,
+    onFocus,
+    scrollTo = noop,
+    preferredFocus,
+    skipFocusManagerRegistration,
+    isFocusable,
+    behavior,
+    focused,
+  } = props;
+
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+  });
+
+  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
+
+  // for horizontal scrolling
+  React.useEffect(() => {
+    if (focusedButtonId) {
+      scrollTo(index);
+    }
+  }, [focusedButtonId]);
+
+  const handleToggleFocus = (value) => {
+    setFocusedButtonId(value.focusedButtonId);
+
+    if (value.focusable) {
+      onFocus(value.focusable, value.mouse);
+    }
+  };
+
+  return (
+    <CellRenderer
+      item={item}
+      groupId={groupId}
+      onToggleFocus={handleToggleFocus}
+      state={state}
+      prefixId={id}
+      focusedButtonId={focusedButtonId}
+      preferredFocus={preferredFocus}
+      skipFocusManagerRegistration={skipFocusManagerRegistration}
+      isFocusable={isFocusable}
+      focused={focused}
+    />
+  );
+}

package/Components/Cell/CellWithFocusable.tsx

@@ -1,52 +1,14 @@
 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";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on?.(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler?.(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
+import { FocusableGroup } from "../FocusableGroup";
 
 type Props = {
   item: ZappEntry;
-  CellRenderer: React.ComponentType<ZappNewCellRendererProps>;
+  CellRenderer: React.FunctionComponent<any>;
   id: string;
   groupId: string;
   onFocus: Function;
@@ -75,11 +37,7 @@ export function CellWithFocusable(props: Props) {
     focused,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration || false,
-    groupId,
-    id
-  );
+  const [isFocused, setIsFocused] = React.useState(false);
 
   const state = useCellState({
     id: item.id,
@@ -107,18 +65,41 @@ export function CellWithFocusable(props: Props) {
     [onFocus]
   );
 
+  const onGroupFocus = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(true);
+    }
+  }, [skipFocusManagerRegistration]);
+
+  const onGroupBlur = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(false);
+    }
+  }, [skipFocusManagerRegistration]);
+
   return (
-    <CellRenderer
-      item={item}
+    <FocusableGroup
+      id={`focusable-cell-wrapper-${id}`}
+      testID={"cell-with-focusable-cell-renderer-focusable-group"}
       groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
       preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
+      shouldUsePreferredFocus
+      onFocus={onGroupFocus}
+      onBlur={onGroupBlur}
+    >
+      <CellRenderer
+        testID={"cell-with-focusable-cell-renderer"}
+        item={item}
+        groupId={`focusable-cell-wrapper-${id}`}
+        onToggleFocus={handleToggleFocus}
+        state={state}
+        prefixId={id}
+        focusedButtonId={focusedButtonId}
+        preferredFocus={true}
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
+        isFocusable={isFocusable}
+        focused={focused}
+      />
+    </FocusableGroup>
   );
 }

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import React from "react";
 import { act, render } from "@testing-library/react-native";
-import { CellWithFocusable } from "../CellWithFocusable";
+import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 
@@ -23,7 +23,9 @@ describe("CellWithFocusable", () => {
 
     const wrapper = renderWith(props);
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
+
+    expect(element.props.state).toBe("default");
   });
 
   it("should render in default state", () => {
@@ -40,8 +42,9 @@ describe("CellWithFocusable", () => {
     focusManager.isGroupItemFocused = jest.fn(() => true);
 
     const wrapper = renderWith(props);
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
+    expect(element.props.state).toBe("default");
   });
 
   it("should render in focused state", () => {
@@ -55,13 +58,17 @@ describe("CellWithFocusable", () => {
       scrollTo: jest.fn(),
     };
 
-    focusManager.isGroupItemFocused = jest.fn(() => true);
     const wrapper = renderWith(props);
 
+    const focusableGroupComponent = wrapper.getByTestId(
+      "cell-with-focusable-cell-renderer-focusable-group"
+    );
+
     act(() => {
-      focusManager.on.mock.calls[focusManager.on.mock.calls.length - 1][1]();
+      focusableGroupComponent.props.onFocus();
     });
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("focused");
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
+    expect(element.props.state).toBe("focused");
   });
 });

package/Components/MasterCell/__tests__/__snapshots__/masterCell.test.js.snap

@@ -11,6 +11,7 @@ exports[`masterCellBuilder when using a custom data adapter renders correctly 1`
   <View
     cellUUID="mocked-uuid"
     key="0"
+    skipButtons={false}
     style={
       {
         "backgroundColor": "#2F2F2F",
@@ -40,6 +41,7 @@ exports[`masterCellBuilder when using custom containerStyle renders correctly 1`
   <View
     cellUUID="mocked-uuid"
     key="0"
+    skipButtons={false}
     style={{}}
     wrapperRef={
       {
@@ -61,6 +63,7 @@ exports[`masterCellBuilder when using custom default components renders correctl
   <mockConstructor
     cellUUID="mocked-uuid"
     key="0"
+    skipButtons={false}
     style={{}}
     wrapperRef={
       {
@@ -82,6 +85,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
   <View
     cellUUID="mocked-uuid"
     key="0"
+    skipButtons={false}
     style={
       {
         "backgroundColor": "#2F2F2F",
@@ -107,6 +111,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       cellUUID="mocked-uuid"
       key="0"
       numberOfLines={1}
+      skipButtons={false}
       style={
         {
           "borderTopLeftRadius": 4,
@@ -120,6 +125,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="1"
+      skipButtons={false}
       style={
         {
           "height": 30,
@@ -138,6 +144,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         label="Test Entry"
         numberOfLines={1}
+        skipButtons={false}
         style={
           {
             "color": "#EFEFEF",
@@ -151,6 +158,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="2"
+      skipButtons={false}
       style={
         {
           "height": 60,
@@ -169,6 +177,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
         key="0"
         label="Summary of the test entry"
         numberOfLines={2}
+        skipButtons={false}
         style={
           {
             "color": "#EFEFEF",
@@ -183,6 +192,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
     <View
       cellUUID="mocked-uuid"
       key="3"
+      skipButtons={false}
       style={
         {
           "height": 42,
@@ -199,6 +209,7 @@ exports[`masterCellBuilder when using default options can be invoked as a React
       <ImageContainer
         cellUUID="mocked-uuid"
         key="0"
+        skipButtons={false}
         style={
           {
             "height": 42,

package/Components/MasterCell/elementMapper.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { View } from "react-native";
 
 type ElementProps = {
   type: string;
@@ -45,21 +44,11 @@ const cellPlayerTypes = new Set([
 export function elementMapper(
   components,
   otherProps?: {
-    preferredFocus?: boolean;
     skipButtons?: boolean;
     cellUUID?: string;
+    [key: string]: any;
     emitAsyncElementRegistrate?: () => void;
     emitAsyncElementLayout?: () => void;
-    focused?: boolean;
-    focusedButtonId?: string;
-    groupId?: string;
-    isFocusable?: boolean;
-    onToggleFocus?: (arg0: unknown) => void;
-    prefixId?: string;
-    skipFocusManagerRegistration?: boolean;
-    component?: ZappUIComponent;
-    componentId?: string;
-    wrapperRef: React.RefObject<typeof View>;
   }
 ) {
   return function Element({

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next();
+    this.asyncElementRegistrate$.next(null);
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next();
+    this.asyncElementLayout$.next(null);
   };
 
   public decrementAsyncElementRegistrationCount = () => {

package/Components/MasterCell/index.tsx

@@ -11,24 +11,7 @@ import { getEntryState, hasFocusableInsideBuilder } from "./utils";
 
 type Props = {
   item: ZappEntry;
-  state: null | "selected" | "focused" | "default";
-  emitAsyncElementRegistrate?: () => void;
-  emitAsyncElementLayout?: () => void;
-  skipButtons?: boolean;
-  cellUUID?: string;
-  // New props from CellWithFocusable
-  groupId?: string;
-  onToggleFocus?: (arg0: unknown) => void;
-  prefixId?: string;
-  focusedButtonId?: string;
-  preferredFocus?: boolean;
-  skipFocusManagerRegistration?: boolean;
-  isFocusable?: boolean;
-  focused?: boolean;
-  // New props from Gallery
-  component?: ZappUIComponent;
-  componentId?: string;
-  screenId: string;
+  state: null | "selected" | "focused";
 };
 
 const defaultContainerStyle = { flex: 1 };
@@ -56,24 +39,6 @@ type MasterCellBuilderOptions = {
   };
 };
 
-// retrieve screendata from route
-const useMasterCellScreen = (screenId?: string) => {
-  let _screenId = screenId;
-  const { screenData } = useRoute();
-
-  if (!screenId) {
-    // get screenId from targetScreen or screenData
-    _screenId =
-      screenData && "targetScreen" in screenData
-        ? screenData?.targetScreen?.id
-        : screenData?.id;
-  }
-
-  const { screen } = useScreenState(_screenId);
-
-  return screen;
-};
-
 export function masterCellBuilder({
   components = defaultComponents,
   cellConfiguration,
@@ -98,8 +63,15 @@ export function masterCellBuilder({
    * inflated with the data coming from the data source
    * @param {"selected" | "focused" | null} props.state state of the component
    */
-  function MasterCell({ item, state, screenId, ...otherProps }: Props) {
-    const screen = useMasterCellScreen(screenId);
+  function MasterCell({ item, state, ...otherProps }: Props) {
+    const { screenData } = useRoute();
+
+    const screenId =
+      screenData && "targetScreen" in screenData
+        ? screenData?.targetScreen?.id
+        : screenData?.id;
+
+    const { screen } = useScreenState(screenId);
 
     const selectedState = screen?.selectedEntry;
 
@@ -125,56 +97,18 @@ export function masterCellBuilder({
       item?.id,
     ]);
 
-    const remapElements = React.useMemo(
-      () =>
-        mapElementWithKey(
-          elementMapper(componentsMap, {
-            wrapperRef,
-            emitAsyncElementRegistrate: otherProps.emitAsyncElementRegistrate,
-            emitAsyncElementLayout: otherProps.emitAsyncElementLayout,
-            preferredFocus: otherProps.preferredFocus,
-            cellUUID: cellUUID || otherProps.cellUUID,
-            skipButtons: skipButtons || otherProps.skipButtons,
-            // cellWithFocusable
-            focused: otherProps.focused,
-            focusedButtonId: otherProps.focusedButtonId,
-            groupId: otherProps.groupId,
-            isFocusable: otherProps.isFocusable,
-            onToggleFocus: otherProps.onToggleFocus,
-            prefixId: otherProps.prefixId,
-            skipFocusManagerRegistration:
-              otherProps.skipFocusManagerRegistration,
-            // gallery
-            component: otherProps.component,
-            componentId: otherProps.componentId,
-          })
-        ),
-      [
-        componentsMap,
-        otherProps.emitAsyncElementRegistrate,
-        otherProps.emitAsyncElementLayout,
-        cellUUID || otherProps.cellUUID,
-        skipButtons || otherProps.skipButtons,
-        otherProps.focused,
-        otherProps.focusedButtonId,
-        otherProps.groupId,
-        otherProps.isFocusable,
-        otherProps.onToggleFocus,
-        otherProps.prefixId,
-        otherProps.skipFocusManagerRegistration,
-        otherProps.component,
-        otherProps.componentId,
-      ]
-    );
-
-    const renderElements = React.useMemo(
-      () => elements.map(remapElements),
-      [remapElements, elements]
+    const remapElements = mapElementWithKey(
+      elementMapper(componentsMap, {
+        ...otherProps,
+        wrapperRef,
+        cellUUID,
+        skipButtons,
+      })
     );
 
     return (
       <View style={containerStyle} ref={wrapperRef}>
-        {renderElements}
+        {elements.map(remapElements)}
       </View>
     );
   }

package/Components/ModalComponent/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
@@ -60,8 +60,8 @@ export function ModalHeader(props: Props) {
           width: width - buttonsContainerWidth,
         }}
       >
-        {title && <Title {...titleProps} />}
-        {summary && <Title {...summaryProps} />}
+        {title ? <Title {...titleProps} /> : null}
+        {summary ? <Title {...summaryProps} /> : null}
       </View>
       <View style={{ width: buttonsContainerWidth }}>
         <CloseButton {...closeButtonProps} />