78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import "./FileBrowser.css";
|
|
import { type Component, createSignal, Index, Show } from "solid-js";
|
|
import { FileIcon, FolderIcon, FolderOpenIcon } from "#/dev/icons/index.ts";
|
|
|
|
export type BrowserFolder = Map<string, string | BrowserFolder>;
|
|
|
|
export type FileHandler = (path: string) => void;
|
|
|
|
function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
|
|
return typeof (entry as BrowserFolder).size === "number";
|
|
}
|
|
|
|
export const FileBrowser: Component<{
|
|
root: BrowserFolder;
|
|
handler: FileHandler;
|
|
}> = ({ root, handler }) => {
|
|
const FileEntry: Component<{
|
|
name: string;
|
|
path: string;
|
|
}> = ({ name, path }) => {
|
|
return (
|
|
<div class="file-label" onClick={[handler, path]}>
|
|
<FileIcon />
|
|
<span>{name}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FolderEntry: Component<{
|
|
folder: BrowserFolder;
|
|
name: string;
|
|
open: boolean;
|
|
}> = ({ folder, name, open }) => {
|
|
const [isOpen, setIsOpen] = createSignal(open);
|
|
|
|
return (
|
|
<>
|
|
<div class="file-label" onClick={() => setIsOpen(!isOpen())}>
|
|
{isOpen() ? <FolderOpenIcon /> : <FolderIcon />}
|
|
<span>{name}</span>
|
|
</div>
|
|
|
|
<Show when={isOpen()}>
|
|
<FileList folder={folder} />
|
|
</Show>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const FileList: Component<{ folder: BrowserFolder }> = ({ folder }) => {
|
|
return (
|
|
<ul class="file-list">
|
|
<Index each={[...folder.entries()]}>
|
|
{(item, index) => {
|
|
const [name, entry] = item();
|
|
|
|
return (
|
|
<li class="file-item">
|
|
{isFolder(entry) ? (
|
|
<FolderEntry folder={entry} name={name} open={index < 1} />
|
|
) : (
|
|
<FileEntry name={name} path={entry} />
|
|
)}
|
|
</li>
|
|
);
|
|
}}
|
|
</Index>
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div class="file-browser">
|
|
<FileList folder={root} />
|
|
</div>
|
|
);
|
|
};
|