@applicaster/zapp-react-native-ui-components 14.0.0-alpha.9119252693 → 14.0.0-alpha.9203091422

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -0,0 +1,107 @@
+import {
+  ScreenRevealManager,
+  COMPONENT_LOADING_STATE,
+} from "../ScreenRevealManager";
+
+describe("ScreenRevealManager", () => {
+  const mockCallback = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with the correct number of components to wait for", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    expect(manager["numberOfComponentsWaitToLoadBeforePresent"]).toBe(3);
+
+    expect(manager["renderingState"]).toEqual([
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+    ]);
+  });
+
+  it("should call the callback when the required number of components are loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFinished(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when the required number of components fail to load", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFailed(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFailed(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call the callback if the required number of components are not loaded", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "gallery-qb" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/prop-types */
+
+import * as React from "react";
+import { render, screen, act } from "@testing-library/react-native";
+import { View } from "react-native";
+import {
+  withScreenRevealManager,
+  SHOWN,
+  TIMEOUT,
+} from "../withScreenRevealManager";
+
+// jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+const MockComponent = ({
+  initialNumberToLoad,
+  onLoadFinishedFromScreenRevealManager,
+  onLoadFailedFromScreenRevealManager,
+}) => {
+  React.useEffect(() => {
+    // Simulate loading components
+    for (let i = 0; i < initialNumberToLoad; i++) {
+      onLoadFinishedFromScreenRevealManager(i);
+    }
+  }, [initialNumberToLoad, onLoadFinishedFromScreenRevealManager]);
+
+  return (
+    <View
+      testID="mock-component"
+      initialNumberToLoad={initialNumberToLoad}
+      onLoadFinishedFromScreenRevealManager={
+        onLoadFinishedFromScreenRevealManager
+      }
+      onLoadFailedFromScreenRevealManager={onLoadFailedFromScreenRevealManager}
+    />
+  );
+};
+
+const WrappedComponent = withScreenRevealManager(MockComponent);
+
+describe.skip("withScreenRevealManager", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it("should render the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    expect(screen.getByTestId("mock-component")).toBeTruthy();
+  });
+
+  it("should animate opacity when ready to show", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const animatedView = screen.getByTestId("animated-component");
+
+    act(() => {
+      jest.advanceTimersByTime(TIMEOUT + 100);
+    });
+
+    expect(animatedView.props.style.opacity).toBe(SHOWN);
+  });
+
+  it("should pass initialNumberToLoad, onLoadFinishedFromScreenRevealManager, and onLoadFailedFromScreenRevealManager to the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const mockComponent = screen.getByTestId("mock-component");
+
+    expect(mockComponent.props.initialNumberToLoad).toBe(3);
+
+    expect(
+      mockComponent.props.onLoadFinishedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+
+    expect(
+      mockComponent.props.onLoadFailedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+  });
+});

package/Components/ScreenRevealManager/index.ts

@@ -0,0 +1 @@
+export { withScreenRevealManager } from "./withScreenRevealManager";

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Animated } from "react-native";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+import { ScreenRevealManager } from "./ScreenRevealManager";
+
+const flex = platformSelect({
+  tvos: 1,
+  android_tv: 1,
+  web: undefined,
+  samsung_tv: undefined,
+  lg_tv: undefined,
+  default: undefined,
+});
+
+export const TIMEOUT = 500; // 500 ms
+
+const HIDDEN = 0; // opacity = 0
+
+export const SHOWN = 1; // opacity = 1
+
+type Props = {
+  componentsToRender: ZappUIComponent[];
+};
+
+export const withScreenRevealManager = (Component) => {
+  return function WithScreenRevealManager(props: Props) {
+    const { componentsToRender } = props;
+
+    const [isReadyToShow, setIsReadyToShow] = React.useState(false);
+
+    const handleSetIsReadyToShow = React.useCallback(() => {
+      setIsReadyToShow(true);
+    }, []);
+
+    const managerRef = useRefWithInitialValue<ScreenRevealManager>(
+      () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
+    );
+
+    const opacityRef = useRefWithInitialValue<Animated.Value>(
+      () => new Animated.Value(HIDDEN)
+    );
+
+    React.useEffect(() => {
+      if (isReadyToShow) {
+        Animated.timing(opacityRef.current, {
+          toValue: SHOWN,
+          duration: TIMEOUT,
+          useNativeDriver: true,
+        }).start();
+      }
+    }, [isReadyToShow]);
+
+    if (isFirstComponentScreenPicker(componentsToRender)) {
+      // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
+      return <Component {...props} />;
+    }
+
+    return (
+      <Animated.View
+        style={{ opacity: opacityRef.current, flex }}
+        testID="animated-component"
+      >
+        <Component
+          {...props}
+          initialNumberToLoad={
+            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+          }
+          onLoadFinishedFromScreenRevealManager={
+            managerRef.current.onLoadFinished
+          }
+          onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
+        />
+      </Animated.View>
+    );
+  };
+};

package/Components/Tabs/TV/Tabs.android.tsx

@@ -7,7 +7,6 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import Tab from "./Tab";
 import { Gutter } from "../Gutter";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { ImageBackground, View } from "react-native";
 import { getStyles } from "./styles";
 import {
@@ -100,7 +99,6 @@ const TabsComponent = ({
         >
           <FocusableList
             horizontal
-            onScrollToIndexFailed={noop}
             onLayout={onLayoutChange}
             contentContainerStyle={tabsListContentContainer}
             ref={flatListRef}

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,6 +3,23 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -29,6 +46,23 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={false}
   collapsable={false}
   focusable={true}

package/Components/Transitioner/Scene.tsx

@@ -36,6 +36,7 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
+  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -6,15 +6,21 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      {
-        "flex": 1,
-        "fontScale": 2,
-        "height": 1334,
-        "paddingBottom": 49,
-        "scale": 2,
-        "statusBarHeight": null,
-        "width": 750,
-      }
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 49,
+        },
+        {
+          "fontScale": 2,
+          "height": 1334,
+          "scale": 2,
+          "statusBarHeight": null,
+          "width": 750,
+        },
+      ]
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+  | Animated.AnimatedInterpolation<number>
+  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation =>
+): Animated.AnimatedInterpolation<number> =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/VideoModal/hooks/useModalSize.ts

@@ -14,6 +14,7 @@ import {
   isAndroidVersionAtLeast,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { StatusBar } from "react-native";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const { Logger } = getXray();
 
@@ -32,7 +33,8 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
-const isOldAndroidDevice = !isAndroidVersionAtLeast(35) && isAndroidPlatform();
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
 
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { act, create as render } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 
 import { ViewportAware } from "../";
 import { ViewportTracker } from "../../ViewportTracker";
@@ -12,21 +12,17 @@ import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
-jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
-  return {
-    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
-    measureLayout: (handle, parent, error, success) => {
-      success(100, 100, 400, 400);
-    },
-  };
-});
+const { ScrollView } = ReactNative;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
 
-const { ScrollView } = ReactNative;
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
+
+ReactNative.findNodeHandle = () => 1234;
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -138,7 +134,7 @@ describe("<ViewportAware />", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(onViewportEnter).toHaveBeenCalled();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 
@@ -179,7 +175,7 @@ describe("<ViewportAware />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
 
-    const scrollviews = wrapper.root.findAllByType(ScrollView);
+    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 

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

@@ -1,14 +1,19 @@
 import * as React from "react";
-import { ScrollView } from "react-native";
-import TestRenderer, { act } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 import { ViewportEvents } from "../../ViewportEvents";
+import ReactNative from "react-native";
+
+const { ScrollView } = ReactNative;
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -23,32 +28,49 @@ const event = {
 };
 
 describe("<ViewportTracker />", () => {
-  // eslint-disable-next-line react/prop-types
-  const ReactWrapper = ({ children }) => (
-    <ViewportTracker viewportEventsManager={viewportEventsManager}>
-      <ScrollView>{children}</ScrollView>
-    </ViewportTracker>
-  );
-
-  const wrapper = TestRenderer.create(
-    <ReactWrapper>
-      <TestComponent />
-    </ReactWrapper>
-  );
-
-  const scrollView = wrapper.root.findByType(ScrollView);
-
   beforeEach(() => {
     viewportEventSpy.mockClear();
   });
 
   it("renders correctly", () => {
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(scrollView.props).toMatchSnapshot();
   });
 
   it("notifies viewport listeners when layout changes", () => {
-    act(() => scrollView.props.onLayout(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+    });
 
     expect(viewportEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -63,12 +85,50 @@ describe("<ViewportTracker />", () => {
   });
 
   it("notifies viewport listeners when content scrolls", () => {
-    act(() => scrollView.props.onScroll(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onScroll(event);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 
   it("notifies viewport listeners when content size changes", () => {
-    act(() => scrollView.props.onContentSizeChange(100, 100));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onContentSizeChange(100, 100);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 });

package/Decorators/ConfigurationWrapper/withConfigurationProvider.tsx

@@ -21,13 +21,13 @@ const prepareConfiguration = (
   keys: [string]
 ) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);
 
+const configurationKeys = R.keys(keysMap);
+
 export function withConfigurationProvider(Component: React.ComponentType<any>) {
   return function WithConfigurationProvider(props: Props) {
     const styles = props?.screenData?.styles;
     const general = props?.screenData?.general;
 
-    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);
-
     const configuration = React.useMemo(
       () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
       []

package/Decorators/RiverFeedLoader/index.tsx

@@ -13,6 +13,7 @@ import {
   loadDatasources,
   usePipesContexts,
 } from "./utils";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -25,7 +26,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
   return function WrappedWithRiverFeedLoader(props: RiverProps) {
     const { river } = props;
     const { screenData, pathname } = useRoute();
-
+    const resolvers = useScreenResolvers();
     const pipesContexts = usePipesContexts(river.id, pathname);
 
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
@@ -49,7 +50,12 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         item?.filter((item2) => item2 !== undefined)
       );
 
-      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
+      loadDatasources(
+        nonEmptyDataSources,
+        river?.id,
+        props.dispatch,
+        resolvers
+      );
     }, []);
 
     return <Component {...props} />;