Add file explorer (Explorer.tsx)
This commit is contained in:
claude Bot committed
1 parent
9c58405011
commit
b76c6d9069
1 file changed
+313
@@ -0,0 +1,313 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { DragEvent } from "react";
|
||||
import {
|
||||
api,
|
||||
ApiError,
|
||||
basename,
|
||||
dirname,
|
||||
EXT,
|
||||
join,
|
||||
stripExt,
|
||||
withExt,
|
||||
type Entry,
|
||||
} from "./api";
|
||||
|
||||
export const EMPTY_SCENE = JSON.stringify({
|
||||
type: "excalidraw",
|
||||
version: 2,
|
||||
source: "excalidraw-go",
|
||||
elements: [],
|
||||
appState: {},
|
||||
files: {},
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** Schéma ouvert dans l'éditeur (surligné). */
|
||||
current: string | null;
|
||||
/** Incrémenté par le parent pour forcer un rafraîchissement (ex. après sauvegarde). */
|
||||
refreshKey: number;
|
||||
onOpen: (path: string) => void;
|
||||
/** Un fichier ou dossier a été déplacé/renommé : le parent met à jour le schéma ouvert. */
|
||||
onMoved: (from: string, to: string) => void;
|
||||
/** Un fichier ou dossier a été supprimé. */
|
||||
onDeleted: (path: string) => void;
|
||||
}
|
||||
|
||||
const fmtDate = (iso: string) =>
|
||||
new Date(iso).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" });
|
||||
|
||||
const fmtSize = (n: number) =>
|
||||
n < 1024 ? `${n} o` : n < 1 << 20 ? `${(n / 1024).toFixed(1)} Ko` : `${(n / (1 << 20)).toFixed(1)} Mo`;
|
||||
|
||||
const DND_TYPE = "application/x-excalidraw-path";
|
||||
|
||||
export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted }: Props) {
|
||||
const [dir, setDir] = useState(() => (current ? dirname(current) : ""));
|
||||
const [entries, setEntries] = useState<Entry[]>([]);
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState<Entry[] | null>(null);
|
||||
const [menuFor, setMenuFor] = useState<string | null>(null);
|
||||
const [dropTarget, setDropTarget] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
const guard = useCallback(async (fn: () => Promise<unknown>) => {
|
||||
setError(null);
|
||||
try {
|
||||
await fn();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const refresh = useCallback(
|
||||
() =>
|
||||
guard(async () => {
|
||||
setEntries(await api.list(dir));
|
||||
setMenuFor(null);
|
||||
}),
|
||||
[dir, guard],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, [refresh, refreshKey]);
|
||||
|
||||
// Suit le dossier du schéma ouvert (lien direct, création, déplacement).
|
||||
useEffect(() => {
|
||||
if (current) setDir(dirname(current));
|
||||
}, [current]);
|
||||
|
||||
// Recherche avec anti-rebond.
|
||||
useEffect(() => {
|
||||
if (!query.trim()) {
|
||||
setResults(null);
|
||||
return;
|
||||
}
|
||||
const t = setTimeout(() => guard(async () => setResults(await api.search(query))), 250);
|
||||
return () => clearTimeout(t);
|
||||
}, [query, guard, refreshKey]);
|
||||
|
||||
// --- Actions -------------------------------------------------------------
|
||||
|
||||
const newDrawing = () =>
|
||||
guard(async () => {
|
||||
const name = prompt("Nom du nouveau schéma :", "Sans titre");
|
||||
if (!name?.trim()) return;
|
||||
const path = join(dir, withExt(name.trim()));
|
||||
await api.write(path, EMPTY_SCENE, "*");
|
||||
await refresh();
|
||||
onOpen(path);
|
||||
});
|
||||
|
||||
const newFolder = () =>
|
||||
guard(async () => {
|
||||
const name = prompt("Nom du dossier :");
|
||||
if (!name?.trim()) return;
|
||||
await api.mkdir(join(dir, name.trim()));
|
||||
await refresh();
|
||||
});
|
||||
|
||||
const move = (e: Entry, to: string) =>
|
||||
guard(async () => {
|
||||
if (to === e.path) return;
|
||||
await api.move(e.path, to);
|
||||
onMoved(e.path, to);
|
||||
await refresh();
|
||||
});
|
||||
|
||||
const rename = (e: Entry) => {
|
||||
const name = prompt("Nouveau nom :", e.isDir ? e.name : stripExt(e.name));
|
||||
if (!name?.trim()) return;
|
||||
move(e, join(dirname(e.path), e.isDir ? name.trim() : withExt(name.trim())));
|
||||
};
|
||||
|
||||
const moveTo = (e: Entry) => {
|
||||
const dest = prompt("Dossier de destination (vide = racine) :", dirname(e.path));
|
||||
if (dest === null) return;
|
||||
move(e, join(dest.trim().replace(/^\/+|\/+$/g, ""), e.name));
|
||||
};
|
||||
|
||||
const duplicate = (e: Entry) =>
|
||||
guard(async () => {
|
||||
const base = join(dirname(e.path), stripExt(e.name));
|
||||
for (let i = 1; i < 100; i++) {
|
||||
const to = `${base} (copie${i > 1 ? ` ${i}` : ""})${EXT}`;
|
||||
try {
|
||||
await api.copy(e.path, to);
|
||||
break;
|
||||
} catch (err) {
|
||||
if (!(err instanceof ApiError && err.status === 409)) throw err;
|
||||
}
|
||||
}
|
||||
await refresh();
|
||||
});
|
||||
|
||||
const remove = (e: Entry) =>
|
||||
guard(async () => {
|
||||
const what = e.isDir ? `le dossier « ${e.name} » et tout son contenu` : `« ${e.name} »`;
|
||||
if (!confirm(`Mettre ${what} à la corbeille ?`)) return;
|
||||
await api.remove(e.path, e.isDir);
|
||||
onDeleted(e.path);
|
||||
await refresh();
|
||||
});
|
||||
|
||||
const importFiles = (files: FileList | null) =>
|
||||
guard(async () => {
|
||||
for (const f of Array.from(files ?? [])) {
|
||||
await api.write(join(dir, withExt(stripExt(f.name.replace(/\.json$/i, "")))), await f.text(), "*");
|
||||
}
|
||||
await refresh();
|
||||
});
|
||||
|
||||
// --- Glisser-déposer (souris) ; sur mobile : menu « Déplacer… » ----------
|
||||
|
||||
const onDragStart = (ev: DragEvent, e: Entry) => {
|
||||
ev.dataTransfer.setData(DND_TYPE, e.path);
|
||||
ev.dataTransfer.effectAllowed = "move";
|
||||
};
|
||||
|
||||
const dropProps = (targetDir: string) => ({
|
||||
onDragOver: (ev: DragEvent) => {
|
||||
if (!ev.dataTransfer.types.includes(DND_TYPE)) return;
|
||||
ev.preventDefault();
|
||||
setDropTarget(targetDir);
|
||||
},
|
||||
onDragLeave: () => setDropTarget(null),
|
||||
onDrop: (ev: DragEvent) => {
|
||||
ev.preventDefault();
|
||||
setDropTarget(null);
|
||||
const from = ev.dataTransfer.getData(DND_TYPE);
|
||||
if (!from || dirname(from) === targetDir) return;
|
||||
move({ path: from, name: basename(from) } as Entry, join(targetDir, basename(from)));
|
||||
},
|
||||
});
|
||||
|
||||
// --- Rendu ---------------------------------------------------------------
|
||||
|
||||
const crumbs = dir ? dir.split("/") : [];
|
||||
const list = results ?? entries;
|
||||
|
||||
const row = (e: Entry) => (
|
||||
<li key={e.path} className={e.path === current ? "active" : ""}>
|
||||
<div
|
||||
className={`row ${dropTarget === e.path ? "drop" : ""}`}
|
||||
draggable
|
||||
onDragStart={(ev) => onDragStart(ev, e)}
|
||||
{...(e.isDir ? dropProps(e.path) : {})}
|
||||
>
|
||||
<button
|
||||
className="name"
|
||||
onClick={() => (e.isDir ? (setQuery(""), setDir(e.path)) : onOpen(e.path))}
|
||||
title={e.path}
|
||||
>
|
||||
<span className="icon" aria-hidden>
|
||||
{e.isDir ? "📁" : "📄"}
|
||||
</span>
|
||||
<span className="label">
|
||||
{e.isDir ? e.name : stripExt(e.name)}
|
||||
{results && <small className="muted"> {dirname(e.path) || "/"}</small>}
|
||||
</span>
|
||||
</button>
|
||||
{!e.isDir && <span className="meta muted">{fmtDate(e.modTime)}</span>}
|
||||
<button
|
||||
className="icon-btn"
|
||||
aria-label="Actions"
|
||||
onClick={() => setMenuFor(menuFor === e.path ? null : e.path)}
|
||||
>
|
||||
⋯
|
||||
</button>
|
||||
</div>
|
||||
{menuFor === e.path && (
|
||||
<div className="actions">
|
||||
<button onClick={() => rename(e)}>Renommer</button>
|
||||
<button onClick={() => moveTo(e)}>Déplacer…</button>
|
||||
{!e.isDir && <button onClick={() => duplicate(e)}>Dupliquer</button>}
|
||||
{!e.isDir && (
|
||||
<a href={api.downloadUrl(e.path)} download={e.name}>
|
||||
Télécharger
|
||||
</a>
|
||||
)}
|
||||
<button className="danger" onClick={() => remove(e)}>
|
||||
Supprimer
|
||||
</button>
|
||||
{!e.isDir && <span className="muted">{fmtSize(e.size)}</span>}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="explorer">
|
||||
<div className="toolbar">
|
||||
<button onClick={newDrawing} title="Nouveau schéma">＋ Schéma</button>
|
||||
<button onClick={newFolder} title="Nouveau dossier">＋ Dossier</button>
|
||||
<button onClick={() => fileInput.current?.click()} title="Importer des fichiers .excalidraw">
|
||||
Importer
|
||||
</button>
|
||||
<button className="icon-btn" onClick={refresh} title="Rafraîchir" aria-label="Rafraîchir">
|
||||
⟳
|
||||
</button>
|
||||
<input
|
||||
ref={fileInput}
|
||||
type="file"
|
||||
accept=".excalidraw,application/json"
|
||||
multiple
|
||||
hidden
|
||||
onChange={(ev) => {
|
||||
importFiles(ev.target.files);
|
||||
ev.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="search"
|
||||
type="search"
|
||||
placeholder="Rechercher…"
|
||||
value={query}
|
||||
onChange={(ev) => setQuery(ev.target.value)}
|
||||
/>
|
||||
|
||||
{!results && (
|
||||
<nav className="crumbs">
|
||||
<button className={dropTarget === "" ? "drop" : ""} onClick={() => setDir("")} {...dropProps("")}>
|
||||
Racine
|
||||
</button>
|
||||
{crumbs.map((c, i) => {
|
||||
const p = crumbs.slice(0, i + 1).join("/");
|
||||
return (
|
||||
<span key={p}>
|
||||
<span className="muted"> / </span>
|
||||
<button className={dropTarget === p ? "drop" : ""} onClick={() => setDir(p)} {...dropProps(p)}>
|
||||
{c}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="error" onClick={() => setError(null)}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="entries">
|
||||
{!results && dir && (
|
||||
<li>
|
||||
<div className={`row ${dropTarget === dirname(dir) ? "drop" : ""}`} {...dropProps(dirname(dir))}>
|
||||
<button className="name" onClick={() => setDir(dirname(dir))}>
|
||||
<span className="icon" aria-hidden>↩</span>
|
||||
<span className="label">..</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{list.map(row)}
|
||||
{list.length === 0 && <li className="muted empty">{results ? "Aucun résultat" : "Dossier vide"}</li>}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user