163 lines
4.5 KiB
TypeScript
Raw Normal View History

"use client";
2024-04-11 04:24:36 -04:00
import Image from "next/image";
import { getIconForFile } from "vscode-icons-js";
import { TFile, TTab } from "@/lib/types";
import { useEffect, useRef, useState } from "react";
2024-04-30 01:56:43 -04:00
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import { Loader2, Pencil, Trash2 } from "lucide-react";
2024-04-26 00:10:53 -04:00
2024-05-10 00:12:41 -07:00
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
2024-04-26 00:10:53 -04:00
export default function SidebarFile({
data,
selectFile,
2024-04-27 14:23:09 -04:00
handleRename,
2024-04-30 01:56:43 -04:00
handleDeleteFile,
2024-05-10 00:12:41 -07:00
movingId,
2024-05-11 17:23:45 -07:00
deletingFolderId,
2024-04-26 00:10:53 -04:00
}: {
data: TFile;
selectFile: (file: TTab) => void;
2024-04-27 14:23:09 -04:00
handleRename: (
id: string,
newName: string,
oldName: string,
type: "file" | "folder"
) => boolean;
handleDeleteFile: (file: TFile) => void;
2024-05-10 00:12:41 -07:00
movingId: string;
2024-05-11 17:23:45 -07:00
deletingFolderId: string;
2024-04-26 00:10:53 -04:00
}) {
2024-05-10 00:12:41 -07:00
const isMoving = movingId === data.id;
2024-05-11 17:23:45 -07:00
const isDeleting =
deletingFolderId.length > 0 && data.id.startsWith(deletingFolderId);
2024-05-10 00:12:41 -07:00
const ref = useRef(null); // for draggable
const [dragging, setDragging] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`);
const [editing, setEditing] = useState(false);
2024-05-11 17:23:45 -07:00
const [pendingDelete, setPendingDelete] = useState(isDeleting);
useEffect(() => {
setPendingDelete(isDeleting);
}, [isDeleting]);
2024-04-27 11:08:19 -04:00
2024-05-10 00:12:41 -07:00
useEffect(() => {
const el = ref.current;
if (el)
return draggable({
element: el,
onDragStart: () => setDragging(true),
onDrop: () => setDragging(false),
getInitialData: () => ({ id: data.id }),
});
}, []);
2024-04-27 11:08:19 -04:00
useEffect(() => {
if (editing) {
setTimeout(() => inputRef.current?.focus(), 0);
2024-04-27 11:08:19 -04:00
}
}, [editing, inputRef.current]);
2024-04-11 04:24:36 -04:00
2024-04-27 14:23:09 -04:00
const renameFile = () => {
const renamed = handleRename(
data.id,
inputRef.current?.value ?? data.name,
data.name,
"file"
);
2024-04-27 14:23:09 -04:00
if (!renamed && inputRef.current) {
inputRef.current.value = data.name;
2024-04-27 14:23:09 -04:00
}
setEditing(false);
};
2024-04-27 14:23:09 -04:00
2024-04-11 04:24:36 -04:00
return (
2024-04-30 01:56:43 -04:00
<ContextMenu>
<ContextMenuTrigger
2024-05-10 00:12:41 -07:00
ref={ref}
disabled={pendingDelete || dragging || isMoving}
2024-04-30 01:56:43 -04:00
onClick={() => {
2024-05-10 00:12:41 -07:00
if (!editing && !pendingDelete && !isMoving)
selectFile({ ...data, saved: true });
2024-04-27 11:08:19 -04:00
}}
2024-04-30 01:56:43 -04:00
// onDoubleClick={() => {
// setEditing(true)
// }}
2024-05-10 00:12:41 -07:00
className={`${
dragging ? "opacity-50 hover:!bg-background" : ""
} data-[state=open]:bg-secondary/50 w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`}
2024-04-27 11:08:19 -04:00
>
2024-04-30 01:56:43 -04:00
<Image
src={imgSrc}
alt="File Icon"
width={18}
height={18}
className="mr-2"
onError={() => setImgSrc("/icons/default_file.svg")}
2024-04-27 11:08:19 -04:00
/>
2024-05-10 00:12:41 -07:00
{isMoving ? (
<>
<Loader2 className="text-muted-foreground w-4 h-4 animate-spin mr-2" />
<div className="text-muted-foreground">{data.name}</div>
</>
) : pendingDelete ? (
2024-04-30 01:56:43 -04:00
<>
2024-05-11 17:23:45 -07:00
<div className="text-muted-foreground animate-pulse">
Deleting...
</div>
2024-04-30 01:56:43 -04:00
</>
) : (
<form
onSubmit={(e) => {
e.preventDefault();
renameFile();
2024-04-30 01:56:43 -04:00
}}
>
<input
ref={inputRef}
className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full ${
editing ? "" : "pointer-events-none"
}`}
disabled={!editing}
defaultValue={data.name}
onBlur={() => renameFile()}
/>
</form>
)}
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() => {
console.log("rename");
setEditing(true);
2024-04-30 01:56:43 -04:00
}}
>
<Pencil className="w-4 h-4 mr-2" />
Rename
</ContextMenuItem>
<ContextMenuItem
disabled={pendingDelete}
onClick={() => {
console.log("delete");
setPendingDelete(true);
handleDeleteFile(data);
2024-04-30 01:56:43 -04:00
}}
>
<Trash2 className="w-4 h-4 mr-2" />
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
2024-04-11 04:24:36 -04:00
}