mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
7e3321ee16
FileManager Component Overview
Purpose: Modal component for selecting and managing PDF files with
preview capabilities
Architecture:
- Responsive Layouts: MobileLayout.tsx (stacked) vs DesktopLayout.tsx
(3-column)
- Central State: FileManagerContext handles file operations, selection,
and modal state
- File Storage: IndexedDB persistence with thumbnail caching
Key Components:
- FileSourceButtons: Switch between Recent/Local/Drive sources
- FileListArea: Scrollable file grid with search functionality
- FilePreview: PDF thumbnails with dynamic shadow stacking (1-2 shadow
pages based on file count)
- FileDetails: File info card with metadata
- CompactFileDetails: Mobile-optimized file info layout
File Flow:
1. Users select source → browse/search files → select multiple files →
preview with navigation → open in
tools
2. Files persist across tool switches via FileContext integration
3. Memory management handles large PDFs (up to 100GB+)
```mermaid
graph TD
FM[FileManager] --> ML[MobileLayout]
FM --> DL[DesktopLayout]
ML --> FSB[FileSourceButtons<br/>Recent/Local/Drive]
ML --> FLA[FileListArea]
ML --> FD[FileDetails]
DL --> FSB
DL --> FLA
DL --> FD
FLA --> FLI[FileListItem]
FD --> FP[FilePreview]
FD --> CFD[CompactFileDetails]
```
---------
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface DragOverlayProps {
|
|
isVisible: boolean;
|
|
}
|
|
|
|
const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
|
|
const { t } = useTranslation();
|
|
const theme = useMantineTheme();
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: alpha(theme.colors.blue[6], 0.1),
|
|
border: `0.125rem dashed ${theme.colors.blue[6]}`,
|
|
borderRadius: '1.875rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1000,
|
|
pointerEvents: 'none'
|
|
}}
|
|
>
|
|
<Stack align="center" gap="md">
|
|
<UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
|
|
<Text size="xl" fw={500} c="blue.6">
|
|
{t('fileManager.dropFilesHere', 'Drop files here to upload')}
|
|
</Text>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DragOverlay; |