99 lines
No EOL
3.3 KiB
TypeScript
99 lines
No EOL
3.3 KiB
TypeScript
import { Accessor, Component, createContext, createSignal, For, JSX, Show, useContext } from "solid-js";
|
|
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
|
|
import { SelectionProvider, selectable } from "~/features/selectable";
|
|
import css from "./filetree.module.css";
|
|
|
|
export interface FileEntry {
|
|
name: string;
|
|
kind: 'file';
|
|
meta: File;
|
|
}
|
|
|
|
export interface FolderEntry {
|
|
name: string;
|
|
kind: 'folder';
|
|
entries: Entry[];
|
|
}
|
|
|
|
export type Entry = FileEntry | FolderEntry;
|
|
|
|
export const emptyFolder: FolderEntry = { name: '', kind: 'folder', entries: [] } as const;
|
|
|
|
export async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
|
|
if (depth === 10) {
|
|
return;
|
|
}
|
|
|
|
for await (const handle of directory.values()) {
|
|
|
|
if (filters.some(f => f.test(handle.name))) {
|
|
continue;
|
|
}
|
|
|
|
if (handle.kind === 'file') {
|
|
yield { name: handle.name, kind: 'file', meta: await handle.getFile() };
|
|
}
|
|
else {
|
|
yield { name: handle.name, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
|
|
}
|
|
}
|
|
}
|
|
|
|
interface TreeContextType {
|
|
open(file: File): void;
|
|
}
|
|
|
|
const TreeContext = createContext<TreeContextType>();
|
|
|
|
export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open?: TreeContextType['open'] }> = (props) => {
|
|
const [selection, setSelection] = createSignal<object[]>([]);
|
|
|
|
// createEffect(() => {
|
|
// console.log(selection());
|
|
// });
|
|
|
|
const context = {
|
|
open: props.open ?? (() => { }),
|
|
// open(file: File) {
|
|
// console.log(`open ${file.name}`)
|
|
// },
|
|
};
|
|
|
|
return <SelectionProvider selection={setSelection}>
|
|
<TreeContext.Provider value={context}>
|
|
<div class={css.root}><_Tree entries={props.entries} children={props.children} /></div>
|
|
</TreeContext.Provider>
|
|
</SelectionProvider>;
|
|
}
|
|
|
|
const _Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element }> = (props) => {
|
|
const context = useContext(TreeContext);
|
|
|
|
return <For each={props.entries.sort(sort_by('kind'))}>{
|
|
entry => <>
|
|
<Show when={entry.kind === 'folder' ? entry : undefined}>{
|
|
folder => <Folder folder={folder()} children={props.children} />
|
|
}</Show>
|
|
|
|
<Show when={entry.kind === 'file' ? entry : undefined}>{
|
|
file => <span use:selectable={file()} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children(file)}</span>
|
|
}</Show>
|
|
</>
|
|
}</For>
|
|
}
|
|
|
|
const Folder: Component<{ folder: FolderEntry, children: (file: Accessor<FileEntry>) => JSX.Element }> = (props) => {
|
|
const [open, setOpen] = createSignal(false);
|
|
|
|
return <details open={open()} ontoggle={() => setOpen(o => !o)}>
|
|
<summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.folder.name}</summary>
|
|
<_Tree entries={props.folder.entries} children={props.children} />
|
|
</details>;
|
|
};
|
|
|
|
const sort_by = (key: string) => (objA: Record<string, any>, objB: Record<string, any>) => {
|
|
const a = objA[key];
|
|
const b = objB[key];
|
|
|
|
return Number(a < b) - Number(b < a);
|
|
}; |