@applicaster/zapp-react-native-ui-components 12.0.0-rc.98 → 12.0.1

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { fireEvent } from "@testing-library/react-native";
+
+const mockUseIsRTL = jest.fn(() => true);
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const BarView = require("../BarView").default;
+
+describe("BarView", () => {
+  const screenStyles = {
+    title_font_color: "#000",
+    title_font_android: "Roboto",
+    title_font_ios: "San Francisco",
+    title_font_size: "16",
+    background_color: "#fff",
+  };
+
+  const barState = {
+    backHandler: jest.fn(),
+    closeHandler: jest.fn(),
+    title: "Test Title",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByText } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByText("Test Title")).toBeTruthy();
+  });
+
+  it("applies RTL styles when isRTL is true", () => {
+    mockUseIsRTL.mockReturnValue(true);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("does not apply RTL styles when isRTL is false", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+      transform: [{ scaleX: -1 }],
+    });
+  });
+
+  it("calls closeHandler when CloseButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("closeButton-actionButton-touchable"));
+    expect(barState.closeHandler).toHaveBeenCalled();
+  });
+
+  it("calls backHandler when BackButton is pressed", () => {
+    mockUseIsRTL.mockReturnValue(false);
+
+    const { getByTestId } = renderWithProviders(
+      <BarView screenStyles={screenStyles} barState={barState} />
+    );
+
+    fireEvent.press(getByTestId("backButton-actionButton-touchable"));
+    expect(barState.backHandler).toHaveBeenCalled();
+  });
+});

package/Components/ZappFrameworkComponents/Buttons/ActionButton.tsx

@@ -28,7 +28,7 @@ styles: {
 }
 */
 
-type ActionButtonProps = {
+type ActionButtonProps = Testable & {
   onPress: () => void;
   buttonStyles: any;
   imageUrl: string;
@@ -46,11 +46,16 @@ const ActionButton = ({
   buttonStyles,
   imageUrl,
   imageStyle = closeButtonStyle,
+  testID,
 }: ActionButtonProps) => {
   return (
-    <View style={buttonStyles}>
-      <TouchableOpacity onPress={onPress}>
-        <Image source={{ uri: imageUrl }} style={imageStyle} />
+    <View style={buttonStyles} testID={testID}>
+      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
+        <Image
+          source={{ uri: imageUrl }}
+          style={imageStyle}
+          testID={`${testID}-image`}
+        />
       </TouchableOpacity>
     </View>
   );

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,5 +1,6 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
+import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -31,16 +32,19 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = () => {
+  const getCachedDimensions = useCallback(() => {
     return dimensions[id] || initialDimensions();
-  };
+  }, [dimensions?.[id], id]);
 
-  const handleSetCachedDimensions = (newDimensions) => {
+  const handleSetCachedDimensions = useCallback((newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  };
-
-  return {
-    getCachedDimensions,
-    setCachedDimensions: handleSetCachedDimensions,
-  };
+  }, []);
+
+  return useMemo(
+    () => ({
+      getCachedDimensions,
+      setCachedDimensions: handleSetCachedDimensions,
+    }),
+    [getCachedDimensions, handleSetCachedDimensions]
+  );
 };

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/Contexts/ScreenContext/index.tsx

@@ -177,7 +177,12 @@ export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
     return (
       <ScreenContext.Consumer>
-        {(value) => <Component {...props} screenContext={value} />}
+        {useCallback(
+          (value) => (
+            <Component {...props} screenContext={value} />
+          ),
+          [Component, props]
+        )}
       </ScreenContext.Consumer>
     );
   };

package/const.ts

@@ -1,3 +1,5 @@
+import { ViewStyle } from "react-native";
+
 export const tvPluginsWithCellRenderer = [
   "group-qb",
   "gallery-qb",
@@ -5,3 +7,7 @@ export const tvPluginsWithCellRenderer = [
   "hero-qb",
   "list-qb",
 ];
+
+// Can't be used in StyleSheet.create, need to be inline/defined as a constant
+// https://github.com/necolas/react-native-web/issues/1427
+export const flatListOverflowStyle: ViewStyle = { overflow: "visible" };

package/index.js

@@ -1,3 +1,6 @@
 import * as QuickBrickComponents from "./Components";
+import { flatListOverflowStyle } from "./const";
+
+export { flatListOverflowStyle };
 
 export default QuickBrickComponents;

package/package.json

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

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};