@jobber/components-native 0.40.1 → 0.42.0

package/dist/src/AutoLink/AutoLink.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Text as RNText } from "react-native";
+import { ComposeTextWithLinks } from "./components";
+import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
+import { TypographyGestureDetector } from "../Typography";
+import { tokens } from "../utils/design";
+export function AutoLink(_a) {
+    var { children: text = "", bottomTabsVisible = true, selectable = true } = _a, rest = __rest(_a, ["children", "bottomTabsVisible", "selectable"]);
+    const { splitText, matches } = useCreateLinkedText(Object.assign({ text }, rest));
+    return (React.createElement(TypographyGestureDetector, null,
+        React.createElement(RNText, { selectable: selectable, selectionColor: tokens["color-brand--highlight"] }, splitText.map((part, index) => (React.createElement(ComposeTextWithLinks, { key: index, part: part, index: index, match: matches[part], bottomTabsVisible: bottomTabsVisible, selectable: selectable }))))));
+}

package/dist/src/AutoLink/clipboard.js

@@ -0,0 +1,9 @@
+import Clipboard from "@react-native-clipboard/clipboard";
+import { showToast } from "../Toast";
+export function copyTextToClipboard(text, toastConfig) {
+    Clipboard.setString(text);
+    if (toastConfig) {
+        const { message, bottomTabsVisible } = toastConfig;
+        showToast({ message, bottomTabsVisible });
+    }
+}

package/dist/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { Platform } from "react-native";
+import { onLongPressLink, onPressLink } from "../../utils";
+import { Link } from "../Link/Link";
+import { Text } from "../../../Text";
+export function ComposeTextWithLinks({ part, index, match, bottomTabsVisible, selectable = true, }) {
+    const { formatMessage } = useIntl();
+    const isLink = match === null || match === void 0 ? void 0 : match.getType();
+    if (isLink) {
+        return (React.createElement(Link, { key: index, onPress: () => onPressLink(match), onLongPress: () => {
+                if (selectable && Platform.OS === "android") {
+                    return;
+                }
+                onLongPressLink(match, bottomTabsVisible, formatMessage);
+            } }, match.getAnchorText()));
+    }
+    return React.createElement(Text, { key: index }, part);
+}

package/dist/src/AutoLink/components/Link/Link.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+import { Text } from "../../../Text";
+export function Link({ children, onPress, onLongPress, }) {
+    return (React.createElement(RNText, { onPress: onPress, onLongPress: onLongPress },
+        React.createElement(Text, { variation: "interactive" }, children)));
+}

package/dist/src/AutoLink/components/index.js

@@ -0,0 +1,2 @@
+export { Link } from "./Link/Link";
+export { ComposeTextWithLinks } from "./ComposeTextWithLinks/ComposeTextWithLinks";

package/dist/src/AutoLink/hooks/useCreateLinkedText.js

@@ -0,0 +1,24 @@
+import Autolinker from "autolinker";
+import { useTokenGenerator } from "./useTokenGenerator";
+import { shouldIgnoreURL } from "../utils";
+export function useCreateLinkedText({ text = "", email = true, phone = true, urls = true, }) {
+    const [generateToken, tokenRegexp] = useTokenGenerator();
+    const matches = {};
+    const linkedText = Autolinker.link(text, {
+        email,
+        phone,
+        urls,
+        replaceFn: match => {
+            if (shouldIgnoreURL(text, match))
+                return false;
+            const token = generateToken();
+            matches[token] = match;
+            return token;
+        },
+    });
+    const splitText = splitLinkedText(linkedText, tokenRegexp);
+    return { splitText, matches };
+}
+function splitLinkedText(linkedText, tokenRegexp) {
+    return linkedText.split(tokenRegexp).filter(part => Boolean(part));
+}

package/dist/src/AutoLink/hooks/useTokenGenerator.js

@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { v1 } from "react-native-uuid";
+export function useTokenGenerator() {
+    let counter = 0;
+    const [identifier] = useState(v1());
+    return [
+        () => `@__ELEMENT-${identifier}-${counter++}__@`,
+        new RegExp(`(@__ELEMENT-${identifier}-\\d+__@)`, "g"),
+    ];
+}

package/dist/src/AutoLink/index.js

@@ -0,0 +1 @@
+export * from "./AutoLink";

package/dist/src/AutoLink/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    phoneCopied: {
+        id: "phoneCopied",
+        defaultMessage: "Phone number copied",
+        description: "Message shown after copying a phone number",
+    },
+    emailCopied: {
+        id: "emailCopied",
+        defaultMessage: "Email copied",
+        description: "Message shown after copying an email",
+    },
+    urlCopied: {
+        id: "urlCopied",
+        defaultMessage: "URL copied",
+        description: "Message shown after copying a URL",
+    },
+});

package/dist/src/AutoLink/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/AutoLink/utils.js

@@ -0,0 +1,45 @@
+import { Linking } from "react-native";
+import { messages } from "./messages";
+import { copyTextToClipboard } from "./clipboard";
+function hasPrefix(text, prefixes) {
+    return prefixes.some(prefix => text.includes(prefix));
+}
+export function shouldIgnoreURL(text, match) {
+    const matchedText = match.getMatchedText().toLocaleLowerCase();
+    const urlPrefixes = ["http://", "https://", "www."];
+    const ignorePrefixes = ["file://", "ftp://"];
+    const previousChar = text.charAt(match.getOffset() - 1);
+    if (match.getType() === "url") {
+        const hasUrlPrefix = hasPrefix(matchedText, urlPrefixes);
+        const hasIgnorePrefix = hasPrefix(matchedText, ignorePrefixes) || previousChar === "/";
+        return hasIgnorePrefix && !hasUrlPrefix;
+    }
+    return false;
+}
+export function getUrl(match, immediateOpen = true) {
+    const matchType = match.getType();
+    switch (matchType) {
+        case "email":
+            return immediateOpen
+                ? `mailto:${encodeURIComponent(match.getEmail())}`
+                : match.getEmail();
+        case "phone":
+            return immediateOpen
+                ? `tel:${match.getNumber()}`
+                : match.getNumber();
+        default:
+            return match.getAnchorHref();
+    }
+}
+export function onLongPressLink(match, bottomTabsVisible, formatMessage) {
+    const linkUrl = getUrl(match, false);
+    const toastConfig = {
+        message: formatMessage(messages[`${match.getType()}Copied`]),
+        bottomTabsVisible,
+    };
+    copyTextToClipboard(linkUrl, toastConfig);
+}
+export function onPressLink(match) {
+    const linkUrl = getUrl(match);
+    Linking.openURL(linkUrl);
+}

package/dist/src/FormatFile/FormatFile.js

@@ -0,0 +1,114 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { createRef, useCallback, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { styles } from "./FormatFile.style";
+import { MediaView } from "./components/MediaView";
+import { FormatFileBottomSheet, } from "./components/FormatFileBottomSheet";
+import { FileView } from "./components/FileView";
+import { acceptedExtensions, videoExtensions } from "./constants";
+import { StatusCode, } from "./types";
+import { AtlantisFormatFileContext } from "./context/FormatFileContext";
+import { createUseCreateThumbnail } from "./utils/createUseCreateThumbnail";
+function FormatFileContent({ accessibilityLabel, file, showOverlay, styleInGrid, onUploadComplete, isMedia, }) {
+    return (React.createElement(View, { style: [
+            styles.thumbnailContainer,
+            styleInGrid && styles.thumbnailContainerGrid,
+        ] }, isMedia ? (React.createElement(MediaView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete })) : (React.createElement(FileView, { accessibilityLabel: accessibilityLabel, file: file, showOverlay: showOverlay, showError: file.error, styleInGrid: styleInGrid, onUploadComplete: onUploadComplete }))));
+}
+const FormatFileInternalMemoized = React.memo(FormatFileInternal);
+function isMediaFile(fileType) {
+    return fileType.includes("image") || fileType.includes("video");
+}
+function isVideo(fileName) {
+    const extension = fileName.substring(fileName.lastIndexOf(".") + 1);
+    return videoExtensions.some(({ type }) => type === extension.toLowerCase());
+}
+function getContentType(fileName = "", fileType = "unknown") {
+    if (isVideo(fileName)) {
+        return "video";
+    }
+    return fileType;
+}
+function isAcceptedExtension(file) {
+    return acceptedExtensions.some(extension => 
+    // type property may return undefined on M1 Systems running iOS Simulator
+    (file.type || "").includes(extension.name));
+}
+function parseFile(file, showFileTypeIndicator) {
+    let formattedFile;
+    if ("progress" in file) {
+        formattedFile = {
+            source: file.sourcePath,
+            name: file.name,
+            size: file.size,
+            external: false,
+            progress: file.progress,
+            status: file.status,
+            error: file.status === StatusCode.Failed,
+            type: file.type || file.key,
+            isMedia: false,
+            showPreview: false,
+            showFileTypeIndicator: showFileTypeIndicator,
+        };
+    }
+    else {
+        formattedFile = {
+            source: file.url,
+            thumbnailUrl: file.thumbnailUrl,
+            name: file.fileName,
+            size: file.fileSize,
+            external: true,
+            progress: 1,
+            status: StatusCode.Completed,
+            error: false,
+            type: getContentType(file.fileName, file.contentType),
+            isMedia: false,
+            showPreview: false,
+            showFileTypeIndicator: showFileTypeIndicator,
+        };
+    }
+    formattedFile.isMedia = isMediaFile(formattedFile.type || "");
+    formattedFile.showPreview =
+        formattedFile.isMedia || isAcceptedExtension(formattedFile);
+    return formattedFile;
+}
+export function FormatFile({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid = false, testID, showFileTypeIndicator = true, createThumbnail, onPreviewPress, }) {
+    const onTapModified = onTap ? () => onTap(file) : () => undefined;
+    const formattedFile = parseFile(file, showFileTypeIndicator);
+    return (React.createElement(FormatFileInternalMemoized, { file: formattedFile, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onTap: onTapModified, onRemove: onRemove, bottomSheetOptionsSuffix: bottomSheetOptionsSuffix, styleInGrid: styleInGrid, testID: testID, createThumbnail: createThumbnail, onPreviewPress: onPreviewPress }));
+}
+function FormatFileInternal({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid = false, onPreviewPress, testID, createThumbnail: createThumbnailProp, }) {
+    const [showOverlay, setShowOverlay] = useState(file.status !== StatusCode.Completed);
+    const { formatMessage } = useIntl();
+    const bottomSheetRef = createRef();
+    const handlePreviewPress = useCallback(() => {
+        onPreviewPress === null || onPreviewPress === void 0 ? void 0 : onPreviewPress(file);
+    }, [file, onPreviewPress]);
+    const createThumbnail = createThumbnailProp
+        ? createThumbnailProp
+        : () => __awaiter(this, void 0, void 0, function* () { return ({ error: false, thumbnail: "" }); });
+    const { useCreateThumbnail } = createUseCreateThumbnail(createThumbnail);
+    return (React.createElement(AtlantisFormatFileContext.Provider, { value: { useCreateThumbnail } },
+        React.createElement(View, null,
+            React.createElement(TouchableOpacity, { accessibilityRole: "imagebutton", accessibilityHint: accessibilityHint !== null && accessibilityHint !== void 0 ? accessibilityHint : formatMessage(messages.defaultAccessibilityHint), onPress: handleOnPress, testID: testID },
+                React.createElement(FormatFileContent, { accessibilityLabel: accessibilityLabel, file: file, onUploadComplete: () => setShowOverlay(false), isMedia: !!file.isMedia, styleInGrid: styleInGrid, showOverlay: showOverlay })),
+            React.createElement(FormatFileBottomSheet, { bottomSheetRef: bottomSheetRef, onRemovePress: onRemove, bottomSheetOptionsSuffix: bottomSheetOptionsSuffix, onPreviewPress: file.showPreview ? handlePreviewPress : undefined }))));
+    function handleOnPress() {
+        var _a;
+        if (showOverlay || !onRemove) {
+            onTap();
+            return;
+        }
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    }
+}

package/dist/src/FormatFile/FormatFile.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    thumbnailContainer: {
+        backgroundColor: tokens["color-surface--background"],
+        borderWidth: tokens["border-base"],
+        borderColor: tokens["color-border"],
+        borderRadius: tokens["radius-base"],
+        marginBottom: tokens["space-small"],
+    },
+    thumbnailContainerGrid: {
+        width: tokens["space-extravagant"],
+        height: tokens["space-extravagant"],
+        marginRight: tokens["space-small"],
+    },
+});

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ErrorIcon.style";
+import { Icon } from "../../../Icon";
+export function ErrorIcon() {
+    return (React.createElement(View, { testID: "format-file-error-icon", style: styles.circle },
+        React.createElement(Icon, { name: "alert", color: "critical" })));
+}

package/dist/src/FormatFile/components/ErrorIcon/ErrorIcon.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    circle: {
+        width: tokens["space-large"],
+        height: tokens["space-large"],
+        borderRadius: tokens["radius-circle"],
+        backgroundColor: tokens["color-surface"],
+    },
+});

package/dist/src/FormatFile/components/ErrorIcon/index.js

@@ -0,0 +1 @@
+export { ErrorIcon } from "./ErrorIcon";

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./FileView.style";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { StatusCode } from "../../types";
+import { computeA11yLabel } from "../../utils";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorIcon } from "../ErrorIcon";
+export function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }) {
+    const { formatMessage } = useIntl();
+    const a11yLabel = computeA11yLabel({
+        accessibilityLabel,
+        showOverlay,
+        showError,
+        formatMessage,
+    });
+    const freezeProgressBar = file.status !== StatusCode.Completed && file.progress >= 0.9;
+    return (React.createElement(View, { style: [
+            styles.fileBackground,
+            styleInGrid ? styles.fileBackgroundGrid : styles.fileBackgroundFlat,
+        ], accessible: true, accessibilityLabel: a11yLabel },
+        React.createElement(View, { style: [
+                styles.fileBackground,
+                styleInGrid ? styles.fileIconGrid : styles.fileIconFlat,
+            ], testID: "test-file" }, (styleInGrid || !showError) && file.showFileTypeIndicator && (React.createElement(Icon, { size: "large", name: mapFileTypeToIconName({
+                fileName: file.name,
+                fileType: file.type,
+            }) }))),
+        React.createElement(View, { style: [
+                showError && styleInGrid ? styles.fileNameError : styles.fileName,
+                styleInGrid ? styles.fileNameGrid : styles.fileNameFlat,
+            ] },
+            React.createElement(Text, { level: "textSupporting", variation: "subdued", maxLines: "single" }, file.name)),
+        !showError && showOverlay && (React.createElement(View, { style: [styles.fileBackground, styles.overlay, styles.fileOverlay], testID: "format-file-progress-bar-container" },
+            React.createElement(ProgressBar, { status: file.status, progress: freezeProgressBar ? 0.9 : file.progress, onComplete: onUploadComplete }))),
+        showError && (React.createElement(View, { style: [
+                styles.fileBackground,
+                styles.overlayError,
+                styles.fileOverlay,
+            ], testID: "format-file-error-container" },
+            React.createElement(View, { style: !styleInGrid ? styles.iconCenter : undefined },
+                React.createElement(ErrorIcon, null))))));
+}
+function mapFileTypeToIconName({ fileName, fileType, }) {
+    if (!fileName && !fileType) {
+        return "alert";
+    }
+    if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("pdf")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/~*.pdf$/))) {
+        return "pdf";
+    }
+    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("ms-word")) ||
+        (fileName === null || fileName === void 0 ? void 0 : fileName.match(/~*.doc$|docx$/))) {
+        return "word";
+    }
+    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("ms-excel")) ||
+        (fileName === null || fileName === void 0 ? void 0 : fileName.match(/~*.xls$|xlsx$/))) {
+        return "excel";
+    }
+    else if ((fileType === null || fileType === void 0 ? void 0 : fileType.includes("video")) || (fileName === null || fileName === void 0 ? void 0 : fileName.match(/~*.mp4$|mp4$/))) {
+        return "video";
+    }
+    else {
+        return "file";
+    }
+}

package/dist/src/FormatFile/components/FileView/FileView.style.js

@@ -0,0 +1,64 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    overlay: {
+        backgroundColor: tokens["color-overlay--dimmed"],
+    },
+    overlayError: {
+        backgroundColor: tokens["color-overlay--dimmed"],
+        borderColor: tokens["color-critical"],
+        borderWidth: tokens["border-base"],
+    },
+    iconCenter: {
+        marginBottom: tokens["space-large"],
+    },
+    fileBackground: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+    },
+    fileBackgroundGrid: {
+        height: "100%",
+    },
+    fileBackgroundFlat: {
+        justifyContent: "center",
+        height: tokens["space-extravagant"],
+    },
+    fileIconGrid: {
+        top: tokens["space-small"],
+    },
+    fileIconFlat: {
+        top: tokens["space-smaller"],
+    },
+    fileNameError: {
+        alignItems: "center",
+        borderTopColor: tokens["color-border"],
+        borderTopWidth: tokens["space-minuscule"],
+        width: "100%",
+        marginTop: tokens["space-base"],
+    },
+    fileName: {
+        alignItems: "center",
+        borderTopColor: tokens["color-border"],
+        borderTopWidth: tokens["space-minuscule"],
+        width: "100%",
+    },
+    fileNameGrid: {
+        position: "absolute",
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    fileNameFlat: {
+        top: tokens["space-small"],
+    },
+    fileOverlay: {
+        position: "absolute",
+        justifyContent: "center",
+        right: 0,
+        bottom: 0,
+        left: 0,
+        height: "100%",
+        paddingHorizontal: tokens["space-small"],
+    },
+});

package/dist/src/FormatFile/components/FileView/index.js

@@ -0,0 +1 @@
+export { FileView } from "./FileView";

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { BottomSheet } from "../../../BottomSheet/BottomSheet";
+import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
+export const FormatFileBottomSheet = ({ bottomSheetRef, onPreviewPress, onRemovePress, bottomSheetOptionsSuffix, }) => {
+    const { formatMessage } = useIntl();
+    const handlePress = (onPressAction) => {
+        var _a;
+        onPressAction();
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    return (React.createElement(Portal, null,
+        React.createElement(BottomSheet, { ref: bottomSheetRef },
+            onPreviewPress ? (React.createElement(BottomSheetOption, { icon: "eye", text: formatMessage(messages.lightBoxPreviewButton, {
+                    bottomSheetOptionsSuffix,
+                }), onPress: () => handlePress(onPreviewPress) })) : undefined,
+            onRemovePress ? (React.createElement(BottomSheetOption, { icon: "trash", destructive: true, text: formatMessage(messages.removeButton, {
+                    bottomSheetOptionsSuffix,
+                }), onPress: () => handlePress(onRemovePress) })) : undefined)));
+};

package/dist/src/FormatFile/components/FormatFileBottomSheet/index.js

@@ -0,0 +1 @@
+export { FormatFileBottomSheet } from "./FormatFileBottomSheet";

package/dist/src/FormatFile/components/FormatFileBottomSheet/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    lightBoxPreviewButton: {
+        id: "lightBoxPreviewButton",
+        defaultMessage: "Preview {bottomSheetOptionsSuffix}",
+        description: "Label for button when preview the file",
+    },
+    removeButton: {
+        id: "removeButton",
+        defaultMessage: "Remove {bottomSheetOptionsSuffix}",
+        description: "Label for button when remove the file",
+    },
+});

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

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { ImageBackground, View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./MediaView.style";
+import { StatusCode } from "../../types";
+import { computeA11yLabel } from "../../utils";
+import { ActivityIndicator } from "../../../ActivityIndicator";
+import { Icon } from "../../../Icon";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorIcon } from "../ErrorIcon";
+import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
+export function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, }) {
+    const { formatMessage } = useIntl();
+    const { useCreateThumbnail } = useAtlantisFormatFileContext();
+    const { thumbnail, error } = useCreateThumbnail(file);
+    const [isLoading, setIsLoading] = useState(false);
+    const a11yLabel = computeA11yLabel({
+        accessibilityLabel,
+        showOverlay,
+        showError,
+        formatMessage,
+    });
+    const hasError = showError || error;
+    const uri = thumbnail || file.thumbnailUrl || file.source;
+    return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
+        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) },
+            React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete }))));
+}
+function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, }) {
+    if (isLoading)
+        return React.createElement(ActivityIndicator, null);
+    if (hasError)
+        return React.createElement(ErrorOverlay, null);
+    if (showOverlay) {
+        return (React.createElement(ProgressOverlay, { status: file.status, progress: file.progress, onUploadComplete: onUploadComplete }));
+    }
+    if (isVideo(file.type) && file.showFileTypeIndicator) {
+        return React.createElement(Icon, { name: "video", color: "white" });
+    }
+    return React.createElement(React.Fragment, null);
+}
+function ProgressOverlay({ status, progress, onUploadComplete, }) {
+    const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
+    return (React.createElement(View, { style: [styles.imageBackground, styles.overlay], testID: "format-file-progress-bar-container" },
+        React.createElement(ProgressBar, { status: status, progress: freezeProgressBar ? 0.9 : progress, onComplete: onUploadComplete })));
+}
+function ErrorOverlay() {
+    return (React.createElement(View, { style: [styles.imageBackground, styles.overlayError], testID: "format-file-error-container" },
+        React.createElement(ErrorIcon, null)));
+}
+function isVideo(fileType = "") {
+    return fileType.includes("video");
+}

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

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    imageBackground: {
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    imageBackgroundFlat: {
+        aspectRatio: 375 / 150,
+    },
+    imageBackgroundGrid: {
+        height: "100%",
+    },
+    overlay: {
+        height: "100%",
+        backgroundColor: tokens["color-overlay--dimmed"],
+        paddingHorizontal: tokens["space-small"],
+    },
+    overlayError: {
+        height: "100%",
+        backgroundColor: tokens["color-overlay--dimmed"],
+        paddingHorizontal: tokens["space-small"],
+        borderColor: tokens["color-critical"],
+        borderWidth: tokens["border-base"],
+    },
+});

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

@@ -0,0 +1 @@
+export { MediaView } from "./MediaView";

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

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, View } from "react-native";
+import { styles } from "./ProgressBar.style";
+import { StatusCode } from "../../types";
+export const ProgressBar = ({ progress, status, onComplete, }) => {
+    const barWidth = useRef(new Animated.Value(0)).current;
+    const progressPercentage = barWidth.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0%", `100%`],
+    });
+    useEffect(() => {
+        Animated.timing(barWidth, {
+            toValue: progress,
+            duration: 500,
+            useNativeDriver: false,
+        }).start(({ finished }) => {
+            if (status === StatusCode.Completed && finished && onComplete) {
+                onComplete();
+            }
+        });
+    }, [progress, barWidth, onComplete, status]);
+    return (React.createElement(View, { testID: "format-file-progress-bar", style: styles.container },
+        React.createElement(Animated.View, { testID: "format-file-inner-progress-bar", style: [
+                styles.progress,
+                {
+                    width: progressPercentage,
+                },
+            ] })));
+};

package/dist/src/FormatFile/components/ProgressBar/ProgressBar.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        height: 8,
+        borderRadius: tokens["radius-circle"],
+        overflow: "hidden",
+        backgroundColor: tokens["color-surface--background"],
+    },
+    progress: {
+        height: "100%",
+        backgroundColor: tokens["color-green"],
+    },
+});

package/dist/src/FormatFile/components/ProgressBar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar";