@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/fileManagement/FileDetailsModal.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { FileMetadata } from '@oxyhq/core';
+import type { ThemeStyles } from '../../hooks/useThemeStyles';
+interface FileDetailsModalProps {
+    visible: boolean;
+    file: FileMetadata | null;
+    onClose: () => void;
+    onDownload: (fileId: string, filename: string) => void;
+    onDelete: (fileId: string, filename: string) => void;
+    themeStyles: ThemeStyles;
+    isOwner: boolean;
+}
+export declare const FileDetailsModal: React.FC<FileDetailsModalProps>;
+export {};

package/src/ui/components/fileManagement/FileDetailsModal.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileDetailsModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const fileManagement_1 = require("../../utils/fileManagement");
+const styles_1 = require("./styles");
+const FileDetailsModal = ({ visible, file, onClose, onDownload, onDelete, themeStyles, isOwner, }) => {
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+    if (!file)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: onClose, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.modalContainer, { backgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.modalHeader, { borderBottomColor: borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles_1.fileManagementStyles.modalCloseButton, onPress: onClose, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 24, color: themeStyles.textColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.modalTitle, { color: themeStyles.textColor }], children: "File Details" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.modalPlaceholder })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles_1.fileManagementStyles.modalContent, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.fileDetailIcon, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(file.contentType), size: 64, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDetailName, { color: themeStyles.textColor }], children: file.filename }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileDetailInfo, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.detailRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Size:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailValue, { color: themeStyles.textColor }], children: (0, fileManagement_1.formatFileSize)(file.length) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.detailRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Type:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailValue, { color: themeStyles.textColor }], children: file.contentType })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.detailRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Uploaded:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailValue, { color: themeStyles.textColor }], children: new Date(file.uploadDate).toLocaleString() })] }), file.metadata?.description && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.detailRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Description:" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.detailValue, { color: themeStyles.textColor }], children: file.metadata.description })] }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.modalActions, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.primaryColor }], onPress: () => {
+                                            onDownload(file.id, file.filename);
+                                            onClose();
+                                        }, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "download", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.modalActionText, children: "Download" })] }), isOwner && ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.dangerColor }], onPress: () => {
+                                            onClose();
+                                            onDelete(file.id, file.filename);
+                                        }, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.modalActionText, children: "Delete" })] }))] })] }) })] }) }));
+};
+exports.FileDetailsModal = FileDetailsModal;

package/src/ui/components/fileManagement/FileViewer.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { FileMetadata } from '@oxyhq/core';
+import type { ThemeStyles } from '../../hooks/useThemeStyles';
+interface FileViewerProps {
+    file: FileMetadata;
+    fileContent: string | null;
+    loadingFileContent: boolean;
+    showFileDetailsInViewer: boolean;
+    onToggleDetails: () => void;
+    onClose: () => void;
+    onDownload: (fileId: string, filename: string) => void;
+    onDelete: (fileId: string, filename: string) => void;
+    themeStyles: ThemeStyles;
+    isOwner: boolean;
+}
+export declare const FileViewer: React.FC<FileViewerProps>;
+export {};

package/src/ui/components/fileManagement/FileViewer.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const expo_image_1 = require("expo-image");
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+const vector_icons_1 = require("@expo/vector-icons");
+const fileManagement_1 = require("../../utils/fileManagement");
+const styles_1 = require("./styles");
+const GroupedSection_1 = require("../GroupedSection");
+const FileViewer = ({ file, fileContent, loadingFileContent, showFileDetailsInViewer, onToggleDetails, onClose, onDownload, onDelete, themeStyles, isOwner, }) => {
+    const isImage = file.contentType.startsWith('image/');
+    const isText = file.contentType.startsWith('text/') ||
+        file.contentType.includes('json') ||
+        file.contentType.includes('xml') ||
+        file.contentType.includes('javascript') ||
+        file.contentType.includes('typescript');
+    const isPDF = file.contentType.includes('pdf');
+    const isVideo = file.contentType.startsWith('video/');
+    const isAudio = file.contentType.startsWith('audio/');
+    const backgroundColor = isImage && fileContent
+        ? 'transparent'
+        : themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [imageDimensions, setImageDimensions] = (0, react_1.useState)(null);
+    // Load image dimensions when image content is available
+    (0, react_1.useEffect)(() => {
+        if (isImage && fileContent) {
+            react_native_1.Image.getSize(fileContent, (width, height) => {
+                setImageDimensions({ width, height });
+            }, () => {
+                // Fallback if dimensions can't be loaded
+                setImageDimensions({ width: 400, height: 400 });
+            });
+        }
+        else {
+            setImageDimensions(null);
+        }
+    }, [isImage, fileContent]);
+    // Calculate display size based on natural dimensions and max constraints
+    // Use natural size when smaller, scale down when larger
+    const imageDisplaySize = (0, react_1.useMemo)(() => {
+        if (!imageDimensions || !containerWidth) {
+            // Return default size while loading
+            return { width: 400, height: 400 };
+        }
+        const maxWidth = containerWidth - 24; // Account for padding
+        const maxHeight = 500;
+        const aspectRatio = imageDimensions.width / imageDimensions.height;
+        // Start with natural dimensions
+        let displayWidth = imageDimensions.width;
+        let displayHeight = imageDimensions.height;
+        // Only scale down if exceeds max width
+        if (displayWidth > maxWidth) {
+            displayWidth = maxWidth;
+            displayHeight = displayWidth / aspectRatio;
+        }
+        // Only scale down if exceeds max height
+        if (displayHeight > maxHeight) {
+            displayHeight = maxHeight;
+            displayWidth = displayHeight * aspectRatio;
+        }
+        return { width: displayWidth, height: displayHeight };
+    }, [imageDimensions, containerWidth]);
+    const fileDetailItems = (0, react_1.useMemo)(() => {
+        const items = [
+            {
+                id: 'filename',
+                icon: 'file-document',
+                iconColor: themeStyles.colors.iconSecurity,
+                title: 'File Name',
+                subtitle: file.filename,
+            },
+            {
+                id: 'size',
+                icon: 'server',
+                iconColor: themeStyles.colors.iconStorage,
+                title: 'Size',
+                subtitle: (0, fileManagement_1.formatFileSize)(file.length),
+            },
+            {
+                id: 'type',
+                icon: 'code-tags',
+                iconColor: themeStyles.colors.iconData,
+                title: 'Type',
+                subtitle: file.contentType,
+            },
+            {
+                id: 'uploaded',
+                icon: 'clock',
+                iconColor: themeStyles.colors.iconPersonalInfo,
+                title: 'Uploaded',
+                subtitle: new Date(file.uploadDate).toLocaleString(),
+            },
+        ];
+        if (file.metadata?.description) {
+            items.push({
+                id: 'description',
+                icon: 'text',
+                iconColor: themeStyles.colors.iconData,
+                title: 'Description',
+                subtitle: file.metadata.description,
+            });
+        }
+        items.push({
+            id: 'fileId',
+            icon: 'key',
+            iconColor: themeStyles.colors.iconSecurity,
+            title: 'File ID',
+            subtitle: file.id,
+        });
+        return items;
+    }, [file, themeStyles.colors]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.fileViewerContainer, { backgroundColor }], children: [isImage && fileContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: fileContent }, style: styles_1.fileManagementStyles.backgroundImage, contentFit: "cover", blurRadius: 50, transition: 120, cachePolicy: "memory-disk" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.backgroundOverlay, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }] })] })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.floatingBackButton, { backgroundColor: themeStyles.colors.card }], onPress: onClose, children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "arrow-left", size: 20, color: themeStyles.textColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.floatingDownloadButton, { backgroundColor: themeStyles.colors.card }], onPress: () => onDownload(file.id, file.filename), children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "download", size: 20, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles_1.fileManagementStyles.fileViewerContent, contentContainerStyle: styles_1.fileManagementStyles.fileViewerContentContainer, children: loadingFileContent ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileViewerLoading, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileViewerLoadingText, { color: themeStyles.textColor }], children: "Loading file content..." })] })) : isImage && fileContent ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.imageContainer, onLayout: (e) => {
+                        const width = e.nativeEvent.layout.width;
+                        if (width > 0) {
+                            setContainerWidth(width);
+                        }
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            styles_1.fileManagementStyles.imageWrapper,
+                            {
+                                width: imageDisplaySize.width,
+                                height: imageDisplaySize.height,
+                            }
+                        ], children: (0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: fileContent }, style: {
+                                width: imageDisplaySize.width,
+                                height: imageDisplaySize.height,
+                            }, contentFit: "contain", transition: 120, cachePolicy: "memory-disk", onError: () => {
+                                // Image failed to load
+                            }, accessibilityLabel: file.filename }) }) })) : isText && fileContent ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.textContainer, { backgroundColor: themeStyles.colors.card }], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: { flex: 1 }, nestedScrollEnabled: true, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.textContent, { color: themeStyles.textColor }], children: fileContent }) }) })) : isPDF && fileContent ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.unsupportedFileContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "file-pdf-box", size: 64, color: themeStyles.colors.secondaryText }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }], children: "PDF Preview Not Available" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }], children: ["PDF files cannot be previewed in this viewer.", '\n', "Download the file to view its contents."] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }], onPress: () => onDownload(file.id, file.filename), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "download", size: 18, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.downloadButtonText, children: "Download PDF" })] })] })) : isVideo && fileContent ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.unsupportedFileContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "video-outline", size: 64, color: themeStyles.colors.secondaryText }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }], children: "Video Playback Not Available" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }], children: ["Video playback is not supported in this viewer.", '\n', "Download the file to view it."] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }], onPress: () => onDownload(file.id, file.filename), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "download", size: 18, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.downloadButtonText, children: "Download Video" })] })] })) : isAudio && fileContent ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.unsupportedFileContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "music-note-outline", size: 64, color: themeStyles.colors.secondaryText }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }], children: "Audio Playback Not Available" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }], children: ["Audio playback is not supported in this viewer.", '\n', "Download the file to listen to it."] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }], onPress: () => onDownload(file.id, file.filename), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "download", size: 18, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.downloadButtonText, children: "Download Audio" })] })] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.unsupportedFileContainer, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "file-outline", size: 64, color: themeStyles.colors.secondaryText }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileTitle, { color: themeStyles.textColor }], children: "Preview Not Available" }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.unsupportedFileDescription, { color: themeStyles.colors.secondaryText }], children: ["This file type cannot be previewed.", '\n', "Download the file to view its contents."] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.downloadButtonLarge, { backgroundColor: themeStyles.primaryColor }], onPress: () => onDownload(file.id, file.filename), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "download", size: 18, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.downloadButtonText, children: "Download File" })] })] })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.fileDetailsSection, { backgroundColor: themeStyles.colors.card }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileDetailsSectionHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDetailsSectionTitle, { color: themeStyles.textColor }], children: "File Details" }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles_1.fileManagementStyles.fileDetailsSectionToggle, onPress: onToggleDetails, children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: showFileDetailsInViewer ? "chevron-up" : "chevron-down", size: 20, color: themeStyles.colors.secondaryText }) })] }), showFileDetailsInViewer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.fileDetailsSectionContent, children: (0, jsx_runtime_1.jsx)(GroupedSection_1.GroupedSection, { items: fileDetailItems }) }), isOwner && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.fileDetailsActions, children: (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.fileDetailsActionButton, { backgroundColor: themeStyles.dangerColor }], onPress: () => {
+                                        onClose();
+                                        onDelete(file.id, file.filename);
+                                    }, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: "delete", size: 16, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.fileDetailsActionText, children: "Delete" })] }) }))] }))] })] }));
+};
+exports.FileViewer = FileViewer;

package/src/ui/components/fileManagement/UploadPreview.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { ThemeStyles } from '../../hooks/useThemeStyles';
+interface PendingFile {
+    file: File | Blob;
+    preview?: string;
+    size: number;
+    name: string;
+    type: string;
+}
+interface UploadPreviewProps {
+    visible: boolean;
+    pendingFiles: PendingFile[];
+    onConfirm: () => void;
+    onCancel: () => void;
+    onRemoveFile: (index: number) => void;
+    themeStyles: ThemeStyles;
+    inline?: boolean;
+}
+export declare const UploadPreview: React.FC<UploadPreviewProps>;
+export {};

package/src/ui/components/fileManagement/UploadPreview.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const expo_image_1 = require("expo-image");
+const vector_icons_1 = require("@expo/vector-icons");
+const fileManagement_1 = require("../../utils/fileManagement");
+const styles_1 = require("./styles");
+const UploadPreviewContent = ({ pendingFiles, onConfirm, onCancel, onRemoveFile, themeStyles, }) => {
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+    const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadPreviewContainer, { backgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadPreviewHeader, { borderBottomColor: borderColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewTitle, { color: themeStyles.textColor }], children: ["Review Files (", pendingFiles.length, ")"] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onCancel, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 24, color: themeStyles.textColor }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles_1.fileManagementStyles.uploadPreviewList, children: pendingFiles.map((pendingFile, index) => {
+                    const isImage = pendingFile.type.startsWith('image/');
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            styles_1.fileManagementStyles.uploadPreviewItem,
+                            { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }
+                        ], children: [isImage && pendingFile.preview ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: pendingFile.preview }, style: styles_1.fileManagementStyles.uploadPreviewThumbnail, contentFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(pendingFile.type), size: 32, color: themeStyles.primaryColor }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadPreviewInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewName, { color: themeStyles.textColor }], numberOfLines: 1, children: pendingFile.name }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewMeta, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: [(0, fileManagement_1.formatFileSize)(pendingFile.size), " \u2022 ", pendingFile.type] })] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles_1.fileManagementStyles.uploadPreviewRemove, onPress: () => onRemoveFile(index), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 24, color: themeStyles.dangerColor }) })] }, index));
+                }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadPreviewFooter, { borderTopColor: borderColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadPreviewStats, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewStatsText, { color: themeStyles.textColor }], children: [pendingFiles.length, " file", pendingFiles.length !== 1 ? 's' : ''] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewStatsText, { color: themeStyles.textColor }], children: (0, fileManagement_1.formatFileSize)(totalSize) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadPreviewActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                    styles_1.fileManagementStyles.uploadPreviewCancelButton,
+                                    { borderColor, backgroundColor: 'transparent' }
+                                ], onPress: onCancel, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadPreviewCancelText, { color: themeStyles.textColor }], children: "Cancel" }) }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.uploadPreviewConfirmButton, { backgroundColor: themeStyles.primaryColor }], onPress: onConfirm, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.uploadPreviewConfirmText, children: "Upload" })] })] })] })] }));
+};
+const UploadPreview = ({ visible, pendingFiles, onConfirm, onCancel, onRemoveFile, themeStyles, inline = false, }) => {
+    // If inline mode, render content directly without Modal
+    if (inline) {
+        if (!visible)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(UploadPreviewContent, { pendingFiles: pendingFiles, onConfirm: onConfirm, onCancel: onCancel, onRemoveFile: onRemoveFile, themeStyles: themeStyles }));
+    }
+    // Default: render with Modal (for backward compatibility)
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: onCancel, children: (0, jsx_runtime_1.jsx)(UploadPreviewContent, { pendingFiles: pendingFiles, onConfirm: onConfirm, onCancel: onCancel, onRemoveFile: onRemoveFile, themeStyles: themeStyles }) }));
+};
+exports.UploadPreview = UploadPreview;