@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6525006318 → 13.0.0-alpha.6912563393

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/__tests__/index.test.ts

@@ -0,0 +1,93 @@
+import { ImageBorderContainer } from "../index";
+import { getImageContainerMarginStyles } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+const mockValue = (key) => {
+  const values = {
+    cell_padding_top: 1,
+    cell_padding_left: 2,
+    cell_padding_right: 3,
+    cell_padding_bottom: 4,
+    image_border_size: 5,
+    image_focused_border_color: "red",
+    image_selected_border_color: "blue",
+    image_focused_selected_border_color: "green",
+    image_border_color: "black",
+    image_corner_radius: 10,
+    image_border_position: "outside",
+    image_border_padding_top: 6,
+    image_border_padding_right: 7,
+    image_border_padding_bottom: 8,
+    image_border_padding_left: 9,
+    image_margin_top: 11,
+    image_margin_left: 12,
+    image_margin_right: 13,
+    image_margin_bottom: 14,
+  };
+
+  return values[key] || 0;
+};
+
+describe("ImageBorderContainer", () => {
+  it("calculates style properties correctly", () => {
+    const marginStyles = getImageContainerMarginStyles({ value: mockValue });
+
+    expect(marginStyles.marginTop).toBe(11);
+    expect(marginStyles.marginLeft).toBe(12);
+    expect(marginStyles.marginRight).toBe(13);
+    expect(marginStyles.marginBottom).toBe(14);
+
+    const props = {
+      value: mockValue,
+      state: "default",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+
+    expect(result.style.marginTop).toBe(12); // 11 + 1
+    expect(result.style.marginLeft).toBe(14); // 12 + 2
+    expect(result.style.marginRight).toBe(16); // 13 + 3
+    expect(result.style.marginBottom).toBe(18); // 14 + 4
+    expect(result.style.borderWidth).toBe(5);
+    expect(result.style.borderColor).toBe("black");
+    expect(result.style.borderRadius).toBe(10);
+    expect(result.additionalProps.borderPosition).toBe("outside");
+    expect(result.additionalProps.borderPaddingTop).toBe(6);
+    expect(result.additionalProps.borderPaddingRight).toBe(7);
+    expect(result.additionalProps.borderPaddingBottom).toBe(8);
+    expect(result.additionalProps.borderPaddingLeft).toBe(9);
+  });
+
+  it("handles focused state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "focused",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("red");
+  });
+
+  it("handles selected state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "selected",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("blue");
+  });
+
+  it("handles focused and selected state correctly", () => {
+    const props = {
+      value: mockValue,
+      state: "focused_selected",
+      imageStyles: {},
+    };
+
+    const result = ImageBorderContainer(props);
+    expect(result.style.borderColor).toBe("green");
+  });
+});

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

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

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

@@ -6,7 +6,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 <View
   onLayout={[Function]}
   style={
-    Object {
+    {
       "borderRadius": 10,
       "height": 100,
       "width": 100,
@@ -16,12 +16,12 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   <Image
     onAsyncRender={[Function]}
     source={
-      Object {
+      {
         "uri": "",
       }
     }
     style={
-      Object {
+      {
         "aspectRatio": 1,
         "borderRadius": 10,
         "height": 100,

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

@@ -17,7 +17,7 @@ const SECONDARY_IMAGE_PREFIX = "secondary_image";
 
 type ImageSizing = typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
 
-type ImagePosition = typeof IMAGE_POSITION[keyof typeof IMAGE_POSITION];
+type ImagePosition = (typeof IMAGE_POSITION)[keyof typeof IMAGE_POSITION];
 
 export type DisplayMode =
   | typeof DISPLAY_MODE_FIXED

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CollapsibleTextContainer render container+children when label is presented 1`] = `
 <View
   style={
-    Object {
+    {
       "backgroundColor": "#000000",
     }
   }