@jobber/components-native 0.36.0 → 0.37.1-unblock-fo.10

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -0,0 +1,144 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
+import { styles } from "./ContentOverlay.style";
+import { messages } from "./messages";
+import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { IconButton } from "../IconButton";
+import { tokens } from "../utils/design";
+import { Heading } from "../Heading";
+export const ContentOverlay = forwardRef(ContentOverlayPortal);
+const ContentOverlayModal = forwardRef(ContentOverlayInternal);
+// eslint-disable-next-line max-statements
+function ContentOverlayInternal({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, keyboardAvoidingBehavior, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, loading = false, avoidKeyboardLikeIOS, }, ref) {
+    isDraggable = onBeforeExit ? false : isDraggable;
+    const isCloseableOnOverlayTap = onBeforeExit ? false : true;
+    const { formatMessage } = useIntl();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const [position, setPosition] = useState("initial");
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const isFullScreenOrTopPosition = fullScreen || (!adjustToContentHeight && position === "top");
+    const shouldShowDismiss = showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
+    const [showHeaderShadow, setShowHeaderShadow] = useState(false);
+    const overlayHeader = useRef();
+    const internalRef = useRef();
+    const [modalizeMethods, setModalizeMethods] = useState();
+    const callbackInternalRef = useCallback((instance) => {
+        if (instance && !internalRef.current) {
+            internalRef.current = instance;
+            setModalizeMethods(instance);
+        }
+    }, []);
+    const refMethods = useMemo(() => {
+        if (!(modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.open) || !(modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.close)) {
+            return {};
+        }
+        return {
+            open: modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.open,
+            close: modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.close,
+        };
+    }, [modalizeMethods]);
+    const { keyboardHeight } = useKeyboardVisibility();
+    useImperativeHandle(ref, () => refMethods, [refMethods]);
+    const { handleLayout: handleChildrenLayout, height: childrenHeight, heightKnown: childrenHeightKnown, } = useViewLayoutHeight();
+    const { handleLayout: handleHeaderLayout, height: headerHeight, heightKnown: headerHeightKnown, } = useViewLayoutHeight();
+    const snapPoint = useMemo(() => {
+        if (fullScreen || !isDraggable || adjustToContentHeight) {
+            return undefined;
+        }
+        const overlayHeight = headerHeight + childrenHeight;
+        if (overlayHeight >= windowHeight) {
+            return undefined;
+        }
+        return overlayHeight;
+    }, [
+        fullScreen,
+        isDraggable,
+        adjustToContentHeight,
+        headerHeight,
+        childrenHeight,
+        windowHeight,
+    ]);
+    const modalStyle = [
+        styles.modal,
+        windowWidth > 640 ? styles.modalForLargeScreens : undefined,
+        { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+        keyboardHeight > 0 && { marginBottom: 0 },
+    ];
+    const renderedChildren = renderChildren();
+    const renderedHeader = renderHeader();
+    const onCloseController = () => {
+        var _a;
+        if (!onBeforeExit) {
+            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            return true;
+        }
+        else {
+            onBeforeExit();
+            return false;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        headerHeightKnown && childrenHeightKnown && (React.createElement(Modalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
+                if (overlayHeader.current) {
+                    const reactTag = findNodeHandle(overlayHeader.current);
+                    if (reactTag) {
+                        AccessibilityInfo.setAccessibilityFocus(reactTag);
+                    }
+                }
+            }, scrollViewProps: {
+                scrollEnabled,
+                showsVerticalScrollIndicator: false,
+                stickyHeaderIndices: Platform.OS === "android" ? [0] : undefined,
+                onScroll: handleOnScroll,
+                keyboardShouldPersistTaps: keyboardShouldPersistTaps
+                    ? "handled"
+                    : "never",
+            }, HeaderComponent: Platform.OS === "ios" ? renderedHeader : undefined, onPositionChange: setPosition },
+            Platform.OS === "android" ? renderedHeader : undefined,
+            renderedChildren)),
+        !childrenHeightKnown && (React.createElement(View, { style: [styles.hiddenContent, modalStyle] }, renderedChildren)),
+        !headerHeightKnown && (React.createElement(View, { style: [styles.hiddenContent, modalStyle] }, renderedHeader))));
+    function renderHeader() {
+        const closeOverlayA11YLabel = formatMessage(messages.closeOverlayA11YLabel, {
+            title: title,
+        });
+        const headerStyles = [
+            styles.header,
+            showHeaderShadow && styles.headerShadow,
+            { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+        ];
+        return (React.createElement(View, { onLayout: handleHeaderLayout, testID: "ATL-Overlay-Header" },
+            React.createElement(View, { style: headerStyles },
+                React.createElement(View, { style: showDismiss ? styles.titleWithDismiss : styles.titleWithoutDimiss },
+                    React.createElement(Heading, { level: "subtitle", variation: loading ? "subdued" : "heading" }, title)),
+                shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, 
+                    // @ts-expect-error tsc-ci
+                    ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
+                    React.createElement(IconButton, { name: "cross", customColor: loading ? tokens["color-disabled"] : tokens["color-heading"], onPress: () => onCloseController(), accessibilityLabel: closeOverlayA11YLabel, testID: "ATL-Overlay-CloseButton" }))))));
+    }
+    function renderChildren() {
+        return (React.createElement(View, { style: { paddingBottom: insets.bottom }, onLayout: handleChildrenLayout, testID: "ATL-Overlay-Children" }, children));
+    }
+    function handleOnScroll({ nativeEvent, }) {
+        setShowHeaderShadow(nativeEvent.contentOffset.y > 0);
+    }
+    function getModalBackgroundColor(variation) {
+        switch (variation) {
+            case "surface":
+                return tokens["color-surface"];
+            case "background":
+                return tokens["color-surface--background"];
+        }
+    }
+}
+function ContentOverlayPortal(modalProps, ref) {
+    return (React.createElement(Portal, null,
+        React.createElement(ContentOverlayModal, Object.assign({ ref: ref }, modalProps))));
+}

package/dist/src/ContentOverlay/ContentOverlay.style.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const modalBorderRadius = tokens["radius-larger"];
+const titleOffsetFromHandle = tokens["space-small"] + tokens["space-smallest"];
+export const styles = StyleSheet.create({
+    handle: {
+        width: tokens["space-largest"],
+        height: tokens["space-smaller"] + tokens["space-smallest"],
+        backgroundColor: tokens["color-border"],
+        top: tokens["space-small"],
+        borderRadius: tokens["radius-circle"],
+    },
+    overlay: {
+        backgroundColor: tokens["color-overlay"],
+    },
+    modal: {
+        borderTopLeftRadius: modalBorderRadius,
+        borderTopRightRadius: modalBorderRadius,
+    },
+    modalForLargeScreens: {
+        width: 640,
+        alignSelf: "center",
+    },
+    header: {
+        flexDirection: "row",
+        backgroundColor: tokens["color-surface"],
+        paddingTop: titleOffsetFromHandle,
+        zIndex: tokens["elevation-base"],
+        borderTopLeftRadius: modalBorderRadius,
+        borderTopRightRadius: modalBorderRadius,
+        height: tokens["space-extravagant"],
+    },
+    headerShadow: Object.assign({}, tokens["shadow-base"]),
+    childrenStyle: {
+        // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+        zIndex: -1,
+    },
+    dismissButton: {
+        alignItems: "center",
+    },
+    hiddenContent: {
+        opacity: 0,
+    },
+    titleWithoutDimiss: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "center",
+        paddingTop: tokens["space-base"],
+    },
+    titleWithDismiss: {
+        flex: 1,
+        justifyContent: "center",
+        paddingLeft: tokens["space-base"],
+        paddingRight: tokens["space-smaller"],
+    },
+});

package/dist/src/ContentOverlay/hooks/useKeyboardVisibility.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+export function useKeyboardVisibility() {
+    const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", (event) => {
+            setKeyboardVisible(true);
+            setKeyboardHeight(event.endCoordinates.height);
+        });
+        const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
+            setKeyboardVisible(false);
+            setKeyboardHeight(0);
+        });
+        return () => {
+            keyboardDidHideListener.remove();
+            keyboardDidShowListener.remove();
+        };
+    }, []);
+    return { isKeyboardVisible, keyboardHeight };
+}

package/dist/src/ContentOverlay/hooks/useViewLayoutHeight.js

@@ -0,0 +1,10 @@
+import { useState } from "react";
+export function useViewLayoutHeight() {
+    const [heightKnown, setHeightKnown] = useState(false);
+    const [height, setHeight] = useState(0);
+    const handleLayout = ({ nativeEvent }) => {
+        setHeightKnown(true);
+        setHeight(nativeEvent.layout.height);
+    };
+    return { handleLayout, height, heightKnown };
+}

package/dist/src/ContentOverlay/index.js

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

package/dist/src/ContentOverlay/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    closeOverlayA11YLabel: {
+        id: "closeOverlayA11yLabel",
+        defaultMessage: "Close {title} modal",
+        description: "Accessibility label for button to close the overlay modal",
+    },
+});

package/dist/src/ContentOverlay/types.js

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

package/dist/src/Disclosure/Disclosure.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { ScrollView, TouchableOpacity, View, } from "react-native";
+import Reanimated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { EASE_CUBIC_IN_OUT } from "./constants";
+import { styles } from "./Disclosure.style";
+import { tokens } from "../utils/design";
+import { Icon } from "../Icon";
+const ReanimatedView = Reanimated.createAnimatedComponent(View);
+const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+export function Disclosure({ content, header, open, onToggle, isEmpty, animationDuration = tokens["timing-slowest"], }) {
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(DisclosureHeader, Object.assign({}, { header, onToggle, isEmpty, open, animationDuration })),
+        React.createElement(DisclosureContent, Object.assign({}, { content, open, animationDuration }))));
+}
+function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration, }) {
+    const rotateZ = useSharedValue(0);
+    rotateZ.value = withTiming(open ? 0 : -180, {
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+        duration: animationDuration,
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ rotateZ: `${rotateZ.value}deg` }],
+        };
+    });
+    return (React.createElement(TouchableOpacity, { activeOpacity: tokens["opacity-pressed"], onPress: onToggle, disabled: isEmpty },
+        React.createElement(View, { style: styles.headerContainer },
+            header,
+            !isEmpty && (React.createElement(ReanimatedView, { style: [animatedStyle] },
+                React.createElement(Icon, { name: "arrowUp", color: "grey" }))))));
+}
+function DisclosureContent({ content, open, animationDuration, }) {
+    const [maxHeight, setMaxHeight] = useState(0);
+    const height = useSharedValue(0);
+    const onContentLayoutChange = (event) => {
+        const newHeight = event.nativeEvent.layout.height;
+        setMaxHeight(newHeight);
+    };
+    height.value = withTiming(open ? maxHeight : 0, {
+        duration: animationDuration,
+        easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+    });
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            height: height.value,
+        };
+    }, []);
+    return (React.createElement(ReanimatedScrollView, { scrollEnabled: false, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, style: [styles.contentContainer, animatedStyle] },
+        React.createElement(View, { testID: "content", onLayout: onContentLayoutChange }, content)));
+}

package/dist/src/Disclosure/Disclosure.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    headerContainer: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+    },
+    countColumn: {
+        paddingRight: tokens["space-base"],
+    },
+    titleContainer: {
+        flexDirection: "row",
+    },
+    contentContainer: {
+        paddingTop: tokens["space-small"],
+    },
+});

package/dist/src/Disclosure/constants.js

@@ -0,0 +1 @@
+export const EASE_CUBIC_IN_OUT = [0.645, 0.045, 0.355, 1.0];

package/dist/src/Disclosure/index.js

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

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