@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -3,19 +3,21 @@
 exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
 <View
   style={
-    {
-      "borderRadius": 10,
-      "height": 100,
-      "width": 100,
-    }
+    [
+      {
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      },
+      {
+        "height": 100,
+        "width": 100,
+      },
+    ]
   }
+  testID="secondary-image-fixed"
 >
   <Image
-    displayMode="fixed"
-    fitPosition="center"
-    fixedHeight={100}
-    fixedWidth={100}
-    imageSizing="fill"
     source={
       {
         "uri": "someUrl",
@@ -29,7 +31,6 @@ exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async r
         "width": 100,
       }
     }
-    uri="someUrl"
   />
 </View>
 `;
@@ -44,20 +45,20 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 <View
   onLayout={[Function]}
   style={
-    {
-      "borderRadius": 10,
-      "height": 100,
-      "width": 100,
-    }
+    [
+      {
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      },
+      {
+        "height": 100,
+        "width": 100,
+      },
+    ]
   }
 >
   <Image
-    displayMode="dynamic"
-    fitPosition="center"
-    fixedHeight={0}
-    fixedWidth={0}
-    imageSizing="fill"
-    onAsyncRender={[Function]}
     source={
       {
         "uri": "someUrl",
@@ -71,7 +72,6 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
-    uri="someUrl"
   />
 </View>
 `;
@@ -79,19 +79,21 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
 <View
   style={
-    {
-      "borderRadius": 10,
-      "height": 100,
-      "width": 100,
-    }
+    [
+      {
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      },
+      {
+        "height": 100,
+        "width": 100,
+      },
+    ]
   }
+  testID="secondary-image-fixed"
 >
   <Image
-    displayMode="fixed"
-    fitPosition="center"
-    fixedHeight={100}
-    fixedWidth={100}
-    imageSizing="fill"
     source={
       {
         "uri": "someUrl",
@@ -105,7 +107,6 @@ exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with
         "width": 100,
       }
     }
-    uri="someUrl"
   />
 </View>
 `;
@@ -113,11 +114,18 @@ exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with
 exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
 <View
   style={
-    {
-      "borderRadius": 5,
-      "height": 100,
-      "width": 100,
-    }
+    [
+      {
+        "borderRadius": 5,
+        "height": 100,
+        "width": 100,
+      },
+      {
+        "height": 100,
+        "width": 100,
+      },
+    ]
   }
+  testID="secondary-image-fixed"
 />
 `;

package/Components/MasterCell/DefaultComponents/SecondaryImage/hooks/__tests__/useGetImageDimensions.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 import { useGetImageDimensions } from "../useGetImageDimensions";
@@ -13,15 +13,16 @@ jest.spyOn(Image, "getSize").mockImplementation((_uri, success) => {
 
 describe("useGetImageDimensions", () => {
   it("should return aspect ration initially when known dimensions", async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useGetImageDimensions("https://some_url.com", WIDTH, undefined)
     );
 
     expect(result.current).toBeUndefined();
-    await waitForNextUpdate();
 
-    expect(result.current).toEqual(
-      getDimension({ width: WIDTH, height: HEIGTH })
-    );
+    await waitFor(() => {
+      expect(result.current).toEqual(
+        getDimension({ width: WIDTH, height: HEIGTH })
+      );
+    });
   });
 });

package/Components/MasterCell/DefaultComponents/SecondaryImage/utils.ts

@@ -1,27 +1,30 @@
 import { identity, isNil } from "ramda";
 import {
   POSITION_OVER_IMAGE,
-  DISPLAY_MODE_DYNAMIC,
   DISPLAY_MODE_FIXED,
   VISIBILITY_ALWAYS,
   VISIBILITY_DEFAULT,
   VISIBILITY_FOCUSED,
   IMAGE_POSITION,
   IMAGE_SIZING_FIT,
-  IMAGE_SIZING_FILL,
   FIT_POSITION,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { ImageStyle } from "react-native";
+import type {
+  SecondaryImageDisplayMode,
+  SecondaryImageFitPosition,
+  SecondaryImageImageSizing,
+} from "@applicaster/uikit/lib/components/uikit/secondary-image/types";
 
 const SECONDARY_IMAGE_PREFIX = "secondary_image";
 
-type ImageSizing = typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
+export type ImageSizing = SecondaryImageImageSizing;
+
+export type FitPosition = SecondaryImageFitPosition;
 
 type ImagePosition = (typeof IMAGE_POSITION)[keyof typeof IMAGE_POSITION];
 
-export type DisplayMode =
-  | typeof DISPLAY_MODE_FIXED
-  | typeof DISPLAY_MODE_DYNAMIC;
+export type DisplayMode = SecondaryImageDisplayMode;
 
 export enum SecondaryImageStyleKeys {
   ENABLE = "switch",
@@ -174,6 +177,16 @@ export const getStyle = ({
   imageDimension,
   containerWidth,
   containerHeight,
+}: {
+  imageSizing: ImageSizing;
+  fitPosition: FitPosition;
+  displayMode: DisplayMode;
+  imageDimension: {
+    width: number;
+    height: number;
+  };
+  containerWidth: number;
+  containerHeight: number;
 }): ImageStyle => {
   if (!isImageSizingFit(imageSizing)) {
     return {

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -45,6 +45,7 @@ export const useTextLabel = ({ label, entry }): string => {
   const [entryStateLocal, setEntryStateLocal] =
     React.useState(initialEntryState);
 
+  // For favourites
   React.useEffect(() => {
     return action?.addListeners?.(({ entryState, entry: actionEntry }) => {
       if (entry.id === actionEntry.id) {
@@ -53,6 +54,16 @@ export const useTextLabel = ({ label, entry }): string => {
     });
   }, []);
 
+  // For rest actions
+  React.useEffect(() => {
+    // Update entryStateLocal when action state changes. Example: state change when pressing the download button.
+    if (typeof action?.addListener === "function") {
+      return action.addListener(String(entry?.id), (nextState) => {
+        setEntryStateLocal(nextState);
+      });
+    }
+  }, []);
+
   if (context && name && action) {
     return prepareHebrewText(extractLabel(entryStateLocal.label, name), isRTL);
   }
@@ -72,6 +83,10 @@ export const useTextLabel = ({ label, entry }): string => {
   return prepareHebrewText(label, isRTL);
 };
 
+/**
+ * Uses `otherProps.state` ("focused" | "default") to select between `focusedStyles` and `normalStyles`.
+ * For mobile action buttons, map `usePressedState()` (boolean) to this state value (e.g. pressed ? "focused" : "default").
+ */
 export const withFocusedStyles = ({ style, otherProps }) => {
   const state = R.path(["state"], otherProps);
 

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { Text } from "react-native";
-import { omit } from "ramda";
 import {
   textTransform,
   dateFormat,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { Text as UIKitText } from "@applicaster/uikit/lib/components/uikit/text";
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
@@ -20,11 +19,18 @@ type Props = {
   entry?: any;
   dateTransformEnabled: boolean;
   dateTransform: string;
-  [key: string]: any;
+  state?: string;
+  focusedStyles?: any;
+  normalStyles?: any;
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  nativeID?: string;
+  selectable?: boolean;
 };
 
-const withoutLabel = omit(["label"]);
-
 const _Text = ({
   style,
   label,
@@ -32,7 +38,16 @@ const _Text = ({
   transformText = "default",
   dateTransformEnabled = false,
   dateTransform,
-  ...otherProps
+  state,
+  focusedStyles,
+  normalStyles,
+  numberOfLines,
+  ellipsizeMode,
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+  nativeID,
+  selectable,
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
@@ -42,8 +57,8 @@ const _Text = ({
 
   // set maximum possible height for the text in case of measurement
   const height =
-    isMeasurement && otherProps.numberOfLines && style.lineHeight
-      ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
+    isMeasurement && numberOfLines && style.lineHeight
+      ? toNumber(numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
   const textLabel = dateTransformEnabled
@@ -52,7 +67,7 @@ const _Text = ({
 
   React.useLayoutEffect(() => {
     if (cellFocused) {
-      switch (otherProps.state) {
+      switch (state) {
         case "focused":
           accessibilityManager.addHeading(textLabel);
           break;
@@ -61,20 +76,35 @@ const _Text = ({
           break;
       }
     }
-  }, [cellFocused, otherProps.state, textLabel]);
+  }, [accessibilityManager, cellFocused, state, textLabel]);
 
   if (isNilOrEmpty(_label)) {
     return null;
   }
 
   return (
-    <Text
-      style={[withFocusedStyles({ style, otherProps }), { height }]}
-      {...withoutLabel(otherProps)}
-      allowFontScaling={false}
+    <UIKitText
+      style={[
+        withFocusedStyles({
+          style,
+          otherProps: {
+            state,
+            focusedStyles,
+            normalStyles,
+          },
+        }),
+        { height },
+      ]}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      nativeID={nativeID}
+      selectable={selectable}
     >
       {textLabel}
-    </Text>
+    </UIKitText>
   );
 };
 

package/Components/MasterCell/DefaultComponents/UIKitAdapters/Badge.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Badge,
+  BadgeProps,
+} from "@applicaster/uikit/lib/components/uikit/badge";
+import { ViewStyle } from "react-native";
+
+export const UIKitBadge = ({
+  children,
+  style,
+  position,
+  width,
+  height,
+  margins,
+  onPress,
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+}: {
+  children?: React.ReactNode;
+  style?: BadgeProps["style"];
+  position?: BadgeProps["position"];
+  width?: BadgeProps["width"];
+  height?: BadgeProps["height"];
+  margins?: Pick<
+    ViewStyle,
+    "marginTop" | "marginRight" | "marginBottom" | "marginLeft"
+  >;
+  onPress?: BadgeProps["onPress"];
+  testID?: BadgeProps["testID"];
+  accessibilityLabel?: BadgeProps["accessibilityLabel"];
+  accessibilityHint?: BadgeProps["accessibilityHint"];
+}) => (
+  <Badge
+    onPress={onPress}
+    testID={testID}
+    accessibilityLabel={accessibilityLabel}
+    accessibilityHint={accessibilityHint}
+    position={position}
+    width={width}
+    height={height}
+    style={{
+      ...style,
+      ...margins,
+    }}
+  >
+    {children}
+  </Badge>
+);

package/Components/MasterCell/DefaultComponents/__tests__/ActionButton.test.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ActionButton } from "../ActionButton";
+
+const mockUseActions = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: (...args) => mockUseActions(...args),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(() => ({
+    use_downscaling_images: false,
+  })),
+}));
+
+describe("MasterCell ActionButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseActions.mockReturnValue({
+      initialEntryState: () => ({
+        asset: "active.png",
+      }),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(),
+      isActionAvailable: jest.fn(() => true),
+    });
+  });
+
+  it("renders using UIKit ActionButton and passes Image AssetComponent for image assets", () => {
+    const item = {
+      id: "entry-id",
+    };
+
+    const wrapper = render(
+      <ActionButton
+        item={item as any}
+        action={{ identifier: "bookmark" }}
+        asset={{
+          type: "Image",
+          src: {
+            active: "active.png",
+            inactive: "inactive.png",
+          },
+          style: {
+            width: 32,
+            height: 32,
+          },
+          props: {
+            testID: "action-button-image",
+          },
+        }}
+        style={{
+          width: 32,
+          height: 32,
+        }}
+        testID="action-button"
+        accessibilityLabel="action-button-label"
+      />
+    );
+
+    const button = wrapper.getByTestId("action-button");
+    const image = wrapper.getByTestId("action-button-image");
+
+    expect(button.props.accessibilityLabel).toBe("action-button-label");
+
+    expect(image.props.source).toEqual({ uri: "inactive.png" });
+  });
+
+  it('matches the rendered "action-button" snapshot', () => {
+    const wrapper = render(
+      <ActionButton
+        item={{ id: "entry-id" } as any}
+        action={{ identifier: "bookmark" }}
+        asset={{
+          type: "Image",
+          src: {
+            active: "active.png",
+            inactive: "inactive.png",
+          },
+          style: {
+            width: 32,
+            height: 32,
+          },
+          props: {
+            testID: "action-button-image",
+          },
+        }}
+        style={{
+          width: 32,
+          height: 32,
+        }}
+        testID="action-button"
+        accessibilityLabel="action-button-label"
+      />
+    );
+
+    expect(wrapper.UNSAFE_getByType(TouchableOpacity).props).toMatchObject({
+      activeOpacity: 1,
+      id: "action-button-entry-id",
+      testID: "action-button",
+      accessibilityLabel: "action-button-label",
+      accessible: true,
+      accessibilityHint: undefined,
+      style: { width: 32, height: 32 },
+    });
+
+    expect(
+      wrapper.UNSAFE_getByType(TouchableOpacity).props.children.props
+    ).toMatchObject({
+      fadeDuration: 0,
+      style: { width: 32, height: 32 },
+      uri: "inactive.png",
+      testID: "action-button-image",
+    });
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});