@jobber/components-native 0.42.2 → 0.42.3-pre.19

package/dist/src/AtlantisContext/AtlantisContext.js

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createContext, useContext } from "react";
-import RNLocalize from "react-native-localize";
 import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 export const defaultValues = {
     dateFormat: "PP",
     // The system time is "p"
     timeFormat: "p",
-    timeZone: RNLocalize.getTimeZone(),
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     isOnline: true,
     onLogError: _ => {
         return;

package/dist/src/Form/context/AtlantisFormContext.js

@@ -8,7 +8,6 @@ export const defaultValues = {
         setLocalCache: () => undefined,
         removeLocalCache: () => undefined,
     }),
-    headerHeight: 0,
 };
 export const AtlantisFormContext = createContext(defaultValues);
 export function useAtlantisFormContext() {

package/dist/src/Form/hooks/useScreenInformation.js

@@ -1,9 +1,9 @@
 import { useWindowDimensions } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "../constants";
-import { useAtlantisFormContext } from "../context";
+import { useAtlantisContext } from "../../AtlantisContext";
 export function useScreenInformation() {
-    const { headerHeight } = useAtlantisFormContext();
+    const { headerHeight } = useAtlantisContext();
     const windowHeight = useWindowDimensions().height;
     const headerHeightWithPadding = headerHeight + KEYBOARD_TOP_PADDING_AUTO_SCROLL;
     const insets = useSafeAreaInsets();

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -13,7 +13,7 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
     const { formatMessage } = useIntl();
     const { useCreateThumbnail } = useAtlantisFormatFileContext();
     const { thumbnail, error } = useCreateThumbnail(file);
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const a11yLabel = computeA11yLabel({
         accessibilityLabel,
         showOverlay,
@@ -26,7 +26,7 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
-            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(true), onLoadEnd: () => setIsLoading(false) },
+            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(false), onLoadEnd: () => setIsLoading(true) },
             React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete }))));
 }
 function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, }) {

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