@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1150285364 → 13.0.0-alpha.1199723621

package/Components/Tabs/Tab.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-native/no-unused-styles */
 import React from "react";
 import * as R from "ramda";
-import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import {
-  getStyleForPlatform,
   applyStringTransformation,
+  getStyleForPlatform,
 } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 type Props = {
@@ -148,7 +148,9 @@ const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
           <Text numberOfLines={1} style={styles.label}>
             {tabTitle}
           </Text>
-          {selected && <View testID="underline" style={styles.underline} />}
+          {selected ? (
+            <View testID="underline" style={styles.underline} />
+          ) : null}
         </View>
       </View>
     </TouchableWithoutFeedback>

package/Components/TextInputTv/index.tsx

@@ -174,7 +174,8 @@ function TextInputTV(props: Props, ref) {
 
   return isWebPlatform ? (
     <>
-      {additional && additional()}
+      {additional ? additional() : null}
+      {/* eslint-disable-next-line react/no-unknown-property */}
       <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (

package/Components/Transitioner/Scene.tsx

@@ -105,7 +105,7 @@ function SceneComponent({
       style={[style, contentStyle, dimensions]}
     >
       {children}
-      {isAnimating && <Animated.View style={overlayStyle} />}
+      {isAnimating ? <Animated.View style={overlayStyle} /> : null}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity, isNil } from "ramda";
+import { append, compose, identity, isNil, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -289,7 +289,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        {scenes[to.index] && (
+        {scenes[to.index] ? (
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
@@ -301,7 +301,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           >
             {scenes[to.index].children}
           </Scene>
-        )}
+        ) : null}
       </View>
     );
   }

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
+import { Scene } from "../Scene";
 
 const overlayStyle = { opacity: 1 };
 const contentStyle = { paddingBottom: 49 };
@@ -23,28 +24,38 @@ jest.mock(
   })
 );
 
-const { Scene } = require("../Scene");
+jest.mock("../../../Contexts/PathnameContext", () => ({
+  PathnameContext: jest.requireActual("react").createContext({ pathname: "" }),
+}));
 
-const wrapper = shallow(
-  <Scene
-    style={style}
-    overlayStyle={overlayStyle}
-    contentStyle={contentStyle}
-  />
-);
+jest.mock("../../../Contexts/ScreenDataContext", () => ({
+  ScreenDataContext: jest.requireActual("react").createContext({}),
+}));
+
+jest.mock("../../../Contexts/ScreenContext", () => ({
+  ScreenContextProvider: jest.requireActual("react-native").View,
+}));
 
 describe("<Scene />", () => {
+  const wrapper = render(
+    <Scene
+      style={style}
+      overlayStyle={overlayStyle}
+      contentStyle={contentStyle}
+    />
+  );
+
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   // skipped - this isn't a very useful test, and it doesn't work as it used to on the new version of RN
   it.skip("renders children surrounded by AnimatedComponent", () => {
-    expect(shallowToJson(wrapper).type).toEqual("AnimatedComponent");
+    expect(wrapper.toJSON()).toEqual("AnimatedComponent");
   });
 
   it("renders the overlay while animating", () => {
-    const wrapperWithOverlay = shallow(
+    const wrapperWithOverlay = render(
       <Scene
         style={style}
         overlayStyle={overlayStyle}
@@ -53,6 +64,6 @@ describe("<Scene />", () => {
       />
     );
 
-    expect(shallowToJson(wrapperWithOverlay)).toMatchSnapshot();
+    expect(wrapperWithOverlay.toJSON).toMatchSnapshot();
   });
 });

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

@@ -1,79 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Scene /> renders correctly 1`] = `
-<CurrentScreenContextProvider
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    contentStyle={
-      {
-        "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
-      {
-        "opacity": 1,
-      }
-    }
+<View>
+  <View
+    collapsable={false}
+    pointerEvents="auto"
     style={
       {
         "flex": 1,
-      }
-    }
-  />
-</CurrentScreenContextProvider>
-`;
-
-exports[`<Scene /> renders the overlay while animating 1`] = `
-<CurrentScreenContextProvider
-  animating={true}
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    animating={true}
-    contentStyle={
-      {
+        "fontScale": 2,
+        "height": 1334,
         "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
-      {
-        "opacity": 1,
-      }
-    }
-    style={
-      {
-        "flex": 1,
+        "scale": 2,
+        "statusBarHeight": null,
+        "width": 750,
       }
     }
   />
-</CurrentScreenContextProvider>
+</View>
 `;
+
+exports[`<Scene /> renders the overlay while animating 1`] = `[Function]`;

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

@@ -9,7 +9,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
     }
   }
 >
-  <SceneComponent
+  <View
     isActive={true}
     screenUniqueId="mocked-uuid"
     style={{}}
@@ -23,6 +23,6 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
         children
       </Text>
     </View>
-  </SceneComponent>
+  </View>
 </View>
 `;

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,9 +1,18 @@
 import React from "react";
 import { Text, View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
 
 import { TransitionerComponent } from "../Transitioner";
+import { render } from "@testing-library/react-native";
+
+jest.mock("../Scene", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return {
+    Scene(props) {
+      return <View {...props} />;
+    },
+  };
+});
 
 const children = (
   <View foo="bar">
@@ -33,12 +42,12 @@ jest.mock("uuid");
 
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <TransitionerComponent {...transitionerComponentProps}>
         {children}
       </TransitionerComponent>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,6 +1,7 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
+import { useEffect } from "react";
 
 import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -25,7 +26,6 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
-import { useEffect } from "react";
 
 const { log_error, log_debug } = loggerLiveImageComponent;
 
@@ -330,7 +330,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       onPositionUpdated={onPositionUpdated}
     >
       <View ref={trackViewRef}>
-        {isVideoMode && (
+        {isVideoMode ? (
           <Player
             autoplay={false}
             ref={_assignRoot}
@@ -342,7 +342,7 @@ const PlayerLiveImageComponent = (props: Props) => {
             resizeMode={"cover"}
             {...platformSpecificProps}
           />
-        )}
+        ) : null}
         {
           <AnimatedInOut
             visible={isBackgroundImageVisible}

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,26 +1,26 @@
 import React from "react";
-import { Animated, StyleSheet, View, Platform } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
+  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
   TapGestureHandler,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 
 import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 
 import {
-  setScrollModalAnimatedValue,
   resetScrollAnimatedValues,
+  setScrollModalAnimatedValue,
 } from "./utils";
 
 const getAnimatedConfig = (toValue) => {
@@ -71,8 +71,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     useNavigation();
 
   const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
@@ -84,7 +84,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     !isSeekBarTouch &&
-    (isMaximazedModal || isMinimizedModal);
+    (isMaximizedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
@@ -346,6 +346,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     []
   );
 
+  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
+
   return (
     <Wrapper style={generalStyles.container}>
       <TapGestureHandler
@@ -359,7 +361,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
-            shouldCancelWhenOutside={isMaximazedModal}
+            shouldCancelWhenOutside={isMaximizedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
@@ -371,9 +373,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                 simultaneousHandlers={panHandlerRef}
               >
                 <Animated.ScrollView
-                  scrollEnabled={
-                    isMaximazedModal && isNotMinimizeMaximazeAnimation
-                  }
+                  scrollEnabled={scrollEnabled}
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -4,26 +4,26 @@ import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import {
+  useDimensions,
   useGetBottomTabBarHeight,
   useNavigation,
-  useDimensions,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
-  gestureListenerHelper,
-  getAnimationStyle,
+  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  ComponentAnimationType,
   defaultAspectRatioWidth,
+  gestureListenerHelper,
   getAnimationDefaultValue,
-  ComponentAnimationType,
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  getAnimationStyle,
 } from "./utils";
 
 type Props = {
@@ -405,7 +405,7 @@ export const AnimationView = ({
 
   return (
     <Animated.View
-      onLayout={additionalData.useLayoutMeasure && measureView}
+      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
       ref={animationComponentRef}
       style={[
         ...preparedStyles,

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from "react";
 import {
-  StyleProp,
-  ViewStyle,
   Animated,
-  Easing,
   Dimensions,
+  Easing,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
@@ -90,17 +91,19 @@ export const PlayerDetails = ({
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
-          width: isTablet ? undefined : SCREEN_WIDTH,
+          width: isTablet
+            ? undefined
+            : (StyleSheet.flatten(style)?.width ?? SCREEN_WIDTH),
         },
       ]}
     >
-      {screenData && (
+      {screenData ? (
         <ComponentsMap
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -227,7 +227,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {isShowPlayerDetails && (
+          {isShowPlayerDetails ? (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}
@@ -240,7 +240,7 @@ const PlayerWrapperComponent = (props: Props) => {
                 isTablet={isTablet}
               />
             </AnimationComponent>
-          )}
+          ) : null}
         </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>

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

@@ -33,45 +33,33 @@ exports[`<ViewportAware /> invokes the onViewportLeave function when leaving the
 `;
 
 exports[`<ViewportAware /> passes the correct view port flag 1`] = `
-<ForwardRef(ViewportAwareComponent)
-  onViewportEnter={[Function]}
-  onViewportLeave={[Function]}
-  preTriggerRatio={0.1}
+<RCTScrollView
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onScroll={[Function]}
 >
-  <ScrollView
-    testID="test-component-false"
-  />
-</ForwardRef(ViewportAwareComponent)>
+  <View>
+    <RCTScrollView
+      testID="test-component-false"
+    >
+      <View />
+    </RCTScrollView>
+  </View>
+</RCTScrollView>
 `;
 
 exports[`<ViewportAware /> renders its children correctly 1`] = `
-<ContextProvider
-  value={
-    ViewportEvents {
-      "firesLastEventOnAdd": true,
-      "lastEvent": null,
-      "listeners": [],
-      "notify": [Function],
-    }
-  }
+<RCTScrollView
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onScroll={[Function]}
 >
-  <ViewportTracker
-    viewportEventsManager={
-      ViewportEvents {
-        "firesLastEventOnAdd": true,
-        "lastEvent": null,
-        "listeners": [],
-        "notify": [Function],
-      }
-    }
-  >
-    <ScrollView>
-      <TestComponent
-        onViewportEnter={[MockFunction]}
-        onViewportLeave={[MockFunction]}
-        preTriggerRatio={0.1}
-      />
-    </ScrollView>
-  </ViewportTracker>
-</ContextProvider>
+  <View>
+    <RCTScrollView
+      testID="test-component-false"
+    >
+      <View />
+    </RCTScrollView>
+  </View>
+</RCTScrollView>
 `;

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

@@ -2,11 +2,13 @@
 
 import * as React from "react";
 
-import { shallow } from "enzyme";
-import { create, act } from "react-test-renderer";
-import { shallowToJson } from "enzyme-to-json";
+import { act, create as render } from "react-test-renderer";
+
+import { ViewportAware } from "../";
+import { ViewportTracker } from "../../ViewportTracker";
 
 import { ViewportEvents } from "../../ViewportEvents";
+import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
@@ -24,17 +26,10 @@ jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
   findNodeHandle: () => 1234,
 }));
 
-const ReactNative = require("react-native");
-
-const { Animated, ScrollView } = ReactNative;
-
-Animated.timing = jest.fn(() => ({ start: jest.fn() }));
+const { ScrollView } = ReactNative;
 
 const viewportEventsManager = new ViewportEvents(true);
 
-const { ViewportAware } = require("../");
-const { ViewportTracker } = require("../../ViewportTracker");
-
 const TestComponent = (props) => {
   const {
     preTriggerRatio,
@@ -90,7 +85,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("renders its children correctly", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}
@@ -100,11 +95,11 @@ describe("<ViewportAware />", () => {
       ))
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("passes the correct view port flag", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}
@@ -114,12 +109,11 @@ describe("<ViewportAware />", () => {
       ))
     );
 
-    const testComponentWrapper = wrapper.find(TestComponent);
-    expect(shallowToJson(testComponentWrapper.shallow())).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("invokes the onViewportEnter function when entering the viewport", () => {
-    const wrapper = create(
+    const wrapper = render(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}
@@ -156,7 +150,7 @@ describe("<ViewportAware />", () => {
   });
 
   it("invokes the onViewportLeave function when leaving the viewport", () => {
-    const wrapper = create(
+    const wrapper = render(
       getWrapper(() => (
         <TestComponent
           preTriggerRatio={0.1}