initial commit
This commit is contained in:
backuppc
251
components/FilePane.tsx
Normal file
251
components/FilePane.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { FileItem, FileType } from '../types';
|
||||
import { FileIcon } from './Icon';
|
||||
import { formatBytes, formatDate } from '../utils/formatters';
|
||||
import { ArrowUp, Server, Monitor, FolderOpen, RefreshCw, FolderPlus, Trash2, FilePenLine, Search } from 'lucide-react';
|
||||
|
||||
interface FilePaneProps {
|
||||
title: string;
|
||||
icon: 'local' | 'remote';
|
||||
path: string;
|
||||
files: FileItem[];
|
||||
isLoading: boolean;
|
||||
onNavigate: (path: string) => void;
|
||||
onNavigateUp: () => void;
|
||||
onSelectionChange: (ids: Set<string>) => void;
|
||||
selectedIds: Set<string>;
|
||||
connected?: boolean;
|
||||
onCreateFolder?: () => void;
|
||||
onDelete?: () => void;
|
||||
onRename?: () => void;
|
||||
}
|
||||
|
||||
const FilePane: React.FC<FilePaneProps> = ({
|
||||
title,
|
||||
icon,
|
||||
path,
|
||||
files,
|
||||
isLoading,
|
||||
onNavigate,
|
||||
onNavigateUp,
|
||||
onSelectionChange,
|
||||
selectedIds,
|
||||
connected = true,
|
||||
onCreateFolder,
|
||||
onDelete,
|
||||
onRename
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [lastClickedId, setLastClickedId] = useState<string | null>(null);
|
||||
|
||||
// Filter files based on search term
|
||||
const displayFiles = useMemo(() => {
|
||||
if (!searchTerm) return files;
|
||||
return files.filter(f => f.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
}, [files, searchTerm]);
|
||||
|
||||
const handleRowClick = (e: React.MouseEvent, file: FileItem) => {
|
||||
e.preventDefault(); // Prevent text selection
|
||||
|
||||
let newSelected = new Set(selectedIds);
|
||||
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
// Toggle selection
|
||||
if (newSelected.has(file.id)) {
|
||||
newSelected.delete(file.id);
|
||||
} else {
|
||||
newSelected.add(file.id);
|
||||
}
|
||||
setLastClickedId(file.id);
|
||||
} else if (e.shiftKey && lastClickedId) {
|
||||
// Range selection
|
||||
const lastIndex = displayFiles.findIndex(f => f.id === lastClickedId);
|
||||
const currentIndex = displayFiles.findIndex(f => f.id === file.id);
|
||||
|
||||
if (lastIndex !== -1 && currentIndex !== -1) {
|
||||
const start = Math.min(lastIndex, currentIndex);
|
||||
const end = Math.max(lastIndex, currentIndex);
|
||||
|
||||
newSelected = new Set();
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
newSelected.add(displayFiles[i].id);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Single selection
|
||||
newSelected = new Set([file.id]);
|
||||
setLastClickedId(file.id);
|
||||
}
|
||||
|
||||
onSelectionChange(newSelected);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="bg-slate-50 p-2 border-b border-slate-200 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-slate-700 font-semibold text-sm">
|
||||
{icon === 'local' ? <Monitor size={16} /> : <Server size={16} />}
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white px-2 py-1 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 truncate shadow-sm">
|
||||
<span className="text-slate-400">경로:</span>
|
||||
<span className="font-mono text-slate-700 select-all">{path}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="bg-white p-1 border-b border-slate-200 flex gap-1 items-center">
|
||||
<button
|
||||
onClick={onNavigateUp}
|
||||
disabled={path === '/'}
|
||||
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
title="상위 폴더로 이동"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-slate-200 mx-1"></div>
|
||||
<button
|
||||
onClick={onCreateFolder}
|
||||
disabled={!connected || isLoading}
|
||||
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
title="새 폴더 생성"
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onRename}
|
||||
disabled={selectedIds.size !== 1 || !connected || isLoading}
|
||||
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
title="이름 변경"
|
||||
>
|
||||
<FilePenLine size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
disabled={selectedIds.size === 0 || !connected || isLoading}
|
||||
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors"
|
||||
title="새로고침"
|
||||
onClick={() => onNavigate(path)} // Simple refresh
|
||||
disabled={!connected || isLoading}
|
||||
>
|
||||
<RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
|
||||
<div className="flex-1"></div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative group">
|
||||
<Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="검색..."
|
||||
className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Grid */}
|
||||
<div className="flex-1 overflow-auto bg-white relative" onClick={() => onSelectionChange(new Set())}>
|
||||
{!connected ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400">
|
||||
<Server size={48} className="mb-4 opacity-20" />
|
||||
<p>서버에 연결되지 않음</p>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400">
|
||||
<p className="mt-4 text-sm">목록 조회 중...</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-xs text-left border-collapse" onClick={(e) => e.stopPropagation()}>
|
||||
<thead className="bg-slate-50 text-slate-500 sticky top-0 z-10 shadow-sm">
|
||||
<tr>
|
||||
<th className="p-2 w-8 font-medium border-b border-slate-200"></th>
|
||||
<th className="p-2 font-medium border-b border-slate-200">파일명</th>
|
||||
<th className="p-2 w-24 font-medium border-b border-slate-200 text-right">크기</th>
|
||||
<th className="p-2 w-32 font-medium border-b border-slate-200 text-right hidden lg:table-cell">종류</th>
|
||||
<th className="p-2 w-32 font-medium border-b border-slate-200 text-right hidden md:table-cell">수정일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Back Button Row */}
|
||||
{path !== '/' && !searchTerm && (
|
||||
<tr
|
||||
className="hover:bg-slate-50 cursor-pointer text-slate-500"
|
||||
onClick={onNavigateUp}
|
||||
>
|
||||
<td className="p-2 text-center"><FolderOpen size={14} /></td>
|
||||
<td className="p-2 font-semibold">..</td>
|
||||
<td className="p-2"></td>
|
||||
<td className="p-2 hidden lg:table-cell"></td>
|
||||
<td className="p-2 hidden md:table-cell"></td>
|
||||
</tr>
|
||||
)}
|
||||
{displayFiles.map((file) => {
|
||||
const isSelected = selectedIds.has(file.id);
|
||||
return (
|
||||
<tr
|
||||
key={file.id}
|
||||
onClick={(e) => handleRowClick(e, file)}
|
||||
onDoubleClick={() => {
|
||||
if (file.type === FileType.FOLDER) {
|
||||
onNavigate(path === '/' ? `/${file.name}` : `${path}/${file.name}`);
|
||||
onSelectionChange(new Set()); // Clear selection on navigate
|
||||
setSearchTerm(''); // Clear search on navigate
|
||||
}
|
||||
}}
|
||||
className={`cursor-pointer border-b border-slate-50 group select-none ${
|
||||
isSelected
|
||||
? 'bg-blue-100 text-blue-900 border-blue-200'
|
||||
: 'text-slate-700 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<td className="p-2 text-center">
|
||||
<FileIcon name={file.name} type={file.type} className="w-4 h-4" />
|
||||
</td>
|
||||
<td className="p-2 font-medium group-hover:text-blue-600 truncate max-w-[150px]">
|
||||
{file.name}
|
||||
</td>
|
||||
<td className="p-2 text-right font-mono text-slate-500">
|
||||
{file.type === FileType.FILE ? formatBytes(file.size) : ''}
|
||||
</td>
|
||||
<td className="p-2 text-right text-slate-400 hidden lg:table-cell">
|
||||
{file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
|
||||
</td>
|
||||
<td className="p-2 text-right text-slate-400 hidden md:table-cell whitespace-nowrap">
|
||||
{formatDate(file.date).split(',')[0]}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{displayFiles.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="p-8 text-center text-slate-400">
|
||||
{searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Status */}
|
||||
<div className="bg-slate-50 p-1 px-3 text-xs text-slate-500 border-t border-slate-200 flex justify-between">
|
||||
<span>{files.length} 개 항목 {selectedIds.size > 0 && `(${selectedIds.size}개 선택됨)`}</span>
|
||||
<span>{connected ? '준비됨' : '오프라인'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilePane;
|
||||
Reference in New Issue
Block a user