nikita
100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { FiFile, FiFolder, FiEdit3, FiTrash2 } from "react-icons/fi";
|
|
|
|
const MenuItem: React.FC<{
|
|
onClick: () => void;
|
|
danger?: boolean;
|
|
children: React.ReactNode;
|
|
}> = ({ onClick, danger, children }) => (
|
|
<div
|
|
onClick={onClick}
|
|
style={{
|
|
padding: "8px 16px",
|
|
cursor: "pointer",
|
|
color: danger ? "#f48771" : "#cccccc",
|
|
fontSize: "13px",
|
|
transition: "background-color 0.1s",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.backgroundColor = "#2a2d2e";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
interface ContextMenuProps {
|
|
x: number;
|
|
y: number;
|
|
onClose: () => void;
|
|
onNewFile: () => void;
|
|
onNewFolder: () => void;
|
|
onRename: () => void;
|
|
onDelete: () => void;
|
|
hasNode: boolean;
|
|
}
|
|
|
|
export const ContextMenu: React.FC<ContextMenuProps> = ({
|
|
x,
|
|
y,
|
|
onClose,
|
|
onNewFile,
|
|
onNewFolder,
|
|
onRename,
|
|
onDelete,
|
|
hasNode,
|
|
}) => {
|
|
useEffect(() => {
|
|
const handleClick = () => onClose();
|
|
document.addEventListener("click", handleClick);
|
|
return () => document.removeEventListener("click", handleClick);
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: y,
|
|
left: x,
|
|
backgroundColor: "#252526",
|
|
border: "1px solid #3e3e42",
|
|
borderRadius: "6px",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
|
|
zIndex: 1000,
|
|
minWidth: "180px",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<MenuItem onClick={onNewFile}>
|
|
<FiFile /> New File
|
|
</MenuItem>
|
|
<MenuItem onClick={onNewFolder}>
|
|
<FiFolder /> New Folder
|
|
</MenuItem>
|
|
{hasNode && (
|
|
<>
|
|
<div
|
|
style={{
|
|
height: "1px",
|
|
backgroundColor: "#3e3e42",
|
|
margin: "4px 0",
|
|
}}
|
|
/>
|
|
<MenuItem onClick={onRename}>
|
|
<FiEdit3 /> Rename
|
|
</MenuItem>
|
|
<MenuItem onClick={onDelete} danger>
|
|
<FiTrash2 /> Delete
|
|
</MenuItem>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|