mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-02-17 13:52:14 +01: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>
33 lines
900 B
TypeScript
33 lines
900 B
TypeScript
import React from 'react';
|
|
import { TextInput } from '@mantine/core';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useFileManagerContext } from '../../contexts/FileManagerContext';
|
|
|
|
interface SearchInputProps {
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
|
|
const { t } = useTranslation();
|
|
const { searchTerm, onSearchChange } = useFileManagerContext();
|
|
|
|
return (
|
|
<TextInput
|
|
placeholder={t('fileManager.searchFiles', 'Search files...')}
|
|
leftSection={<SearchIcon />}
|
|
value={searchTerm}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
|
|
style={{ padding: '0.5rem', ...style }}
|
|
styles={{
|
|
input: {
|
|
border: 'none',
|
|
backgroundColor: 'transparent'
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SearchInput; |