274 lines
11 KiB
TypeScript
274 lines
11 KiB
TypeScript
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;
|
|
refreshKey?: number;
|
|
onCreateFolder?: () => void;
|
|
onDelete?: () => void;
|
|
onRename?: () => void;
|
|
}
|
|
|
|
const FilePane: React.FC<FilePaneProps> = ({
|
|
title,
|
|
icon,
|
|
path,
|
|
files,
|
|
isLoading,
|
|
onNavigate,
|
|
onNavigateUp,
|
|
onSelectionChange,
|
|
selectedIds,
|
|
connected = true,
|
|
refreshKey,
|
|
onCreateFolder,
|
|
onDelete,
|
|
onRename
|
|
}) => {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [lastClickedId, setLastClickedId] = useState<string | null>(null);
|
|
const [pathInput, setPathInput] = useState(path);
|
|
|
|
// Sync path input when prop changes OR refreshKey updates
|
|
React.useEffect(() => {
|
|
setPathInput(path);
|
|
}, [path, refreshKey]);
|
|
|
|
const handlePathKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
onNavigate(pathInput);
|
|
} else if (e.key === 'Escape') {
|
|
setPathInput(path); // Revert
|
|
(e.target as HTMLInputElement).blur();
|
|
}
|
|
};
|
|
|
|
// 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 transition-all duration-300 ${!connected ? 'opacity-60 grayscale-[0.5] pointer-events-none' : ''}`}>
|
|
{/* 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 shrink-0">
|
|
{icon === 'local' ? <Monitor size={16} /> : <Server size={16} />}
|
|
<span>{title}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white px-2 py-0.5 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 shadow-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
|
|
<span className="text-slate-400 shrink-0">경로:</span>
|
|
<input
|
|
type="text"
|
|
value={pathInput}
|
|
onChange={(e) => setPathInput(e.target.value)}
|
|
onKeyDown={handlePathKeyDown}
|
|
className="font-mono text-slate-700 w-full outline-none text-xs py-1"
|
|
spellCheck={false}
|
|
/>
|
|
</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; |