mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-24 13:19:23 +00:00

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>
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import React, { createContext, useContext, useState, useCallback } from 'react';
|
|
import { useFileHandler } from '../hooks/useFileHandler';
|
|
|
|
interface FilesModalContextType {
|
|
isFilesModalOpen: boolean;
|
|
openFilesModal: () => void;
|
|
closeFilesModal: () => void;
|
|
onFileSelect: (file: File) => void;
|
|
onFilesSelect: (files: File[]) => void;
|
|
onModalClose: () => void;
|
|
setOnModalClose: (callback: () => void) => void;
|
|
}
|
|
|
|
const FilesModalContext = createContext<FilesModalContextType | null>(null);
|
|
|
|
export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { addToActiveFiles, addMultipleFiles } = useFileHandler();
|
|
const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
|
|
const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
|
|
|
|
const openFilesModal = useCallback(() => {
|
|
setIsFilesModalOpen(true);
|
|
}, []);
|
|
|
|
const closeFilesModal = useCallback(() => {
|
|
setIsFilesModalOpen(false);
|
|
onModalClose?.();
|
|
}, [onModalClose]);
|
|
|
|
const handleFileSelect = useCallback((file: File) => {
|
|
addToActiveFiles(file);
|
|
closeFilesModal();
|
|
}, [addToActiveFiles, closeFilesModal]);
|
|
|
|
const handleFilesSelect = useCallback((files: File[]) => {
|
|
addMultipleFiles(files);
|
|
closeFilesModal();
|
|
}, [addMultipleFiles, closeFilesModal]);
|
|
|
|
const setModalCloseCallback = useCallback((callback: () => void) => {
|
|
setOnModalClose(() => callback);
|
|
}, []);
|
|
|
|
const contextValue: FilesModalContextType = {
|
|
isFilesModalOpen,
|
|
openFilesModal,
|
|
closeFilesModal,
|
|
onFileSelect: handleFileSelect,
|
|
onFilesSelect: handleFilesSelect,
|
|
onModalClose,
|
|
setOnModalClose: setModalCloseCallback,
|
|
};
|
|
|
|
return (
|
|
<FilesModalContext.Provider value={contextValue}>
|
|
{children}
|
|
</FilesModalContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useFilesModalContext = () => {
|
|
const context = useContext(FilesModalContext);
|
|
if (!context) {
|
|
throw new Error('useFilesModalContext must be used within FilesModalProvider');
|
|
}
|
|
return context;
|
|
}; |