96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import { File, Folder, ChevronRight } from '../Icons'
|
|
import type { FileNode } from '../../types/file'
|
|
|
|
interface FileTreeProps {
|
|
nodes: FileNode[]
|
|
depth: number
|
|
expandedDirs: string[]
|
|
toggleDir: (path: string) => void
|
|
activeFilePath: string | null
|
|
onFileClick: (path: string) => void
|
|
}
|
|
|
|
/** AR-02: 从 Sidebar.tsx 提取的递归文件树组件 */
|
|
export const FileTree = React.memo(function FileTree({
|
|
nodes,
|
|
depth,
|
|
expandedDirs,
|
|
toggleDir,
|
|
activeFilePath,
|
|
onFileClick
|
|
}: FileTreeProps) {
|
|
return (
|
|
<>
|
|
{nodes.map((node: FileNode) => {
|
|
const isExpanded = node.type === 'dir' && expandedDirs.includes(node.path)
|
|
const isActive = node.type === 'file' && node.path === activeFilePath
|
|
|
|
return (
|
|
<React.Fragment key={node.path}>
|
|
<div
|
|
className={`tree-item ${isActive ? 'active' : ''}`}
|
|
style={{ paddingLeft: (8 + depth * 16) + 'px' }}
|
|
role="treeitem"
|
|
aria-expanded={node.type === 'dir' ? isExpanded : undefined}
|
|
aria-selected={isActive}
|
|
aria-label={node.name}
|
|
tabIndex={0}
|
|
onClick={() => {
|
|
if (node.type === 'dir') {
|
|
toggleDir(node.path)
|
|
} else {
|
|
onFileClick(node.path)
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault()
|
|
if (node.type === 'dir') {
|
|
toggleDir(node.path)
|
|
} else {
|
|
onFileClick(node.path)
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{node.type === 'dir' ? (
|
|
<>
|
|
<span className={`tree-arrow ${isExpanded ? 'expanded' : ''}`} aria-hidden="true">
|
|
<ChevronRight size={10} />
|
|
</span>
|
|
<span className="tree-icon" aria-hidden="true">
|
|
<Folder size={14} />
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span style={{ width: '16px', flexShrink: 0 }} />
|
|
<span className="tree-icon" aria-hidden="true">
|
|
<File size={14} />
|
|
</span>
|
|
</>
|
|
)}
|
|
<span className="tree-name">{node.name}</span>
|
|
</div>
|
|
{isExpanded && node.children && (
|
|
<div role="group">
|
|
<FileTree
|
|
nodes={node.children}
|
|
depth={depth + 1}
|
|
expandedDirs={expandedDirs}
|
|
toggleDir={toggleDir}
|
|
activeFilePath={activeFilePath}
|
|
onFileClick={onFileClick}
|
|
/>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
})
|
|
|
|
FileTree.displayName = 'FileTree'
|