73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { FC, useRef } from "react";
|
|
import useOnclickOutside from "@/hooks/useOnClickOutside";
|
|
import PencilIcon from "@/components/Icons/Pencil";
|
|
import MoveIcon from "@/components/Icons/Move";
|
|
import LockIcon from "@/components/Icons/Lock";
|
|
|
|
interface ContextMenuProps {
|
|
x: number;
|
|
y: number;
|
|
closeContextMenu: () => void;
|
|
renameFunction: () => void;
|
|
setFile: (file: any) => void;
|
|
file?: any;
|
|
}
|
|
|
|
const ContextMenuContainer: FC<ContextMenuProps> = ({
|
|
x,
|
|
y,
|
|
closeContextMenu,
|
|
renameFunction,
|
|
setFile,
|
|
file,
|
|
}) => {
|
|
const contextMenuRef = useRef<HTMLDivElement>(null);
|
|
useOnclickOutside(contextMenuRef, closeContextMenu);
|
|
|
|
return (
|
|
<div
|
|
ref={contextMenuRef}
|
|
className="bg-secondary text-secondary-content p-2 mx-0 rounded-md cursor-pointer w-80"
|
|
style={{ position: "absolute", top: y, left: x }}
|
|
>
|
|
<div
|
|
className="flex hover:bg-primary-content hover:text-primary"
|
|
onClick={() => {
|
|
setFile(file);
|
|
renameFunction();
|
|
console.log("Renaming file:", file?.attributes.name);
|
|
}}
|
|
>
|
|
<div className="mr-2" style={{ transform: "scale(0.77)" }}>
|
|
<PencilIcon />
|
|
</div>
|
|
Rename
|
|
</div>
|
|
<div
|
|
className="flex hover:bg-primary-content hover:text-primary"
|
|
onClick={() => {
|
|
console.log("Moving file:", file?.attributes.name);
|
|
}}
|
|
>
|
|
<div className="mr-2" style={{ transform: "scale(0.8)" }}>
|
|
<MoveIcon />
|
|
</div>
|
|
Move
|
|
</div>
|
|
<div
|
|
className="flex hover:bg-primary-content hover:text-primary"
|
|
onClick={() => {
|
|
console.log("Changing permissions for file:", file?.attributes.name);
|
|
}}
|
|
>
|
|
<div className="mr-2" style={{ transform: "scale(0.8)" }}>
|
|
<LockIcon />
|
|
</div>
|
|
Permissions
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContextMenuContainer;
|