@jobber/components-native 0.42.2 → 0.43.0

package/dist/types/src/ThumbnailList/ThumbnailList.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ThumbnailListProps } from "./types";
+import { File } from "../FormatFile";
+export declare const filterImages: (files: File[]) => File[];
+export declare function ThumbnailList({ files, rowCount, handleOpenFile, createThumbnail, }: ThumbnailListProps): JSX.Element;

package/dist/types/src/ThumbnailList/ThumbnailList.style.d.ts

@@ -0,0 +1,47 @@
+export declare const styles: {
+    list: {
+        display: "flex";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        maxHeight: number;
+        overflow: "hidden";
+        marginTop: number;
+    };
+    maxDimensionsForThreeRows: {
+        maxHeight: number;
+    };
+    thumbnail: {
+        width: number;
+        height: number;
+        marginRight: number;
+        marginBottom: number;
+        borderRadius: number;
+        borderColor: string;
+        borderWidth: number;
+    };
+    centerThumbnailImage: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    dimensionsThumbnailImage: {
+        width: number;
+        height: number;
+    };
+    thumbnailName: {
+        position: "absolute";
+        right: number;
+        bottom: number;
+        left: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderTopColor: string;
+        borderTopWidth: number;
+    };
+    thumbnailIcon: {
+        top: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};

package/dist/types/src/ThumbnailList/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbnailList } from "./ThumbnailList";
+export * from "./types";

package/dist/types/src/ThumbnailList/types.d.ts

@@ -0,0 +1,15 @@
+import { CreateThumbnail, File } from "../FormatFile";
+export declare enum RowCount {
+    TwoRows = 2,
+    ThreeRows = 3
+}
+export interface ThumbnailListProps {
+    files: File[];
+    rowCount?: RowCount;
+    handleOpenFile?: ({ file, index, imageList, }: {
+        file: File;
+        index: number;
+        imageList: File[];
+    }) => void;
+    createThumbnail: CreateThumbnail;
+}

package/dist/types/src/index.d.ts

@@ -34,6 +34,7 @@ export * from "./InputTime";
 export * from "./InputText";
 export * from "./Menu";
 export * from "./TextList";
+export * from "./ThumbnailList";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.42.2",
+  "version": "0.43.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -79,5 +79,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "2df6573edb9d186f038ccdad7ef0e8dc5d438f58"
+  "gitHead": "7fc42f774c940e8da3e862b6b4f39b174132b669"
 }

package/src/ThumbnailList/ThumbnailList.style.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  list: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
+    overflow: "hidden",
+    marginTop: tokens["space-smaller"],
+  },
+  maxDimensionsForThreeRows: {
+    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
+  },
+  thumbnail: {
+    width: tokens["space-extravagant"],
+    height: tokens["space-extravagant"],
+    marginRight: tokens["space-smaller"],
+    marginBottom: tokens["space-smaller"],
+    borderRadius: tokens["radius-base"],
+    borderColor: tokens["color-border"],
+    borderWidth: tokens["border-base"],
+  },
+  centerThumbnailImage: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dimensionsThumbnailImage: {
+    width: tokens["space-extravagant"],
+    height: tokens["space-extravagant"],
+  },
+  thumbnailName: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    left: 0,
+    paddingHorizontal: tokens["space-smaller"],
+    paddingVertical: tokens["space-smallest"],
+    borderTopColor: tokens["color-border"],
+    borderTopWidth: tokens["space-minuscule"],
+  },
+  thumbnailIcon: {
+    top: tokens["space-smaller"],
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/ThumbnailList/ThumbnailList.test.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { ThumbnailList } from "./ThumbnailList";
+import { File } from "../FormatFile/types";
+
+const snapshotFile: File[] = [
+  {
+    contentType: "image/jpeg",
+    fileName: "image.jpeg",
+    thumbnailUrl: "https://imageurl.com/ababathumb.jpg",
+    url: "https://imageurl.com/ababa1.jpg",
+    fileSize: 1024,
+  },
+];
+
+const files: File[] = [
+  {
+    contentType: "image/jpeg",
+    fileName: "image.jpeg",
+    thumbnailUrl: "https://imageurl.com/ababathumb.jpg",
+    url: "https://imageurl.com/ababa1.jpg",
+    fileSize: 1024,
+  },
+  {
+    contentType: "image/jpeg",
+    fileName: "image1.jpeg",
+    thumbnailUrl: "https://imageurl.com/ababathumb.jpg",
+    url: "https://imageurl.com/ababa2.jpg",
+    fileSize: 1024,
+  },
+  {
+    contentType: "pdf",
+    fileName: "image2.pdf",
+    thumbnailUrl: "https://imageurl.com/ababathumb.jpg",
+    url: undefined,
+    fileSize: 1024,
+  },
+];
+
+const onOpenFile = jest.fn();
+const mockCreateThumbnail = jest.fn(async () => ({
+  thumbnail: "thumbnail",
+  error: false,
+}));
+
+function setup(snapshot?: boolean) {
+  return render(
+    <Host>
+      <ThumbnailList
+        files={snapshot ? snapshotFile : files}
+        handleOpenFile={onOpenFile}
+        createThumbnail={mockCreateThumbnail}
+      />
+    </Host>,
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+it("renders a thumbnail component with attachments", () => {
+  const tree = setup(true);
+  expect(tree.toJSON()).toMatchSnapshot();
+});
+
+describe("when a an array of files is provided", () => {
+  it("calls the previewImages util on pressing a valid file", () => {
+    const { getByLabelText } = setup();
+    fireEvent.press(
+      getByLabelText(files[0].fileName ? files[0].fileName : "file"),
+    );
+    expect(onOpenFile).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls createThumbnail", () => {
+    setup();
+    expect(mockCreateThumbnail).toHaveBeenCalledTimes(2);
+  });
+});

package/src/ThumbnailList/ThumbnailList.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { View } from "react-native";
+import isNil from "lodash/isNil";
+import { RowCount, ThumbnailListProps } from "./types";
+import { styles } from "./ThumbnailList.style";
+import { File, FormatFile } from "../FormatFile";
+
+function isImage(file: File) {
+  return !!file.contentType && file.contentType.includes("image/");
+}
+
+function hasValidUrl(file: File) {
+  return !isNil(file.url);
+}
+
+export const filterImages = (files: File[]): File[] => {
+  return files.filter((file: File) => {
+    return isImage(file) && hasValidUrl(file);
+  });
+};
+
+export function ThumbnailList({
+  files,
+  rowCount = RowCount.TwoRows,
+  handleOpenFile,
+  createThumbnail,
+}: ThumbnailListProps): JSX.Element {
+  const imageList = filterImages(files);
+
+  return (
+    <View
+      style={[
+        styles.list,
+        rowCount === RowCount.ThreeRows && styles.maxDimensionsForThreeRows,
+      ]}
+    >
+      {files.map((file, index) => {
+        return (
+          <FormatFile
+            file={file}
+            accessibilityLabel={file.fileName}
+            key={`${file.fileName}-${index}`}
+            styleInGrid
+            onTap={openFile(file, index)}
+            createThumbnail={createThumbnail}
+          />
+        );
+      })}
+    </View>
+  );
+
+  function openFile(file: File, index: number) {
+    return () => {
+      handleOpenFile?.({ file, index, imageList });
+    };
+  }
+}

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a thumbnail component with attachments 1`] = `
+[
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "display": "flex",
+            "flexDirection": "row",
+            "flexWrap": "wrap",
+            "marginTop": 4,
+            "maxHeight": 136,
+            "overflow": "hidden",
+          },
+          false,
+        ]
+      }
+    >
+      <View>
+        <View
+          accessibilityHint="Select for more options"
+          accessibilityRole="imagebutton"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "backgroundColor": "rgb(244, 244, 244)",
+                  "borderColor": "rgb(225, 225, 225)",
+                  "borderRadius": 2,
+                  "borderWidth": 1,
+                  "marginBottom": 8,
+                },
+                {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          >
+            <View
+              accessibilityLabel="image.jpeg"
+              accessible={true}
+            >
+              <View
+                accessibilityIgnoresInvertColors={true}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "width": "100%",
+                    },
+                    {
+                      "height": "100%",
+                    },
+                  ]
+                }
+              >
+                <Image
+                  onLoadEnd={[Function]}
+                  onLoadStart={[Function]}
+                  resizeMode="cover"
+                  source={
+                    {
+                      "uri": "https://imageurl.com/ababathumb.jpg",
+                    }
+                  }
+                  style={
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "height": "100%",
+                        "width": "100%",
+                      },
+                      undefined,
+                    ]
+                  }
+                  testID="test-image"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+]
+`;

package/src/ThumbnailList/index.ts

@@ -0,0 +1,2 @@
+export { ThumbnailList } from "./ThumbnailList";
+export * from "./types";

package/src/ThumbnailList/types.ts

@@ -0,0 +1,21 @@
+import { CreateThumbnail, File } from "../FormatFile";
+
+export enum RowCount {
+  TwoRows = 2,
+  ThreeRows = 3,
+}
+
+export interface ThumbnailListProps {
+  files: File[];
+  rowCount?: RowCount;
+  handleOpenFile?: ({
+    file,
+    index,
+    imageList,
+  }: {
+    file: File;
+    index: number;
+    imageList: File[];
+  }) => void;
+  createThumbnail: CreateThumbnail;
+}

package/src/index.ts

@@ -34,6 +34,7 @@ export * from "./InputTime";
 export * from "./InputText";
 export * from "./Menu";
 export * from "./TextList";
+export * from "./ThumbnailList";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";