@applicaster/zapp-react-native-ui-components 12.0.0-rc.7 → 12.0.0-rc.9

package/Components/River/useScreenConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { useMemo } from "react";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -47,7 +47,7 @@ const stylingKeys = [
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
   const { rivers } = usePickFromState(["rivers"]);
-  const { deviceInfo } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   return useMemo(() => {
     const config = {} as ScreenConfiguration;
@@ -56,8 +56,7 @@ export function useScreenConfiguration(screenId: string): ScreenConfiguration {
     if (screenData) {
       const { styles } = screenData;
 
-      const keyPrefix =
-        deviceInfo?.isTablet && styles?.tablet_theme ? "tablet_" : "";
+      const keyPrefix = isTablet && styles?.tablet_theme ? "tablet_" : "";
 
       stylingKeys.forEach(([key, castFn]) => {
         const styleKey = `${keyPrefix}${key}`;

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

@@ -2,8 +2,6 @@ import * as React from "react";
 import { View } from "react-native";
 import { create, act } from "react-test-renderer";
 
-import { ORIENTATIONS } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
@@ -144,44 +142,44 @@ describe("<Screen Component />", () => {
     });
   });
 
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
+  // it("invokes the orientation hook when the route changes", () => {
+  //   act(() => {
+  //     wrapper = create(<Screen {...screenProps} />);
+  //   });
+
+  //   // @ts-ignore
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //     plugin_type: "player",
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(
+  //       <Screen
+  //         {...screenProps}
+  //         pathname="/playable"
+  //         screenData={{
+  //           id: "player-testId",
+  //           general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //           plugin_type: "player",
+  //         }}
+  //       />
+  //     );
+  //   });
+
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(<Screen {...screenProps} />);
+  //   });
+
+  //   expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
+  //     1,
+  //     ORIENTATIONS.landscapeSensor
+  //   );
+  // });
 });

package/Components/Screen/orientationHandler.ts

@@ -8,7 +8,7 @@ import {
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -9,7 +9,7 @@ import {
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.7",
+  "version": "12.0.0-rc.9",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -35,10 +35,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.7",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.7",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.7",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.7",
+    "@applicaster/applicaster-types": "12.0.0-rc.9",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.9",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.9",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.9",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",