@oxyhq/services/lib/module/ui/components/fileManagement/styles.js

OxyHQ Expo/React Native SDK — UI components, screens, and native features

"use strict";

import { StyleSheet } from 'react-native';
import { fontFamilies } from "../../styles/fonts.js";
export const fileManagementStyles = StyleSheet.create({
  container: {
    flex: 1
  },
  selectionBadge: {
    position: 'absolute',
    top: 4,
    right: 4,
    backgroundColor: 'rgba(0,0,0,0.4)',
    borderRadius: 12,
    padding: 2
  },
  loadingMoreBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    gap: 8
  },
  loadingMoreText: {
    fontSize: 13,
    fontWeight: '500'
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    position: 'relative'
  },
  backButton: {
    padding: 12,
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 44,
    minHeight: 44
  },
  headerTitleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 16
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: '700',
    fontFamily: fontFamilies.interBold,
    letterSpacing: -0.5,
    lineHeight: 28
  },
  headerSubtitle: {
    fontSize: 13,
    fontWeight: '500',
    fontFamily: fontFamilies.interMedium,
    marginTop: 2,
    letterSpacing: 0.2
  },
  uploadButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadProgress: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadProgressText: {
    color: '#FFFFFF',
    fontSize: 10,
    fontWeight: '600',
    marginTop: 2
  },
  uploadBannerContainer: {
    position: 'absolute',
    top: 72,
    left: 0,
    right: 0,
    alignItems: 'center',
    zIndex: 50
  },
  uploadBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 24,
    gap: 10,
    borderWidth: 1,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 6,
    shadowOffset: {
      width: 0,
      height: 2
    },
    elevation: 2,
    minWidth: 200
  },
  uploadBannerContent: {
    flex: 1,
    gap: 6
  },
  uploadBannerText: {
    fontSize: 13,
    fontWeight: '500'
  },
  uploadProgressBarContainer: {
    height: 3,
    backgroundColor: 'rgba(0,0,0,0.1)',
    borderRadius: 2,
    overflow: 'hidden'
  },
  uploadProgressBar: {
    height: '100%',
    borderRadius: 2
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    paddingVertical: 10,
    marginHorizontal: 12,
    marginTop: 0,
    marginBottom: 12,
    borderRadius: 999,
    gap: 10
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    fontFamily: fontFamilies.inter,
    lineHeight: 20
  },
  searchClearButton: {
    padding: 4,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center'
  },
  statsContainer: {
    flexDirection: 'row',
    paddingHorizontal: 14,
    paddingVertical: 10,
    marginHorizontal: 12,
    marginTop: 0,
    marginBottom: 12,
    borderRadius: 18
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 4
  },
  statValue: {
    fontSize: 20,
    fontWeight: '800',
    fontFamily: fontFamilies.interBold,
    letterSpacing: -0.5,
    lineHeight: 24
  },
  statLabel: {
    fontSize: 12,
    fontWeight: '500',
    fontFamily: fontFamilies.interMedium,
    marginTop: 2,
    letterSpacing: 0.2
  },
  scrollView: {
    flex: 1
  },
  scrollContainer: {
    paddingHorizontal: 12,
    paddingTop: 0,
    paddingBottom: 12
  },
  fileItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    marginBottom: 8,
    borderRadius: 10,
    borderWidth: 1
  },
  fileContent: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  fileIconContainer: {
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12
  },
  filePreviewContainer: {
    width: 52,
    height: 52,
    marginRight: 10
  },
  filePreview: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    position: 'relative'
  },
  previewImage: {
    width: '100%',
    height: '100%',
    borderRadius: 8
  },
  pdfPreview: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
    backgroundColor: '#FF6B6B20'
  },
  pdfLabel: {
    fontSize: 8,
    fontWeight: 'bold',
    marginTop: 2
  },
  videoPreviewWrapper: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: '#000000',
    alignItems: 'center',
    justifyContent: 'center'
  },
  videoPosterImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%'
  },
  videoOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.25)'
  },
  fallbackIcon: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    borderRadius: 8
  },
  groupedActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    marginLeft: 12
  },
  groupedActionBtn: {
    width: 34,
    height: 34,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  groupedDescription: {
    fontSize: 12,
    lineHeight: 16,
    marginTop: 6
  },
  fileInfo: {
    flex: 1
  },
  fileName: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  },
  fileDetails: {
    fontSize: 14,
    marginBottom: 2
  },
  fileDescription: {
    fontSize: 12,
    fontStyle: 'italic'
  },
  fileActions: {
    flexDirection: 'row',
    gap: 8
  },
  actionButton: {
    width: 36,
    height: 36,
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center'
  },
  emptyState: {
    alignItems: 'center',
    paddingVertical: 40,
    paddingHorizontal: 24
  },
  emptyStateTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: fontFamilies.interBold,
    marginTop: 16,
    marginBottom: 8
  },
  emptyStateDescription: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 32
  },
  emptyStateButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 24,
    gap: 8
  },
  emptyStateButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  },
  modalContainer: {
    flex: 1
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1
  },
  modalCloseButton: {
    padding: 8
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold
  },
  modalPlaceholder: {
    width: 40
  },
  modalContent: {
    flex: 1,
    padding: 16
  },
  fileDetailCard: {
    padding: 18,
    borderRadius: 14,
    borderWidth: 1,
    alignItems: 'center'
  },
  fileDetailIcon: {
    marginBottom: 16
  },
  fileDetailName: {
    fontSize: 20,
    fontWeight: 'bold',
    fontFamily: fontFamilies.interBold,
    textAlign: 'center',
    marginBottom: 24
  },
  fileDetailInfo: {
    width: '100%',
    marginBottom: 32
  },
  detailRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 12,
    flexWrap: 'wrap'
  },
  detailLabel: {
    fontSize: 16,
    fontWeight: '500',
    flex: 1,
    minWidth: 100
  },
  detailValue: {
    fontSize: 16,
    flex: 2,
    textAlign: 'right'
  },
  modalActions: {
    flexDirection: 'row',
    gap: 12,
    width: '100%'
  },
  modalActionButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    borderRadius: 12,
    gap: 8
  },
  modalActionText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  },
  uploadPreviewContainer: {
    flex: 1
  },
  uploadPreviewHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 16,
    borderBottomWidth: 1
  },
  uploadPreviewTitle: {
    fontSize: 20,
    fontWeight: '700',
    fontFamily: fontFamilies.interBold
  },
  uploadPreviewList: {
    flex: 1,
    padding: 16
  },
  uploadPreviewItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderRadius: 12,
    borderWidth: 1,
    marginBottom: 12,
    gap: 12
  },
  uploadPreviewThumbnail: {
    width: 60,
    height: 60,
    borderRadius: 8
  },
  uploadPreviewIconContainer: {
    width: 60,
    height: 60,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadPreviewInfo: {
    flex: 1,
    minWidth: 0
  },
  uploadPreviewName: {
    fontSize: 16,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold,
    marginBottom: 4
  },
  uploadPreviewMeta: {
    fontSize: 13,
    fontFamily: fontFamilies.inter
  },
  uploadPreviewRemove: {
    padding: 4
  },
  uploadPreviewFooter: {
    padding: 16,
    borderTopWidth: 1
  },
  uploadPreviewStats: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16
  },
  uploadPreviewStatsText: {
    fontSize: 15,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold
  },
  uploadPreviewActions: {
    flexDirection: 'row',
    gap: 12
  },
  uploadPreviewCancelButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  uploadPreviewCancelText: {
    fontSize: 16,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold
  },
  uploadPreviewConfirmButton: {
    flex: 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    borderRadius: 12,
    gap: 8
  },
  uploadPreviewConfirmText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold
  },
  fileViewerContainer: {
    flex: 1,
    position: 'relative'
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    zIndex: 0
  },
  backgroundOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1
  },
  fileViewerHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderBottomWidth: 1,
    position: 'relative',
    zIndex: 2
  },
  fileViewerTitleContainer: {
    flex: 1,
    marginHorizontal: 12
  },
  fileViewerTitle: {
    fontSize: 18,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold,
    marginBottom: 2
  },
  fileViewerSubtitle: {
    fontSize: 14
  },
  fileViewerActions: {
    flexDirection: 'row',
    gap: 8
  },
  fileViewerContent: {
    flex: 1,
    position: 'relative',
    zIndex: 2
  },
  fileViewerContentWithDetails: {
    paddingBottom: 20
  },
  fileViewerContentContainer: {
    flexGrow: 1,
    paddingHorizontal: 12,
    paddingTop: 0,
    paddingBottom: 8
  },
  fileViewerLoading: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  fileViewerLoadingText: {
    fontSize: 16,
    marginTop: 16
  },
  imageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    marginTop: 56,
    marginBottom: 8,
    paddingHorizontal: 12
  },
  imageWrapper: {
    borderRadius: 24,
    overflow: 'hidden',
    alignSelf: 'center'
  },
  floatingBackButton: {
    position: 'absolute',
    top: 12,
    left: 12,
    width: 40,
    height: 40,
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10
  },
  floatingDownloadButton: {
    position: 'absolute',
    top: 12,
    right: 12,
    width: 40,
    height: 40,
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10
  },
  textContainer: {
    flex: 1,
    borderRadius: 18,
    borderWidth: 0,
    padding: 12,
    minHeight: 180,
    maxHeight: '80%'
  },
  textContent: {
    fontSize: 14,
    fontFamily: 'monospace',
    lineHeight: 20
  },
  unsupportedFileContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 32,
    paddingHorizontal: 24
  },
  unsupportedFileTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: fontFamilies.interBold,
    marginTop: 16,
    marginBottom: 8,
    textAlign: 'center'
  },
  unsupportedFileDescription: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 32
  },
  downloadButtonLarge: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 999,
    gap: 8
  },
  downloadButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  },
  pdfContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  mediaContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  unsupportedText: {
    fontSize: 16,
    textAlign: 'center',
    fontStyle: 'italic'
  },
  fileDetailsSection: {
    marginHorizontal: 12,
    marginTop: 8,
    marginBottom: 12,
    padding: 0,
    borderRadius: 18,
    borderWidth: 0,
    overflow: 'hidden',
    position: 'relative',
    zIndex: 2
  },
  fileDetailsSectionContent: {
    paddingHorizontal: 12,
    paddingBottom: 8
  },
  fileDetailsSectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    fontFamily: fontFamilies.interSemiBold,
    flex: 1
  },
  fileDetailsSectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 12,
    paddingTop: 10,
    paddingBottom: 6
  },
  fileDetailsSectionToggle: {
    padding: 4
  },
  fileDetailsActions: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 8,
    paddingHorizontal: 12,
    paddingBottom: 10
  },
  fileDetailsActionButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    borderRadius: 999,
    gap: 6
  },
  fileDetailsActionText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600'
  },
  controlsBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 12,
    paddingTop: 12,
    paddingBottom: 12,
    gap: 12
  },
  viewModeScroll: {
    flex: 1,
    maxWidth: '80%'
  },
  viewModeToggle: {
    flexDirection: 'row',
    borderRadius: 999,
    padding: 2,
    overflow: 'hidden'
  },
  viewModeButton: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 999,
    minWidth: 36,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 1
  },
  sortButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 999,
    minWidth: 36,
    gap: 4
  },
  photoScrollContainer: {
    padding: 10
  },
  photoItem: {
    borderRadius: 8,
    overflow: 'hidden'
  },
  photoContainer: {
    width: '100%',
    height: '100%',
    position: 'relative',
    borderRadius: 8,
    overflow: 'hidden'
  },
  photoImage: {
    width: '100%',
    height: '100%'
  },
  dimensionsLoadingIndicator: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    gap: 8
  },
  dimensionsLoadingText: {
    fontSize: 14,
    fontStyle: 'italic'
  },
  justifiedPhotoItem: {
    borderRadius: 6,
    overflow: 'hidden',
    position: 'relative'
  },
  justifiedPhotoContainer: {
    width: '100%',
    height: '100%',
    position: 'relative',
    borderRadius: 6,
    overflow: 'hidden',
    backgroundColor: 'transparent'
  },
  justifiedPhotoImage: {
    width: '100%',
    height: '100%',
    borderRadius: 6
  },
  simplePhotoItem: {
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: 'transparent'
  },
  simplePhotoContainer: {
    width: '100%',
    height: '100%',
    position: 'relative',
    borderRadius: 8,
    overflow: 'hidden'
  },
  simplePhotoImage: {
    width: '100%',
    height: '100%',
    borderRadius: 8
  }
});
//# sourceMappingURL=styles.js.map