@applicaster/zapp-react-native-ui-components 13.0.0-rc.11 → 13.0.0-rc.111

package/Components/BaseFocusable/index.tsx

@@ -1,13 +1,12 @@
 import * as React from "react";
+import * as R from "ramda";
 
 import {
   BaseFocusable as BaseFocusableInterface,
   BoundingRect,
 } from "./BaseFocusable.interface";
 
-import { createReactRef } from "@applicaster/zapp-react-native-utils/reactUtils";
 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";
 
 type ScrollDirection = FocusManager.IOS.Direction | FocusManager.Web.Direction;
@@ -35,7 +34,7 @@ type Props = {
 };
 
 export class BaseFocusable<
-  T extends Props = Props
+  T extends Props = Props,
 > extends BaseFocusableInterface<T> {
   constructor(props) {
     super(props);
@@ -45,7 +44,7 @@ export class BaseFocusable<
       focused: initialFocus || false,
     };
 
-    this.ref = createReactRef();
+    this.ref = React.createRef();
   }
 
   componentDidMount() {
@@ -131,12 +130,6 @@ export class BaseFocusable<
   willLoseFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { willLoseFocus = noop } = this.props;
     willLoseFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_LOSE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   willReceiveFocus: FocusManager.FocusEventCB = (
@@ -145,12 +138,6 @@ export class BaseFocusable<
   ) => {
     const { willReceiveFocus = noop } = this.props;
     willReceiveFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_RECEIVE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -163,8 +150,6 @@ export class BaseFocusable<
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
     onFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(FOCUS_EVENTS.FOCUS, this, scrollDirection);
   };
 
   /**
@@ -179,12 +164,6 @@ export class BaseFocusable<
   ) => {
     const { hasReceivedFocus = noop } = this.props;
     hasReceivedFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_RECEIVED_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -196,12 +175,6 @@ export class BaseFocusable<
   hasLostFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { hasLostFocus = noop } = this.props;
     hasLostFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_LOST_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -228,7 +201,6 @@ export class BaseFocusable<
     const { onBlur = noop } = this.props;
     this.setFocusedState(false);
     onBlur(focusable, scrollDirection);
-    focusManager.invokeHandler?.(FOCUS_EVENTS.BLUR, this, scrollDirection);
   };
 
   onPress = (keyEvent?: Nullable<React.MouseEvent>) => {
@@ -269,4 +241,68 @@ export class BaseFocusable<
       this.setState({ focused });
     }
   };
+
+  /**
+   * will invoke the underlying component's focus method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  focus(_, scrollDirection) {
+    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  }
+
+  /**
+   * will invoke the underlying component's blur method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  blur(
+    _,
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+  ) {
+    return this.onBlur(this, scrollDirection);
+  }
+
+  /**
+   * Sets the focus on this item. Will trigger sequentially a sequence of
+   * functions (willReceiveFocus, focus, hasReceivedFocus). If these functions (defined in the Focusable
+   * Item underlying component) return promises, execution will wait before it proceeds to the next. This
+   * is useful for triggering sequential operations that specifically require to fully run before or after
+   * focus is actually set on that item.
+   * @param {string} scrollDirection string representation of the direction of the navigation which landed
+   * to this item being focused
+   */
+  _executeFocusSequence(methodNames, scrollDirection) {
+    return R.reduce(
+      (sequence, methodName) => {
+        const method = this[methodName]; // Access the method by name
+
+        if (typeof method !== "function") {
+          throw new Error(
+            `Method '${methodName}' not found or not a function.`
+          );
+        }
+
+        return sequence
+          .then(() => method.call(this, scrollDirection))
+          .catch((e) => {
+            throw e; // Re-throw for consistent error handling
+          });
+      },
+      Promise.resolve(),
+      methodNames
+    );
+  }
+
+  setFocus(scrollDirection) {
+    const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
+
+    return this._executeFocusSequence(focusMethods, scrollDirection);
+  }
+
+  setBlur(scrollDirection) {
+    const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
+
+    return this._executeFocusSequence(blurMethods, scrollDirection);
+  }
 }

package/Components/Cell/Cell.tsx

@@ -12,12 +12,10 @@ 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";
+import { styles } from "./styles";
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -33,10 +31,9 @@ type Props = {
     id: string;
   };
   selected?: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: Record<string, string>) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: ZappEntry) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;
@@ -65,23 +62,13 @@ type Props = {
   skipFocusManagerRegistration?: boolean;
   shouldUpdate: boolean;
   behavior: Behavior;
+  componentsMapOffset: number;
 };
 
 type State = {
   hasFocusableInside: boolean;
 };
 
-const baseCellStyles = {
-  height: "100%",
-  display: "flex",
-  flex: 1,
-} as const;
-
-const touchableStyles = {
-  flex: 1,
-  height: "100%",
-} as const;
-
 export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
@@ -255,7 +242,7 @@ export class CellComponent extends React.Component<Props, State> {
       <View
         testID={`${component?.id}-${id}`}
         accessible={false}
-        style={touchableStyles}
+        style={styles.touchableCell}
       >
         <Focusable
           id={focusableId}
@@ -267,7 +254,7 @@ export class CellComponent extends React.Component<Props, State> {
           hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
           preferredFocus={preferredFocus}
           offsetUpdater={offsetUpdater}
-          style={baseCellStyles}
+          style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
@@ -276,7 +263,16 @@ export class CellComponent extends React.Component<Props, State> {
 
             if (isFocused) {
               const accessibilityManager = AccessibilityManager.getInstance();
-              accessibilityManager.readText({ text: item.title });
+
+              const accessibilityTitle =
+                item?.extensions?.accessibility?.label || item?.title || "";
+
+              const accessibilityHint =
+                item?.extensions?.accessibility?.hint || "";
+
+              accessibilityManager.readText({
+                text: `${accessibilityTitle} ${accessibilityHint}`,
+              });
             }
 
             return (

package/Components/Cell/CellWithFocusable.tsx

@@ -1,52 +1,16 @@
 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";
+import { CellWrapper } from "./CellWrapper";
+import { styles } from "./styles";
 
 type Props = {
   item: ZappEntry;
-  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  CellRenderer: React.FunctionComponent<any>;
   id: string;
   groupId: string;
   onFocus: Function;
@@ -59,6 +23,8 @@ type Props = {
   focused?: boolean;
 };
 
+const addPrefix = (id: string) => `focusable-cell-wrapper-${id}`;
+
 export function CellWithFocusable(props: Props) {
   const {
     index,
@@ -75,14 +41,10 @@ export function CellWithFocusable(props: Props) {
     focused,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
+  const [isFocused, setIsFocused] = React.useState(false);
 
   const state = useCellState({
-    id: item.id,
+    item,
     behavior,
     focused: isFocused || toBooleanWithDefaultFalse(focused),
   });
@@ -96,26 +58,55 @@ export function CellWithFocusable(props: Props) {
     }
   }, [focusedButtonId]);
 
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
+  const handleToggleFocus = React.useCallback(
+    (value) => {
+      setFocusedButtonId(value.focusedButtonId);
+
+      if (value.focusable) {
+        onFocus(value.focusable, value.mouse);
+      }
+    },
+    [onFocus]
+  );
+
+  const onGroupFocus = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(true);
+    }
+  }, [skipFocusManagerRegistration]);
 
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
+  const onGroupBlur = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(false);
     }
-  };
+  }, [skipFocusManagerRegistration]);
 
   return (
-    <CellRenderer
-      item={item}
+    <FocusableGroup
+      id={addPrefix(id)}
+      testID={"cell-with-focusable-cell-renderer-focusable-group"}
       groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
       preferredFocus={preferredFocus}
+      shouldUsePreferredFocus
+      onFocus={onGroupFocus}
+      onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
+    >
+      <CellWrapper style={styles.cellWrapper}>
+        <CellRenderer
+          testID={"cell-with-focusable-cell-renderer"}
+          item={item}
+          groupId={addPrefix(id)}
+          onToggleFocus={handleToggleFocus}
+          state={state}
+          prefixId={id}
+          focusedButtonId={focusedButtonId}
+          preferredFocus={true}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
+          isFocusable={isFocusable}
+          focused={focused}
+        />
+      </CellWrapper>
+    </FocusableGroup>
   );
 }

package/Components/Cell/CellWrapper.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { View, ViewStyle } from "react-native";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isTvOS = isTvOSPlatform();
+
+type Props = {
+  style: ViewStyle;
+  children: React.ReactNode;
+};
+
+export const CellWrapper = ({ style, children }: Props) => {
+  if (isTvOS) {
+    return <View style={style}>{children}</View>;
+  }
+
+  return <>{children}</>;
+};

package/Components/Cell/TvOSCellComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
 
-import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
@@ -10,10 +10,6 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
-import { getCellState } from "./utils";
-
-const _getCellState = (focused, selected) =>
-  getCellState({ focused, selected });
 
 type Props = {
   item: ZappEntry;
@@ -36,10 +32,9 @@ type Props = {
     component_type: string;
   };
   selected: boolean;
-  CellRenderer: React.ComponentType<{
-    item: any;
-    state: string;
-  }> & { hasFocusableInside: (item: any) => boolean };
+  CellRenderer: React.FunctionComponent<any> & {
+    hasFocusableInside: (item: any) => boolean;
+  };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;
@@ -70,6 +65,7 @@ type Props = {
   isFocusable: boolean;
   shouldUpdate: boolean;
   behavior: Behavior;
+  componentsMapOffset: number;
 };
 
 type State = {
@@ -184,6 +180,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       component,
       index,
+      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -198,13 +195,11 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       const extraAnchorPointYOffset =
         screenLayout?.extraAnchorPointYOffset || 0;
 
-      const marginTop = screenLayout?.screenMarginTop || 0;
-
       const totalOffset =
         headerOffset +
-        (componentAnchorPointY || 0) +
-        extraAnchorPointYOffset -
-        marginTop;
+          (componentAnchorPointY || 0) +
+          extraAnchorPointYOffset -
+          componentsMapOffset || 0;
 
       mainOffsetUpdater?.(
         { tag: this.target },
@@ -252,7 +247,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
     const focusableId = R.join("-", [component?.id, id, index]);
 
-    const handleFocus = (arg1: any, index: number) => {
+    const handleFocus = (arg1: any, index?: number) => {
       const focusFn = onFocus || noop;
       focusFn(arg1, index);
 
@@ -285,7 +280,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       <View onLayout={this.onLayout} style={styles.container}>
         <Focusable
           id={focusableId}
-          groupId={groupId || component?.id}
+          groupId={String(groupId || component?.id)}
           onFocus={handleFocus}
           onBlur={onBlur || this.onBlur}
           isParallaxDisabled={this.layout?.width > 1740}
@@ -297,20 +292,18 @@ export class TvOSCellComponent extends React.Component<Props, State> {
           style={baseCellStyles}
           isFocusable={isFocusable}
         >
-          {(focused) => {
-            return (
-              <FocusableCell
-                {...{
-                  index,
-                  CellRenderer,
-                  item,
-                  focused: this.props.focused || selectedCell || focused,
-                  scrollTo: this.scrollTo,
-                  behavior,
-                }}
-              />
-            );
-          }}
+          {(focused) => (
+            <FocusableCell
+              {...{
+                index,
+                CellRenderer,
+                item,
+                focused: !!(this.props.focused || selectedCell || focused),
+                scrollTo: this.scrollTo,
+                behavior,
+              }}
+            />
+          )}
         </Focusable>
       </View>
     );

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/Cell/index.js

@@ -11,6 +11,7 @@ import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import { withComponentsMapOffsetContextConsumer } from "../../Contexts/ComponentsMapOffsetContext";
 
 // TODO | Gallery QB | Extract this
 export const ScrollInterceptorContext = createContext(
@@ -30,5 +31,6 @@ export const Cell = R.compose(
   RiverOffsetContext.withConsumer,
   HorizontalScrollContext.withConsumer,
   withConsumer,
-  ScreenLayoutContextConsumer
+  ScreenLayoutContextConsumer,
+  withComponentsMapOffsetContextConsumer
 )(Component);

package/Components/Cell/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  cellWrapper: {
+    flex: 0,
+    height: "100%",
+  },
+  baseCell: {
+    height: "100%",
+    display: "flex",
+    flex: 1,
+  },
+  touchableCell: {
+    flex: 1,
+    height: "100%",
+  },
+});