@applicaster/zapp-react-native-ui-components 12.0.0-rc.3 → 12.0.0-rc.30

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -35,13 +35,11 @@ exports[`PlayerWrapper renders inline 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 421.875,
-          "width": 300,
+          "aspectRatio": 1.7777777777777777,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 431.875,
-        },
         Object {},
       ]
     }
@@ -105,13 +103,11 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "zIndex": 200,
         },
         Object {
+          "aspectRatio": undefined,
           "height": 50,
-          "width": 300,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 50,
-        },
         Object {},
       ]
     }
@@ -163,13 +159,11 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 109.6875,
+          "aspectRatio": 1.7777777777777777,
+          "height": undefined,
           "width": 195,
         },
         Object {},
-        Object {
-          "height": 119.6875,
-        },
         Object {},
       ]
     }
@@ -233,13 +227,11 @@ exports[`PlayerWrapper renders properly 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "aspectRatio": 1.7786666666666666,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 800,
-        },
         Object {},
       ]
     }

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
@@ -39,13 +39,22 @@ export const useModalSize = (): Size => {
     MODAL_SIZE_FOR_PORTRAIT
   );
 
-  const setNewModalSize = (size, log) => {
-    setModalSize(size);
+  const setNewModalSize = React.useCallback((newSize, log) => {
+    setModalSize((oldSize) => {
+      if (
+        oldSize.height === newSize.height &&
+        oldSize.width === newSize.width
+      ) {
+        return oldSize;
+      }
+
+      return newSize;
+    });
 
     logger.debug({
       message: log,
     });
-  };
+  }, []);
 
   const isTabletLandscape = useIsTabletLandscape();
 

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/__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/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/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/ScreenContext/index.tsx

@@ -1,13 +1,12 @@
 import React, { createContext, ReactNode, useMemo, useState } from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useCurrentScreenData,
   useNavigation,
   useRoute,
+  isNavBarVisible,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { isNavBarVisible } from "../../Components/Screen/navigationHandler";
 
 type ScreenContextType = {
   navBar: {
@@ -42,8 +41,6 @@ export function ScreenContextProvider({
 }) {
   const { data, modalData, videoModalState, canGoBack } = useNavigation();
 
-  const { rivers: _rivers } = usePickFromState(["rivers", "plugins"]);
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state

package/Decorators/RiverResolver/index.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
 
-import type {
-  ZappComponent,
-  ZappRivers,
-} from "@applicaster/zapp-react-native-flow-types";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

package/Decorators/index.tsx

@@ -1,9 +1,5 @@
 import { zappPipesDataConnector } from "./ZappPipesDataConnector";
 import * as R from "ramda";
-import type {
-  ZappComponent,
-  ZappDecorator,
-} from "@applicaster/zapp-react-native-flow-types";
 
 import { withNavigator } from "./Navigator";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.3",
+  "version": "12.0.0-rc.30",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,16 +29,15 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "@types/react": "17.0.2",
     "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.3",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.3",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.3",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.3",
+    "@applicaster/applicaster-types": "12.0.0-rc.30",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.30",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.30",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.30",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",