context menu

package.json

@@ -15,6 +15,7 @@
     "node-sass": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-contexify": "^5.0.0",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "spectre.css": "^0.5.9",

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={()=>{
+		<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>
 	)

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom"
 import "./index.scss"
 import App from "./App"
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
+import "react-contexify/dist/ReactContexify.css"
 
 const client = new ApolloClient({
 	uri: "/graphql",

yarn.lock

@@ -4748,6 +4748,11 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -11709,6 +11714,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-contexify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-contexify/-/react-contexify-5.0.0.tgz#11b477550a0ee5a9a144399bc17c7c56bbc60057"
+  integrity sha512-2FIp7lxJ6dtfGr8EZ4uVV5p5TQjd0n2h/JU7PrejNIMiCeZWvSVPFh4lj1ZvjXosglBvP7q5JQQ8yUCdSaMSaw==
+  dependencies:
+    clsx "^1.1.1"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz"