134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTerminal } from "~/context/TerminalContext";
|
|
import {
|
|
DEFAULT_FILE_STYLE,
|
|
FILE_STYLES,
|
|
getExtension,
|
|
type File,
|
|
} from "~/utils/filesystem";
|
|
import { type Cell } from "~/utils/terminal/cell";
|
|
import { TerminalRenderer } from "~/utils/terminal/renderer";
|
|
import { theme } from "~/utils/terminal/theme";
|
|
|
|
const PATH_FOLDED: Cell = {
|
|
char: "",
|
|
foreground: theme.grey,
|
|
};
|
|
|
|
const PATH_UNFOLDED: Cell = {
|
|
char: "",
|
|
foreground: theme.blue,
|
|
};
|
|
|
|
export const NvimTree = (props: { files: Array<File> }) => {
|
|
const [selected, setSelected] = useState(0);
|
|
const [files, setFiles] = useState(props.files);
|
|
const navigate = useNavigate();
|
|
|
|
const { cols: width, rows: height } = useTerminal();
|
|
const canvas = new TerminalRenderer(width * 0.2, height - 2, {
|
|
background: "#0000001a",
|
|
});
|
|
|
|
const tree = new TerminalRenderer(canvas.width - 3, height - 1);
|
|
tree.write(0, selected, " ".repeat(tree.width), { background: "#504651" });
|
|
|
|
let y = 0;
|
|
let indent = 0;
|
|
const renderTree = (files: Array<File>) => {
|
|
files.forEach(file => {
|
|
if (file.type === "directory") {
|
|
tree.apply(2 + indent * 2, y, {
|
|
char: file.folded ? "\ue6ad" : "\ueaf6",
|
|
foreground: theme.blue,
|
|
});
|
|
|
|
tree.apply(indent * 2, y, file.folded ? PATH_FOLDED : PATH_UNFOLDED);
|
|
tree.write(4 + indent * 2, y, file.name, {
|
|
foreground: theme.blue,
|
|
});
|
|
|
|
y++;
|
|
if (!file.folded) {
|
|
indent++;
|
|
renderTree(file.children);
|
|
indent--;
|
|
}
|
|
} else {
|
|
const style =
|
|
FILE_STYLES[getExtension(file.name)] ?? DEFAULT_FILE_STYLE;
|
|
tree.apply(2 + indent * 2, y, style);
|
|
|
|
if (file.name === "README.md") {
|
|
tree.write(4 + indent * 2, y, file.name, {
|
|
foreground: theme.yellow,
|
|
fontWeight: 800,
|
|
});
|
|
} else {
|
|
tree.write(4 + indent * 2, y, file.name);
|
|
}
|
|
y++;
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const onScroll = (event: KeyboardEvent) => {
|
|
switch (event.key) {
|
|
case "ArrowUp":
|
|
setSelected(x => Math.max(0, x - 1));
|
|
break;
|
|
|
|
case "ArrowDown":
|
|
setSelected(x => Math.min(y - 1, x + 1));
|
|
break;
|
|
|
|
case "Enter":
|
|
let y = 0;
|
|
const findFile = (files: Array<File>): File | null => {
|
|
for (const f of files) {
|
|
if (y === selected) {
|
|
return f;
|
|
}
|
|
y++;
|
|
if (f.type === "directory" && !f.folded) {
|
|
const found = findFile(f.children);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const current = findFile(files);
|
|
if (!current) {
|
|
setSelected(0);
|
|
return;
|
|
}
|
|
|
|
if (current.type === "directory") {
|
|
current.folded = !current.folded;
|
|
setFiles([...files]);
|
|
} else {
|
|
//document.location.href = `?view=${current.path}`
|
|
navigate(`?view=${current.path}`);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", onScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", onScroll);
|
|
};
|
|
});
|
|
|
|
renderTree(files);
|
|
|
|
canvas.writeElement(tree, 2, 1);
|
|
|
|
return <p>{canvas.render()}</p>;
|
|
};
|