- Add file-manager-view/ with useFileManagerView, Header, Toolbar, Table, Grid, Empty, Skeleton; types and mockFiles - Layout primitives (min-h-layout-page-sm), no arbitrary values - Stories: Default, Loading, Empty - Re-export from FileManagerView.tsx Co-authored-by: Cursor <cursoragent@cursor.com>
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { useToast } from '@/components/feedback/ToastProvider';
|
|
import type { FileNode } from './types';
|
|
import { MOCK_FILES } from './mockFiles';
|
|
|
|
export interface UseFileManagerViewOptions {
|
|
filesOverride?: FileNode[];
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function useFileManagerView(options: UseFileManagerViewOptions = {}) {
|
|
const { filesOverride, isLoading = false } = options;
|
|
const { addToast } = useToast();
|
|
|
|
const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
|
|
const [currentFolder, setCurrentFolder] = useState('Root');
|
|
const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
|
|
const [showMetadataModal, setShowMetadataModal] = useState(false);
|
|
const [showWatermarkModal, setShowWatermarkModal] = useState(false);
|
|
|
|
const files = filesOverride ?? MOCK_FILES;
|
|
|
|
const filteredFiles = useMemo(
|
|
() =>
|
|
files.filter((f) =>
|
|
f.name.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
),
|
|
[files, searchQuery],
|
|
);
|
|
|
|
const handleFileClick = (file: FileNode) => {
|
|
if (file.type === 'folder') {
|
|
setCurrentFolder(file.name);
|
|
addToast(`Navigated to ${file.name}`, 'info');
|
|
} else {
|
|
setSelectedFileId(file.id);
|
|
}
|
|
};
|
|
|
|
const toggleSelection = (id: string) => {
|
|
setSelectedFiles((prev) =>
|
|
prev.includes(id) ? prev.filter((fid) => fid !== id) : [...prev, id],
|
|
);
|
|
};
|
|
|
|
const selectAll = () => {
|
|
if (selectedFiles.length === files.length) setSelectedFiles([]);
|
|
else setSelectedFiles(files.map((f) => f.id));
|
|
};
|
|
|
|
const handleBulkAction = (action: string) => {
|
|
addToast(`${action} ${selectedFiles.length} files`, 'success');
|
|
setSelectedFiles([]);
|
|
};
|
|
|
|
return {
|
|
viewMode,
|
|
setViewMode,
|
|
searchQuery,
|
|
setSearchQuery,
|
|
selectedFiles,
|
|
currentFolder,
|
|
setCurrentFolder,
|
|
selectedFileId,
|
|
setSelectedFileId,
|
|
showMetadataModal,
|
|
setShowMetadataModal,
|
|
showWatermarkModal,
|
|
setShowWatermarkModal,
|
|
files,
|
|
filteredFiles,
|
|
handleFileClick,
|
|
toggleSelection,
|
|
selectAll,
|
|
handleBulkAction,
|
|
isLoading,
|
|
};
|
|
}
|