@applicaster/zapp-react-native-ui-components 12.0.0-rc.14 → 12.0.0-rc.140

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -1,35 +1,38 @@
 /* eslint-disable react/prop-types */
 
-jest.mock("react-native", () => {
-  const { ScrollView } = jest.requireActual("react-native");
+import * as React from "react";
+
+import { shallow } from "enzyme";
+import { create, act } from "react-test-renderer";
+import { shallowToJson } from "enzyme-to-json";
+
+import { ViewportEvents } from "../../ViewportEvents";
+
+jest.useFakeTimers();
 
+jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
   return {
-    ScrollView,
-    UIManager: {
-      measureLayout: jest.fn((handle, parent, error, success) => {
-        success(100, 100, 400, 400);
-      }),
-    },
-    findNodeHandle: jest.fn(() => 1234),
-    Animated: {
-      timing: jest.fn(() => ({ start: jest.fn() })),
+    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
+    measureLayout: (handle, parent, error, success) => {
+      success(100, 100, 400, 400);
     },
   };
 });
 
-import * as React from "react";
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
-import { shallow } from "enzyme";
-import TestRenderer from "react-test-renderer";
-import { act } from "@testing-library/react-hooks";
-import { shallowToJson } from "enzyme-to-json";
+const ReactNative = require("react-native");
 
-import { ViewportEvents } from "../../ViewportEvents";
+const { Animated, ScrollView } = ReactNative;
+
+Animated.timing = jest.fn(() => ({ start: jest.fn() }));
 
 const viewportEventsManager = new ViewportEvents(true);
 
-const { ScrollView } = require("react-native");
-const { ViewportAware } = require("../index");
+const { ViewportAware } = require("../");
 const { ViewportTracker } = require("../../ViewportTracker");
 
 const TestComponent = (props) => {
@@ -116,7 +119,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("invokes the onViewportEnter function when entering the viewport", () => {
-    const wrapper = TestRenderer.create(
+    const wrapper = create(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}
@@ -134,6 +137,8 @@ describe("<ViewportAware />", () => {
         width: 1920,
         height: 1080,
       });
+
+      jest.runAllTimers();
     });
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -151,7 +156,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("invokes the onViewportLeave function when leaving the viewport", () => {
-    const wrapper = TestRenderer.create(
+    const wrapper = create(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      callOnChildren(children, "ref", ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -5,11 +5,10 @@ import { ViewportEvents } from "../../ViewportEvents";
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native", () => {
-  return {
-    findNodeHandle: jest.fn(() => 1234),
-  };
-});
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
 const viewportEventsManager = new ViewportEvents(true);
 

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,11 +45,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View style={[style.view, isRTL ? style.rtlStyle : {}]}>
+    <SafeAreaView
+      style={[style.view, isRTL ? style.rtlStyle : {}]}
+      testID="BarView-safeAreaView"
+    >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/Buttons/BackButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type FloatingButtonProps = {
+type FloatingButtonProps = Testable & {
   onPress: () => void;
   screenStyles: any;
 };
 
-const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
+const BackButton = ({
+  onPress,
+  screenStyles,
+  testID = "backButton",
+}: FloatingButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.back_button_image}

package/Components/ZappFrameworkComponents/BarView/Buttons/CloseButton.tsx

@@ -11,12 +11,16 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type CloseButtonProps = {
+type CloseButtonProps = Testable & {
   onPress: () => void;
   screenStyles?: any;
 };
 
-const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
+const CloseButton = ({
+  onPress,
+  screenStyles,
+  testID = "closeButton",
+}: CloseButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -25,6 +29,7 @@ const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
 
   return (
     <ActionButton
+      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.close_button_image}

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { fireEvent } from "@testing-library/react-native";
+
+const mockUseIsRTL = jest.fn(() => true);
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const BarView = require("../BarView").default;
+
+describe("BarView", () => {
+  const screenStyles = {
+    title_font_color: "#000",
+    title_font_android: "Roboto",
+    title_font_ios: "San Francisco",
+    title_font_size: "16",
+    background_color: "#fff",
+  };
+
+  const barState = {
+    backHandler: jest.fn(),
+    closeHandler: jest.fn(),
+    title: "Test Title",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByText } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("applies RTL styles when isRTL is true", () => {
+    mockUseIsRTL.mockReturnValue(true);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("does not apply RTL styles when isRTL is false", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("calls closeHandler when CloseButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("closeButton-actionButton-touchable"));
+    expect(barState.closeHandler).toHaveBeenCalled();
+  });
+
+  it("calls backHandler when BackButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("backButton-actionButton-touchable"));
+    expect(barState.backHandler).toHaveBeenCalled();
+  });
+});

package/Components/ZappFrameworkComponents/Buttons/ActionButton.tsx

@@ -28,7 +28,7 @@ styles: {
 }
 */
 
-type ActionButtonProps = {
+type ActionButtonProps = Testable & {
   onPress: () => void;
   buttonStyles: any;
   imageUrl: string;
@@ -46,11 +46,16 @@ const ActionButton = ({
   buttonStyles,
   imageUrl,
   imageStyle = closeButtonStyle,
+  testID,
 }: ActionButtonProps) => {
   return (
-    <View style={buttonStyles}>
-      <TouchableOpacity onPress={onPress}>
-        <Image source={{ uri: imageUrl }} style={imageStyle} />
+    <View style={buttonStyles} testID={testID}>
+      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
+        <Image
+          source={{ uri: imageUrl }}
+          style={imageStyle}
+          testID={`${testID}-image`}
+        />
       </TouchableOpacity>
     </View>
   );

package/Components/ZappUIComponent/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Placeholder } from "./Placeholder";
 import { useInitialLoading } from "./hooks";
-import { FocusableContext } from "../Focusable/index.android";
+import { useFocusable } from "../Focusable/index.android";
 
 type ReactComponent = React.ComponentType<any>;
 
@@ -26,13 +26,23 @@ type ZappUIComponentType = {
   options?: Options;
 };
 
-const renderComponent = (Component: ReactComponent | undefined, props) => {
-  if (Component) {
-    const { component, parent } = props;
+type RenderComponentProps = any;
+
+const RenderComponent = (
+  Component: ReactComponent | undefined,
+  args: RenderComponentProps
+) => {
+  const { component, parent } = args;
 
+  const contextValue = React.useMemo(
+    () => ({ ...component, parent }),
+    [component, parent]
+  );
+
+  if (Component) {
     return (
-      <UIComponentContext.Provider value={{ ...component, parent }}>
-        <Component {...props} />
+      <UIComponentContext.Provider value={contextValue}>
+        <Component {...args} />
       </UIComponentContext.Provider>
     );
   }
@@ -117,7 +127,7 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       props;
 
     const parent = useUIComponentContext();
-    const { setIsFocusable } = React.useContext(FocusableContext) || {};
+    const { setIsFocusable } = useFocusable();
 
     const isLoading = toBooleanWithDefaultFalse(zappPipesData?.loading);
     const isInitialLoading = useInitialLoading(isLoading);
@@ -154,11 +164,11 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
     }, [props.component?.rules?.component_cells_focusable]);
 
     if (isDataSourceEmpty(props) && allowsEmptyDataSource) {
-      return renderComponent(Component, componentProps);
+      return RenderComponent(Component, componentProps);
     }
 
-    if (isLoading && !zappPipesData.data && isInitialLoading) {
-      return renderComponent(LoadingComponent || Placeholder, componentProps);
+    if (isLoading && !zappPipesData?.data && isInitialLoading) {
+      return RenderComponent(LoadingComponent || Placeholder, componentProps);
     }
 
     if (zappPipesData?.error) {
@@ -167,9 +177,9 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
         index: componentIndex,
       });
 
-      return renderComponent(ErrorComponent, componentProps);
+      return RenderComponent(ErrorComponent, componentProps);
     }
 
-    return renderComponent(Component, componentProps);
+    return RenderComponent(Component, componentProps);
   };
 }

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Components/index.js

@@ -4,6 +4,8 @@ export { River } from "./River";
 
 export { PlayerContainer } from "./PlayerContainer";
 
+export { ModalComponent } from "./ModalComponent";
+
 export { ContentScreen } from "./ContentScreen";
 
 export { TextInputTv } from "./TextInputTv";

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,5 +1,6 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
+import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -31,16 +32,19 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = () => {
+  const getCachedDimensions = useCallback(() => {
     return dimensions[id] || initialDimensions();
-  };
+  }, [dimensions?.[id], id]);
 
-  const handleSetCachedDimensions = (newDimensions) => {
+  const handleSetCachedDimensions = useCallback((newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  };
-
-  return {
-    getCachedDimensions,
-    setCachedDimensions: handleSetCachedDimensions,
-  };
+  }, []);
+
+  return useMemo(
+    () => ({
+      getCachedDimensions,
+      setCachedDimensions: handleSetCachedDimensions,
+    }),
+    [getCachedDimensions, handleSetCachedDimensions]
+  );
 };

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/Contexts/FocusableGroupContext/FocusableGroupContext.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export const FocusableGroupContext = React.createContext<string | null>(null);

package/Contexts/FocusableGroupContext/FocusableGroupContextProvider.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+
+type ProviderArgs = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export const FocusableGroupContextProvider = ({
+  id,
+  children,
+}: ProviderArgs) => (
+  <FocusableGroupContext.Provider value={id}>
+    {children}
+  </FocusableGroupContext.Provider>
+);

package/Contexts/FocusableGroupContext/__tests__/FocusableGroupContextProvider.test.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { FocusableGroupContextProvider, FocusableGroupContext } from "../";
+
+const MockComponent = () => {
+  const focusableContext = useContext(FocusableGroupContext) || "default";
+
+  return <Text testID={focusableContext} />;
+};
+
+describe("FocusableGroupContextProvider", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(
+      <FocusableGroupContextProvider id="testId">
+        <MockComponent />
+      </FocusableGroupContextProvider>
+    );
+
+    expect(getByTestId("testId")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/__tests__/withFocusableContext.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { withFocusableContext } from "../withFocusableContext";
+import { FocusableGroupContext } from "../FocusableGroupContext";
+
+const MockComponent = ({ groupId }: { groupId: string }) => (
+  <Text testID={groupId} />
+);
+
+const WrappedComponent = withFocusableContext(MockComponent);
+
+describe("withFocusableContext HOC", () => {
+  it("should provide focusable context to the wrapped component", () => {
+    const { getByTestId } = render(<WrappedComponent />, {
+      // eslint-disable-next-line react/display-name
+      wrapper: ({ children }: { children: React.ReactElement }) => (
+        <FocusableGroupContext.Provider value="test">
+          {children}
+        </FocusableGroupContext.Provider>
+      ),
+    });
+
+    expect(getByTestId("test")).toBeTruthy();
+  });
+});

package/Contexts/FocusableGroupContext/index.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FocusableGroupContext } from "./FocusableGroupContext";
+import { FocusableGroupContextProvider } from "./FocusableGroupContextProvider";
+
+export { FocusableGroupContext, FocusableGroupContextProvider };
+
+export const useGroupId = () => React.useContext(FocusableGroupContext);