139 lines
3.8 KiB
TypeScript
139 lines
3.8 KiB
TypeScript
import Icon from "../common/Icon";
|
|
import type { ScriptItem, ScriptType } from "../../services/api";
|
|
|
|
type ContextMenuState = {
|
|
x: number;
|
|
y: number;
|
|
kind: "root" | "directory" | "file";
|
|
path: string;
|
|
script?: ScriptItem;
|
|
};
|
|
|
|
type TreeContextMenuProps = {
|
|
contextMenu: ContextMenuState | null;
|
|
onOpenScript: (scriptId: string) => void;
|
|
onRemoveScript: (script: ScriptItem) => void;
|
|
onToggleLock: (script: ScriptItem) => void;
|
|
onOpenCreateDialog: (parentPath: string, scriptType: ScriptType) => void;
|
|
onOpenFolderDialog: (parentPath: string) => void;
|
|
onChooseUpload: (parentPath: string) => void;
|
|
onRemoveDirectory: (path: string) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function TreeContextMenu({
|
|
contextMenu,
|
|
onOpenScript,
|
|
onRemoveScript,
|
|
onToggleLock,
|
|
onOpenCreateDialog,
|
|
onOpenFolderDialog,
|
|
onChooseUpload,
|
|
onRemoveDirectory,
|
|
onClose,
|
|
}: TreeContextMenuProps) {
|
|
if (!contextMenu) return null;
|
|
|
|
const width = 188;
|
|
const height = contextMenu.kind === "file" ? 124 : 190;
|
|
|
|
return (
|
|
<div
|
|
className="tree-context-menu"
|
|
role="menu"
|
|
style={{
|
|
left: contextMenu.x,
|
|
top: contextMenu.y,
|
|
position: "fixed",
|
|
zIndex: 1000,
|
|
}}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
>
|
|
{contextMenu.kind === "file" && contextMenu.script ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => {
|
|
onOpenScript(contextMenu.script!.script_id);
|
|
onClose();
|
|
}}
|
|
>
|
|
<Icon name="script" size={16} />
|
|
打开文件
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => {
|
|
onToggleLock(contextMenu.script!);
|
|
onClose();
|
|
}}
|
|
>
|
|
<Icon name={contextMenu.script.is_locked ? "unlock" : "lock"} size={16} />
|
|
{contextMenu.script.is_locked ? "解锁文件" : "锁定文件"}
|
|
</button>
|
|
<button
|
|
className="is-danger"
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onRemoveScript(contextMenu.script!)}
|
|
>
|
|
<Icon name="close" size={16} />
|
|
删除文件
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onOpenCreateDialog(contextMenu.path, "notebook")}
|
|
>
|
|
<Icon name="notebook" size={16} />
|
|
新建 Notebook
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onOpenCreateDialog(contextMenu.path, "python")}
|
|
>
|
|
<Icon name="python" size={16} />
|
|
新建 Python 文件
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onOpenFolderDialog(contextMenu.path)}
|
|
>
|
|
<Icon name="folder" size={16} />
|
|
新建文件夹
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onChooseUpload(contextMenu.path)}
|
|
>
|
|
<Icon name="upload" size={16} />
|
|
上传到此处
|
|
</button>
|
|
{contextMenu.kind === "directory" && (
|
|
<>
|
|
<span className="tree-context-menu__separator" />
|
|
<button
|
|
className="is-danger"
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => onRemoveDirectory(contextMenu.path)}
|
|
>
|
|
<Icon name="close" size={16} />
|
|
删除文件夹
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|