mirror of
https://github.com/nicotsx/ironmount.git
synced 2025-12-10 12:10:51 +01:00
537 lines
13 KiB
TypeScript
537 lines
13 KiB
TypeScript
/**
|
|
* FileTree Component
|
|
*
|
|
* Adapted from bolt.new by StackBlitz
|
|
* Copyright (c) 2024 StackBlitz, Inc.
|
|
* Licensed under the MIT License
|
|
*
|
|
* Original source: https://github.com/stackblitz/bolt.new
|
|
*/
|
|
|
|
import { ChevronDown, ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen, Loader2 } from "lucide-react";
|
|
import { memo, type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
|
|
import { cn } from "~/lib/utils";
|
|
import { Checkbox } from "~/components/ui/checkbox";
|
|
|
|
const NODE_PADDING_LEFT = 12;
|
|
|
|
interface FileEntry {
|
|
name: string;
|
|
path: string;
|
|
type: "file" | "directory";
|
|
size?: number;
|
|
modifiedAt?: number;
|
|
}
|
|
|
|
interface Props {
|
|
files?: FileEntry[];
|
|
selectedFile?: string;
|
|
onFileSelect?: (filePath: string) => void;
|
|
onFolderExpand?: (folderPath: string) => void;
|
|
onFolderHover?: (folderPath: string) => void;
|
|
expandedFolders?: Set<string>;
|
|
loadingFolders?: Set<string>;
|
|
className?: string;
|
|
withCheckboxes?: boolean;
|
|
selectedPaths?: Set<string>;
|
|
onSelectionChange?: (selectedPaths: Set<string>) => void;
|
|
foldersOnly?: boolean;
|
|
}
|
|
|
|
export const FileTree = memo((props: Props) => {
|
|
const {
|
|
files = [],
|
|
onFileSelect,
|
|
selectedFile,
|
|
onFolderExpand,
|
|
onFolderHover,
|
|
expandedFolders = new Set(),
|
|
loadingFolders = new Set(),
|
|
className,
|
|
withCheckboxes = false,
|
|
selectedPaths = new Set(),
|
|
onSelectionChange,
|
|
foldersOnly = false,
|
|
} = props;
|
|
|
|
const fileList = useMemo(() => {
|
|
return buildFileList(files, foldersOnly);
|
|
}, [files, foldersOnly]);
|
|
|
|
const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(new Set());
|
|
|
|
const filteredFileList = useMemo(() => {
|
|
const list = [];
|
|
let lastDepth = Number.MAX_SAFE_INTEGER;
|
|
|
|
for (const fileOrFolder of fileList) {
|
|
const depth = fileOrFolder.depth;
|
|
|
|
// if the depth is equal we reached the end of the collapsed group
|
|
if (lastDepth === depth) {
|
|
lastDepth = Number.MAX_SAFE_INTEGER;
|
|
}
|
|
|
|
// ignore collapsed folders
|
|
if (collapsedFolders.has(fileOrFolder.fullPath)) {
|
|
lastDepth = Math.min(lastDepth, depth);
|
|
}
|
|
|
|
// ignore files and folders below the last collapsed folder
|
|
if (lastDepth < depth) {
|
|
continue;
|
|
}
|
|
|
|
list.push(fileOrFolder);
|
|
}
|
|
|
|
return list;
|
|
}, [fileList, collapsedFolders]);
|
|
|
|
const toggleCollapseState = useCallback(
|
|
(fullPath: string) => {
|
|
setCollapsedFolders((prevSet) => {
|
|
const newSet = new Set(prevSet);
|
|
|
|
if (newSet.has(fullPath)) {
|
|
newSet.delete(fullPath);
|
|
onFolderExpand?.(fullPath);
|
|
} else {
|
|
newSet.add(fullPath);
|
|
}
|
|
|
|
return newSet;
|
|
});
|
|
},
|
|
[onFolderExpand],
|
|
);
|
|
|
|
// Add new folders to collapsed set when file list changes
|
|
useEffect(() => {
|
|
setCollapsedFolders((prevSet) => {
|
|
const newSet = new Set(prevSet);
|
|
for (const item of fileList) {
|
|
if (item.kind === "folder" && !newSet.has(item.fullPath) && !expandedFolders.has(item.fullPath)) {
|
|
newSet.add(item.fullPath);
|
|
}
|
|
}
|
|
return newSet;
|
|
});
|
|
}, [fileList, expandedFolders]);
|
|
|
|
const handleFileSelect = useCallback(
|
|
(filePath: string) => {
|
|
onFileSelect?.(filePath);
|
|
},
|
|
[onFileSelect],
|
|
);
|
|
|
|
const handleSelectionChange = useCallback(
|
|
(path: string, checked: boolean) => {
|
|
const newSelection = new Set(selectedPaths);
|
|
|
|
if (checked) {
|
|
// Add the path itself
|
|
newSelection.add(path);
|
|
|
|
// Remove any descendants from selection since parent now covers them
|
|
for (const item of fileList) {
|
|
if (item.fullPath.startsWith(`${path}/`)) {
|
|
newSelection.delete(item.fullPath);
|
|
}
|
|
}
|
|
} else {
|
|
// Remove the path itself
|
|
newSelection.delete(path);
|
|
|
|
// Check if any parent is selected - if so, we need to add siblings back
|
|
const pathSegments = path.split("/").filter(Boolean);
|
|
let parentIsSelected = false;
|
|
let selectedParentPath = "";
|
|
|
|
// Check each parent level to see if any are selected
|
|
for (let i = pathSegments.length - 1; i > 0; i--) {
|
|
const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
|
|
if (newSelection.has(parentPath)) {
|
|
parentIsSelected = true;
|
|
selectedParentPath = parentPath;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (parentIsSelected) {
|
|
// Remove the selected parent
|
|
newSelection.delete(selectedParentPath);
|
|
|
|
// Add all siblings and descendants of the selected parent, except the unchecked path and its descendants
|
|
for (const item of fileList) {
|
|
if (
|
|
item.fullPath.startsWith(`${selectedParentPath}/`) &&
|
|
!item.fullPath.startsWith(`${path}/`) &&
|
|
item.fullPath !== path
|
|
) {
|
|
newSelection.add(item.fullPath);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
onSelectionChange?.(newSelection);
|
|
},
|
|
[selectedPaths, onSelectionChange, fileList],
|
|
);
|
|
|
|
// Helper to check if a path is selected (either directly or via parent)
|
|
const isPathSelected = useCallback(
|
|
(path: string): boolean => {
|
|
// Check if directly selected
|
|
if (selectedPaths.has(path)) {
|
|
return true;
|
|
}
|
|
|
|
// Check if any parent is selected
|
|
const pathSegments = path.split("/").filter(Boolean);
|
|
for (let i = pathSegments.length - 1; i > 0; i--) {
|
|
const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
|
|
if (selectedPaths.has(parentPath)) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
[selectedPaths],
|
|
);
|
|
|
|
// Determine if a folder is partially selected (some children selected)
|
|
const isPartiallySelected = useCallback(
|
|
(folderPath: string): boolean => {
|
|
// If the folder itself is selected, it's not partial
|
|
if (selectedPaths.has(folderPath)) {
|
|
return false;
|
|
}
|
|
|
|
// Check if this folder is implicitly selected via a parent
|
|
const pathSegments = folderPath.split("/").filter(Boolean);
|
|
for (let i = pathSegments.length - 1; i > 0; i--) {
|
|
const parentPath = `/${pathSegments.slice(0, i).join("/")}`;
|
|
if (selectedPaths.has(parentPath)) {
|
|
// Parent is selected, so this folder is fully selected, not partial
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Get all children of this folder
|
|
const children = fileList.filter((item) => item.fullPath.startsWith(`${folderPath}/`));
|
|
|
|
if (children.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
// Check how many children are selected (directly or via their parents)
|
|
let selectedCount = 0;
|
|
for (const child of children) {
|
|
if (isPathSelected(child.fullPath)) {
|
|
selectedCount++;
|
|
}
|
|
}
|
|
|
|
// Partial if some but not all children are selected
|
|
return selectedCount > 0 && selectedCount < children.length;
|
|
},
|
|
[selectedPaths, fileList, isPathSelected],
|
|
);
|
|
|
|
return (
|
|
<div className={cn("text-sm", className)}>
|
|
{filteredFileList.map((fileOrFolder) => {
|
|
switch (fileOrFolder.kind) {
|
|
case "file": {
|
|
return (
|
|
<File
|
|
key={fileOrFolder.id}
|
|
selected={selectedFile === fileOrFolder.fullPath}
|
|
file={fileOrFolder}
|
|
onFileSelect={handleFileSelect}
|
|
withCheckbox={withCheckboxes}
|
|
checked={isPathSelected(fileOrFolder.fullPath)}
|
|
onCheckboxChange={handleSelectionChange}
|
|
/>
|
|
);
|
|
}
|
|
case "folder": {
|
|
return (
|
|
<Folder
|
|
key={fileOrFolder.id}
|
|
folder={fileOrFolder}
|
|
collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
|
|
loading={loadingFolders.has(fileOrFolder.fullPath)}
|
|
onToggle={toggleCollapseState}
|
|
onHover={onFolderHover}
|
|
withCheckbox={withCheckboxes}
|
|
checked={isPathSelected(fileOrFolder.fullPath) && !isPartiallySelected(fileOrFolder.fullPath)}
|
|
partiallyChecked={isPartiallySelected(fileOrFolder.fullPath)}
|
|
onCheckboxChange={handleSelectionChange}
|
|
/>
|
|
);
|
|
}
|
|
default: {
|
|
return undefined;
|
|
}
|
|
}
|
|
})}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
interface FolderProps {
|
|
folder: FolderNode;
|
|
collapsed: boolean;
|
|
loading?: boolean;
|
|
onToggle: (fullPath: string) => void;
|
|
onHover?: (fullPath: string) => void;
|
|
withCheckbox?: boolean;
|
|
checked?: boolean;
|
|
partiallyChecked?: boolean;
|
|
onCheckboxChange?: (path: string, checked: boolean) => void;
|
|
}
|
|
|
|
const Folder = memo(
|
|
({
|
|
folder,
|
|
collapsed,
|
|
loading,
|
|
onToggle,
|
|
onHover,
|
|
withCheckbox,
|
|
checked,
|
|
partiallyChecked,
|
|
onCheckboxChange,
|
|
}: FolderProps) => {
|
|
const { depth, name, fullPath } = folder;
|
|
const FolderIconComponent = collapsed ? FolderIcon : FolderOpen;
|
|
|
|
const handleChevronClick = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onToggle(fullPath);
|
|
},
|
|
[onToggle, fullPath],
|
|
);
|
|
|
|
const handleMouseEnter = useCallback(() => {
|
|
if (collapsed) {
|
|
onHover?.(fullPath);
|
|
}
|
|
}, [onHover, fullPath, collapsed]);
|
|
|
|
const handleCheckboxChange = useCallback(
|
|
(value: boolean) => {
|
|
onCheckboxChange?.(fullPath, value);
|
|
},
|
|
[onCheckboxChange, fullPath],
|
|
);
|
|
|
|
return (
|
|
<NodeButton
|
|
className={cn("group hover:bg-accent/50 text-foreground")}
|
|
depth={depth}
|
|
icon={
|
|
loading ? (
|
|
<Loader2 className="w-4 h-4 shrink-0 animate-spin" />
|
|
) : collapsed ? (
|
|
<ChevronRight className="w-4 h-4 shrink-0 cursor-pointer" onClick={handleChevronClick} />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4 shrink-0 cursor-pointer" onClick={handleChevronClick} />
|
|
)
|
|
}
|
|
onMouseEnter={handleMouseEnter}
|
|
>
|
|
{withCheckbox && (
|
|
<Checkbox
|
|
checked={checked ? true : partiallyChecked ? "indeterminate" : false}
|
|
onCheckedChange={handleCheckboxChange}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
)}
|
|
<FolderIconComponent className="w-4 h-4 shrink-0 text-strong-accent" />
|
|
<span className="truncate">{name}</span>
|
|
</NodeButton>
|
|
);
|
|
},
|
|
);
|
|
|
|
interface FileProps {
|
|
file: FileNode;
|
|
selected: boolean;
|
|
onFileSelect: (filePath: string) => void;
|
|
withCheckbox?: boolean;
|
|
checked?: boolean;
|
|
onCheckboxChange?: (path: string, checked: boolean) => void;
|
|
}
|
|
|
|
const File = memo(({ file, onFileSelect, selected, withCheckbox, checked, onCheckboxChange }: FileProps) => {
|
|
const { depth, name, fullPath } = file;
|
|
|
|
const handleClick = useCallback(() => {
|
|
onFileSelect(fullPath);
|
|
}, [onFileSelect, fullPath]);
|
|
|
|
const handleCheckboxChange = useCallback(
|
|
(value: boolean) => {
|
|
onCheckboxChange?.(fullPath, value);
|
|
},
|
|
[onCheckboxChange, fullPath],
|
|
);
|
|
|
|
return (
|
|
<NodeButton
|
|
className={cn("group cursor-pointer", {
|
|
"hover:bg-accent/50 text-foreground": !selected,
|
|
"bg-accent text-accent-foreground": selected,
|
|
})}
|
|
depth={depth}
|
|
icon={<FileIcon className="w-4 h-4 shrink-0 text-gray-500" />}
|
|
onClick={handleClick}
|
|
>
|
|
{withCheckbox && (
|
|
<Checkbox checked={checked} onCheckedChange={handleCheckboxChange} onClick={(e) => e.stopPropagation()} />
|
|
)}
|
|
<span className="truncate">{name}</span>
|
|
</NodeButton>
|
|
);
|
|
});
|
|
|
|
interface ButtonProps {
|
|
depth: number;
|
|
icon: ReactNode;
|
|
children: ReactNode;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
onMouseEnter?: () => void;
|
|
}
|
|
|
|
const NodeButton = memo(({ depth, icon, onClick, onMouseEnter, className, children }: ButtonProps) => {
|
|
const paddingLeft = useMemo(() => `${8 + depth * NODE_PADDING_LEFT}px`, [depth]);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={cn("flex items-center gap-2 w-full pr-2 text-sm py-1.5 text-left", className)}
|
|
style={{ paddingLeft }}
|
|
onClick={onClick}
|
|
onMouseEnter={onMouseEnter}
|
|
>
|
|
{icon}
|
|
<div className="truncate w-full flex items-center gap-2">{children}</div>
|
|
</button>
|
|
);
|
|
});
|
|
|
|
type Node = FileNode | FolderNode;
|
|
|
|
interface BaseNode {
|
|
id: number;
|
|
depth: number;
|
|
name: string;
|
|
fullPath: string;
|
|
}
|
|
|
|
interface FileNode extends BaseNode {
|
|
kind: "file";
|
|
}
|
|
|
|
interface FolderNode extends BaseNode {
|
|
kind: "folder";
|
|
}
|
|
|
|
function buildFileList(files: FileEntry[], foldersOnly = false): Node[] {
|
|
const fileMap = new Map<string, Node>();
|
|
|
|
for (const file of files) {
|
|
if (foldersOnly && file.type === "file") {
|
|
continue;
|
|
}
|
|
|
|
const segments = file.path.split("/").filter((segment) => segment);
|
|
const depth = segments.length - 1;
|
|
const name = segments[segments.length - 1];
|
|
|
|
if (!fileMap.has(file.path)) {
|
|
fileMap.set(file.path, {
|
|
kind: file.type === "file" ? "file" : "folder",
|
|
id: fileMap.size,
|
|
name,
|
|
fullPath: file.path,
|
|
depth,
|
|
});
|
|
}
|
|
}
|
|
|
|
// Convert map to array and sort
|
|
return sortFileList(Array.from(fileMap.values()));
|
|
}
|
|
|
|
function sortFileList(nodeList: Node[]): Node[] {
|
|
const nodeMap = new Map<string, Node>();
|
|
const childrenMap = new Map<string, Node[]>();
|
|
|
|
// Pre-sort nodes by name and type
|
|
nodeList.sort((a, b) => compareNodes(a, b));
|
|
|
|
for (const node of nodeList) {
|
|
nodeMap.set(node.fullPath, node);
|
|
|
|
const parentPath = node.fullPath.slice(0, node.fullPath.lastIndexOf("/")) || "/";
|
|
|
|
if (parentPath !== "/") {
|
|
if (!childrenMap.has(parentPath)) {
|
|
childrenMap.set(parentPath, []);
|
|
}
|
|
childrenMap.get(parentPath)?.push(node);
|
|
}
|
|
}
|
|
|
|
const sortedList: Node[] = [];
|
|
|
|
const depthFirstTraversal = (path: string): void => {
|
|
const node = nodeMap.get(path);
|
|
|
|
if (node) {
|
|
sortedList.push(node);
|
|
}
|
|
|
|
const children = childrenMap.get(path);
|
|
|
|
if (children) {
|
|
for (const child of children) {
|
|
if (child.kind === "folder") {
|
|
depthFirstTraversal(child.fullPath);
|
|
} else {
|
|
sortedList.push(child);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Start with root level items
|
|
const rootItems = nodeList.filter((node) => {
|
|
const parentPath = node.fullPath.slice(0, node.fullPath.lastIndexOf("/")) || "/";
|
|
return parentPath === "/";
|
|
});
|
|
|
|
for (const item of rootItems) {
|
|
depthFirstTraversal(item.fullPath);
|
|
}
|
|
|
|
return sortedList;
|
|
}
|
|
|
|
function compareNodes(a: Node, b: Node): number {
|
|
if (a.kind !== b.kind) {
|
|
return a.kind === "folder" ? -1 : 1;
|
|
}
|
|
|
|
return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" });
|
|
}
|