context menu

src/components/FileBrowser.tsx

@@ -1,9 +1,11 @@
 import React from "react"
 import { useState } from "react"
+import { useContextMenu } from "react-contexify"
 import uploadFile from "../functions/uploadFile"
 import { useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import DragAndDrop from "./DragAndDrop"
+import FileBrowserContextMenu, { CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 
@@ -12,6 +14,14 @@ const FileBrowser: React.FC = () => {
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
+	const { show: showFileContext } = useContextMenu({
+		id: CONTEXT_MENU_FILE,
+	})
+
+	const { show: showDirContext } = useContextMenu({
+		id: CONTEXT_MENU_DIR,
+	})
+
 	const { data, loading } = useOpenDirQuery({
 		variables:{
 			path
@@ -28,8 +38,27 @@ const FileBrowser: React.FC = () => {
 		await Promise.all(wait)
 	}
 
+	function openFileContextMenu(e: React.MouseEvent, id: string) {
+		e.preventDefault()
+		showFileContext(e,{
+			props:{
+				id
+			}
+		})
+	}
+
+	function openDirContextMenu(e: React.MouseEvent, id: string) {
+		e.preventDefault()
+		showDirContext(e,{
+			props:{
+				id
+			}
+		})
+	}
+
 	return (
 		<div>
+			<FileBrowserContextMenu/ >
 			<DragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)
@@ -58,6 +87,9 @@ const FileBrowser: React.FC = () => {
 								onClick={(dir)=>{
 									setPath(dir.id)
 								}}
+								onContextMenu={(e)=>{
+									openDirContextMenu(e,v.id)
+								}}
 							/>))}
 								
 							{ data?.files.map(v => (<FileBrowserElement 
@@ -67,6 +99,9 @@ const FileBrowser: React.FC = () => {
 									setOpenFileId(file.id)
 									setShowFile(true)
 								}}
+								onContextMenu={(e)=>{
+									openFileContextMenu(e,v.id)
+								}}
 							/>))}
 						</tbody>
 					</table>

src/components/FileBrowserContextMenu.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"
+
+
+export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
+export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
+
+interface Props {
+    onSelect?: (action: string, id: string)=>void
+}
+
+const FileBrowserContextMenu: React.FC<Props> = (props) => {
+
+	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, string>) {
+		if (itemProps?.id && data){
+			props.onSelect?.(data,itemProps.id)
+		}
+	}
+
+	return (
+		<>
+			<Menu id={CONTEXT_MENU_FILE} animation={false}>
+				<Item onClick={onClick} data="item1" >Item 1</Item>
+				<Item onClick={onClick} data="item2" >Item 2</Item>
+				<Separator />
+				<Item disabled>Disabled</Item>
+				<Separator />
+				<Submenu label="Foobar">
+					<Item onClick={onClick}  >Sub Item 1</Item>
+					<Item onClick={onClick}  >Sub Item 2</Item>
+				</Submenu>
+			</Menu>
+			<Menu id={CONTEXT_MENU_DIR} animation={false}>
+				<Item onClick={onClick}  >Item 1</Item>
+				<Item onClick={onClick}  >Item 2</Item>
+				<Separator />
+				<Item disabled>Disabled</Item>
+				<Separator />
+				<Submenu label="Foobar">
+					<Item onClick={onClick}  >Sub Item 1</Item>
+					<Item onClick={onClick}  >Sub Item 2</Item>
+				</Submenu>
+			</Menu>
+		</>
+	)
+}
+
+export default FileBrowserContextMenu

src/components/FileBrowserElement.tsx

@@ -8,17 +8,23 @@ interface Props {
     file?: File | null
     dir?: Directory | null
     onClick?: (data: File | Directory) => void
+	onContextMenu?: (e:React.MouseEvent) => void
 }
 
 const FileBrowserElement: React.FC<Props> = (props) => {
 	return (
-		<tr onClick={()=>{
-			if(props.file){
-				props.onClick?.(props.file)
-			}else if(props.dir){
-				props.onClick?.(props.dir)
-			}
-		}}>
+		<tr 
+			onClick={()=>{
+				if(props.file){
+					props.onClick?.(props.file)
+				}else if(props.dir){
+					props.onClick?.(props.dir)
+				}
+			}}
+
+			onContextMenu={(e)=>props.onContextMenu?.(e)}
+			
+		>
 			{(props.file) ? <FileElement file={props.file}/>:(props.dir)?<DirectoryComponent dir={props.dir} />:<></>}
 		</tr>
 	)