@jobber/components-native 0.42.2 → 0.43.0

package/dist/src/ThumbnailList/ThumbnailList.js

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

package/dist/src/ThumbnailList/ThumbnailList.style.js

@@ -0,0 +1,49 @@
+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/dist/src/ThumbnailList/index.js

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

package/dist/src/ThumbnailList/types.js

@@ -0,0 +1,5 @@
+export var RowCount;
+(function (RowCount) {
+    RowCount[RowCount["TwoRows"] = 2] = "TwoRows";
+    RowCount[RowCount["ThreeRows"] = 3] = "ThreeRows";
+})(RowCount || (RowCount = {}));

package/dist/src/index.js

@@ -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";