@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.1089439460

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/utils/index.ts

@@ -0,0 +1,23 @@
+import { ReplaySubject } from "rxjs";
+import { pairwise, filter, first } from "rxjs/operators";
+
+// we are interested in last 2 events, because we wait transition from <false> to <true>
+const screenRevealManagerSubject$ = new ReplaySubject<boolean>(2);
+
+export const emitScreenRevealManagerIsReadyToShow = () => {
+  screenRevealManagerSubject$.next(true);
+};
+
+export const emitScreenRevealManagerIsNotReadyToShow = () => {
+  screenRevealManagerSubject$.next(false);
+};
+
+export const waitUntilScreenRevealManagerIsReady = () => {
+  return screenRevealManagerSubject$.pipe(
+    pairwise(), // emit consecutive pairs: [prev, curr]
+    filter(
+      ([previousIsReady, currentIsReady]) => !previousIsReady && currentIsReady
+    ), // detect transition from not_ready to ready
+    first()
+  );
+};

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Animated, StyleSheet } from "react-native";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import { ScreenRevealManager } from "./ScreenRevealManager";
+import {
+  emitScreenRevealManagerIsReadyToShow,
+  emitScreenRevealManagerIsNotReadyToShow,
+} from "./utils";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
+});
+
+export const TIMEOUT = 300; // 300 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 [isContentReadyToBeShown, setIsContentReadyToBeShown] =
+      React.useState(false);
+
+    const [isShowOverlay, setIsShowOverlay] = React.useState(true);
+
+    const theme = useTheme<BaseThemePropertiesTV>();
+
+    const handleSetIsContentReadyToBeShown = React.useCallback(() => {
+      setIsContentReadyToBeShown(true);
+    }, []);
+
+    const managerRef = useRefWithInitialValue<ScreenRevealManager>(
+      () =>
+        new ScreenRevealManager(
+          componentsToRender,
+          handleSetIsContentReadyToBeShown
+        )
+    );
+
+    const opacityRef = useRefWithInitialValue<Animated.Value>(
+      () => new Animated.Value(SHOWN)
+    );
+
+    React.useEffect(() => {
+      if (!isContentReadyToBeShown) {
+        emitScreenRevealManagerIsNotReadyToShow();
+      } else {
+        emitScreenRevealManagerIsReadyToShow();
+      }
+    }, [isContentReadyToBeShown]);
+
+    React.useEffect(() => {
+      if (isContentReadyToBeShown) {
+        Animated.timing(opacityRef.current, {
+          toValue: HIDDEN,
+          duration: TIMEOUT,
+          useNativeDriver: true,
+        }).start(() => {
+          setIsShowOverlay(false);
+        });
+      }
+    }, [isContentReadyToBeShown]);
+
+    if (isFirstComponentScreenPicker(componentsToRender)) {
+      // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
+      return <Component {...props} />;
+    }
+
+    return (
+      <>
+        <Component
+          {...props}
+          initialNumberToLoad={
+            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+          }
+          onLoadFinishedFromScreenRevealManager={
+            managerRef.current.onLoadFinished
+          }
+          onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
+        />
+        {isShowOverlay ? (
+          <Animated.View
+            style={[
+              styles.container,
+              {
+                opacity: opacityRef.current,
+                backgroundColor: theme.app_background_color,
+              },
+            ]}
+            testID="animated-component"
+          />
+        ) : null}
+      </>
+    );
+  };
+};

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 {
@@ -63,7 +62,7 @@ const TabsComponent = ({
   );
 
   const renderItem = useCallback(
-    ({ item, index, focused }) => {
+    ({ item, index, focused }: { item: any; index: any; focused?: any }) => {
       const itemId = generateFocusableId(getId(item));
 
       const isSelected = R.equals(index, selectedEntryIndex);
@@ -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/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,6 +2,19 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
+  accessibilityProps={
+    {
+      "accessibilityHint": "Enter text into Search",
+      "accessibilityLabel": "Search",
+      "accessibilityRole": "searchbox",
+      "accessible": true,
+      "aria-description": "Enter text into Search",
+      "aria-label": "Search",
+      "aria-role": "searchbox",
+      "role": "searchbox",
+      "tabindex": 0,
+    }
+  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,6 +4,7 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -42,6 +43,8 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -153,6 +156,13 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
+  const getAccessibilityProps = () => {
+    return {
+      accessibilityProps:
+        accessibilityManager.getInputAccessibilityProps("Search"),
+    };
+  };
+
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -161,6 +171,7 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
+    ...getAccessibilityProps(),
   };
 
   if (

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/Touchable/__tests__/touchable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { create, act } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { Touchable } from "..";
 
@@ -23,38 +23,31 @@ describe("<Touchable />", () => {
     });
 
     it("has accessible flag set to false", () => {
-      let wrapper;
+      const { toJSON, UNSAFE_getByType } = render(<Touchable {...props} />);
 
-      act(() => {
-        wrapper = create(<Touchable {...props} />);
-      });
-
-      const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
+      expect(toJSON()).toMatchSnapshot();
       expect(touchableWrapper.props).toHaveProperty("accessible", false);
     });
   });
 
   describe("when not running in automated tests environment", () => {
-    let wrapper;
-
-    act(() => {
-      wrapper = create(<Touchable {...props} />);
-    });
-
-    const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-
     beforeEach(props.onPress.mockClear);
 
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Touchable {...props} />);
+      expect(toJSON()).toMatchSnapshot();
     });
 
     it("has accessible flag set to true", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("accessible", true);
     });
 
     it("assigns testID and accessibilityLabel props correctly", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("testID", props.testID);
 
       expect(touchableWrapper.props).toHaveProperty(
@@ -64,6 +57,8 @@ describe("<Touchable />", () => {
     });
 
     it("calls the onPress event when it is pressed", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       touchableWrapper.props.onPress();
       expect(props.onPress).toHaveBeenCalledTimes(1);
     });

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/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   <View>
     <View
       collapsable={false}
+      renderToHardwareTextureAndroid={false}
       style={
         {
           "opacity": 1,

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],