@oxyhq/services
Version:
175 lines (173 loc) • 6.26 kB
JavaScript
"use strict";
import React from 'react';
import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { formatFileSize, getFileIcon } from "../../utils/fileManagement.js";
import { fileManagementStyles } from "./styles.js";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
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 /*#__PURE__*/_jsxs(View, {
style: [fileManagementStyles.uploadPreviewContainer, {
backgroundColor
}],
children: [/*#__PURE__*/_jsxs(View, {
style: [fileManagementStyles.uploadPreviewHeader, {
borderBottomColor: borderColor
}],
children: [/*#__PURE__*/_jsxs(Text, {
style: [fileManagementStyles.uploadPreviewTitle, {
color: themeStyles.textColor
}],
children: ["Review Files (", pendingFiles.length, ")"]
}), /*#__PURE__*/_jsx(TouchableOpacity, {
onPress: onCancel,
children: /*#__PURE__*/_jsx(Ionicons, {
name: "close",
size: 24,
color: themeStyles.textColor
})
})]
}), /*#__PURE__*/_jsx(ScrollView, {
style: fileManagementStyles.uploadPreviewList,
children: pendingFiles.map((pendingFile, index) => {
const isImage = pendingFile.type.startsWith('image/');
return /*#__PURE__*/_jsxs(View, {
style: [fileManagementStyles.uploadPreviewItem, {
backgroundColor: themeStyles.secondaryBackgroundColor,
borderColor
}],
children: [isImage && pendingFile.preview ? /*#__PURE__*/_jsx(ExpoImage, {
source: {
uri: pendingFile.preview
},
style: fileManagementStyles.uploadPreviewThumbnail,
contentFit: "cover"
}) : /*#__PURE__*/_jsx(View, {
style: [fileManagementStyles.uploadPreviewIconContainer, {
backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: getFileIcon(pendingFile.type),
size: 32,
color: themeStyles.primaryColor
})
}), /*#__PURE__*/_jsxs(View, {
style: fileManagementStyles.uploadPreviewInfo,
children: [/*#__PURE__*/_jsx(Text, {
style: [fileManagementStyles.uploadPreviewName, {
color: themeStyles.textColor
}],
numberOfLines: 1,
children: pendingFile.name
}), /*#__PURE__*/_jsxs(Text, {
style: [fileManagementStyles.uploadPreviewMeta, {
color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
}],
children: [formatFileSize(pendingFile.size), " \u2022 ", pendingFile.type]
})]
}), /*#__PURE__*/_jsx(TouchableOpacity, {
style: fileManagementStyles.uploadPreviewRemove,
onPress: () => onRemoveFile(index),
children: /*#__PURE__*/_jsx(Ionicons, {
name: "close-circle",
size: 24,
color: themeStyles.dangerColor
})
})]
}, index);
})
}), /*#__PURE__*/_jsxs(View, {
style: [fileManagementStyles.uploadPreviewFooter, {
borderTopColor: borderColor
}],
children: [/*#__PURE__*/_jsxs(View, {
style: fileManagementStyles.uploadPreviewStats,
children: [/*#__PURE__*/_jsxs(Text, {
style: [fileManagementStyles.uploadPreviewStatsText, {
color: themeStyles.textColor
}],
children: [pendingFiles.length, " file", pendingFiles.length !== 1 ? 's' : '']
}), /*#__PURE__*/_jsx(Text, {
style: [fileManagementStyles.uploadPreviewStatsText, {
color: themeStyles.textColor
}],
children: formatFileSize(totalSize)
})]
}), /*#__PURE__*/_jsxs(View, {
style: fileManagementStyles.uploadPreviewActions,
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
style: [fileManagementStyles.uploadPreviewCancelButton, {
borderColor,
backgroundColor: 'transparent'
}],
onPress: onCancel,
children: /*#__PURE__*/_jsx(Text, {
style: [fileManagementStyles.uploadPreviewCancelText, {
color: themeStyles.textColor
}],
children: "Cancel"
})
}), /*#__PURE__*/_jsxs(TouchableOpacity, {
style: [fileManagementStyles.uploadPreviewConfirmButton, {
backgroundColor: themeStyles.primaryColor
}],
onPress: onConfirm,
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "cloud-upload",
size: 20,
color: "#FFFFFF"
}), /*#__PURE__*/_jsx(Text, {
style: fileManagementStyles.uploadPreviewConfirmText,
children: "Upload"
})]
})]
})]
})]
});
};
export 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 /*#__PURE__*/_jsx(UploadPreviewContent, {
pendingFiles: pendingFiles,
onConfirm: onConfirm,
onCancel: onCancel,
onRemoveFile: onRemoveFile,
themeStyles: themeStyles
});
}
// Default: render with Modal (for backward compatibility)
return /*#__PURE__*/_jsx(Modal, {
visible: visible,
animationType: "slide",
presentationStyle: "pageSheet",
onRequestClose: onCancel,
children: /*#__PURE__*/_jsx(UploadPreviewContent, {
pendingFiles: pendingFiles,
onConfirm: onConfirm,
onCancel: onCancel,
onRemoveFile: onRemoveFile,
themeStyles: themeStyles
})
});
};
//# sourceMappingURL=UploadPreview.js.map