@applicaster/zapp-react-native-ui-components 14.0.0-alpha.1539862321 → 14.0.0-alpha.1574463810

package/Components/River/TV/withPipesV1DataLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { path } from "ramda";
+
+import {
+  useFeedLoader,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  screenId: string;
+  screenData: ZappRiver | ZappEntry;
+  feedUrl?: string;
+  river?: ZappRiver | ZappEntry;
+};
+
+export const withPipesV1DataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithPipesV1DataLoaderComponent(props: Props) {
+    const { screenId, feedUrl } = props;
+
+    const rivers = useRivers();
+
+    const river = React.useMemo(() => rivers?.[screenId], [screenId]);
+
+    const screenData = React.useMemo(
+      () => props.screenData || props.river || river,
+      [screenId]
+    );
+
+    const connectedScreenUrl = useMemo(() => {
+      // Avoid using feedUrl or content.src on layouts v2
+
+      return feedUrl || path(["content", "src"], screenData);
+    }, [feedUrl, screenData]);
+
+    const { data: feedData } = useFeedLoader({
+      feedUrl: connectedScreenUrl,
+    });
+
+    return <WrappedComponent {...props} feedData={feedData} />;
+  };
+};

package/Components/River/TV/withRiverDataLoader.tsx

@@ -0,0 +1,17 @@
+import { useLayoutVersion } from "@applicaster/zapp-react-native-utils/reactHooks";
+import React from "react";
+import { withPipesV1DataLoader } from "./withPipesV1DataLoader";
+
+export const withRiverDataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithRiverDataLoaderComponent(props) {
+    const isV2 = useLayoutVersion({ isV2: true });
+
+    if (isV2) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return withPipesV1DataLoader(WrappedComponent)(props);
+  };
+};

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (_, event) => {
+    const remoteHandler = (event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -159,6 +159,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -174,6 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {
@@ -141,8 +152,6 @@ const screenProps = {
 const { Screen } = require("..");
 
 describe("<Screen Component />", () => {
-  let wrapper;
-
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
@@ -150,26 +159,16 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    beforeEach(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      act(() => {
-        wrapper = create(<Screen {...screenProps} />);
-      });
-
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -0,0 +1,76 @@
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { once } from "ramda";
+
+const INITIAL_NUMBER_TO_LOAD = 3;
+
+// Infer the values of COMPONENT_LOADING_STATE as a type
+type ComponentLoadingState =
+  (typeof COMPONENT_LOADING_STATE)[keyof typeof COMPONENT_LOADING_STATE];
+
+export const COMPONENT_LOADING_STATE = {
+  UNKNOWN: "UNKNOWN",
+  LOADED_WITH_SUCCESS: "LOADED_WITH_SUCCESS",
+  LOADED_WITH_FAILURE: "LOADED_WITH_FAILURE",
+} as const;
+
+// Function to get the number of loaded components
+const getNumberOfLoaded = (states: ComponentLoadingState[]): number => {
+  return states.filter((value) => value !== COMPONENT_LOADING_STATE.UNKNOWN)
+    .length;
+};
+
+const getNumberOfComponentsWaitToLoadBeforePresent = (
+  componentsToRender: ZappUIComponent[]
+): number => {
+  // when Gallery is the first component, no need to wait the others
+  if (isFirstComponentGallery(componentsToRender)) {
+    return 1;
+  }
+
+  return Math.min(INITIAL_NUMBER_TO_LOAD, componentsToRender.length);
+};
+
+export class ScreenRevealManager {
+  public numberOfComponentsWaitToLoadBeforePresent: number;
+  private renderingState: Array<ComponentLoadingState>;
+  private callback: Callback;
+
+  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+    this.numberOfComponentsWaitToLoadBeforePresent =
+      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+
+    this.renderingState = makeListOf<ComponentLoadingState>(
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      this.numberOfComponentsWaitToLoadBeforePresent
+    );
+
+    this.callback = once(callback);
+  }
+
+  onLoadFinished = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  onLoadFailed = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  setIsReadyToShow = (): void => {
+    this.callback();
+  };
+}

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/Tabs/Tabs.tsx

@@ -158,12 +158,11 @@ const TabsComponent = ({
 
   const renderItem = React.useCallback(
     ({ item, index, item: { id } }: RenderItemProps) => (
-      <>
+      <React.Fragment key={id}>
         <Tab
           ref={(ref) => {
             tabRefs.current[index] = ref;
           }}
-          key={id}
           {...{
             title: getTitle(item),
             id,
@@ -177,7 +176,7 @@ const TabsComponent = ({
         {display_mode === "fractional" &&
           index !== tabs?.length - 1 &&
           renderGutter()}
-      </>
+      </React.Fragment>
     ),
     [tabs, display_mode, configuration, onTabPress, getTitle, getSelectedItem]
   );

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}