44 lines
960 B
TypeScript
44 lines
960 B
TypeScript
import { FC } from "react";
|
|
import { useRef } from "react";
|
|
import useOnclickOutside from "@/hooks/useOnClickOutside";
|
|
|
|
interface ContextMenuProps {
|
|
x: number;
|
|
y: number;
|
|
closeContextMenu: () => void;
|
|
file?: any;
|
|
}
|
|
|
|
const ContextMenuContainer: FC<ContextMenuProps> = ({
|
|
x,
|
|
y,
|
|
closeContextMenu,
|
|
file,
|
|
}) => {
|
|
const contextMenuRef = useRef<HTMLDivElement>(null);
|
|
useOnclickOutside(contextMenuRef, closeContextMenu);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
ref={contextMenuRef}
|
|
onClick={closeContextMenu}
|
|
className="bg-primary text-white p-2 rounded-md cursor-pointer"
|
|
style={{ position: "absolute", top: y, left: x }}
|
|
>
|
|
<div
|
|
onClick={() => {
|
|
console.log("Option ", file?.attributes.name);
|
|
}}
|
|
>
|
|
{file?.attributes.name}
|
|
</div>
|
|
<div>Option 2</div>
|
|
<div>Option 3</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ContextMenuContainer;
|