From 2e85989c185f9d493dda11327c02586d859d7d77 Mon Sep 17 00:00:00 2001 From: Djeeberjr Date: Tue, 10 Aug 2021 11:21:18 +0200 Subject: [PATCH] context menu --- package.json | 1 + src/components/FileBrowser.tsx | 35 +++++++++++++++++ src/components/FileBrowserContextMenu.tsx | 48 +++++++++++++++++++++++ src/components/FileBrowserElement.tsx | 20 ++++++---- src/index.tsx | 1 + yarn.lock | 12 ++++++ 6 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 src/components/FileBrowserContextMenu.tsx diff --git a/package.json b/package.json index 3faa08e..71edd1c 100644 --- a/package.json +++ b/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", diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx index 2c11421..0f27269 100644 --- a/src/components/FileBrowser.tsx +++ b/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 (
+ { 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 => ( { setOpenFileId(file.id) setShowFile(true) }} + onContextMenu={(e)=>{ + openFileContextMenu(e,v.id) + }} />))} diff --git a/src/components/FileBrowserContextMenu.tsx b/src/components/FileBrowserContextMenu.tsx new file mode 100644 index 0000000..7d861e1 --- /dev/null +++ b/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) => { + + function onClick({ props: itemProps, data }: ItemParams<{id:string}, string>) { + if (itemProps?.id && data){ + props.onSelect?.(data,itemProps.id) + } + } + + return ( + <> + + Item 1 + Item 2 + + Disabled + + + Sub Item 1 + Sub Item 2 + + + + Item 1 + Item 2 + + Disabled + + + Sub Item 1 + Sub Item 2 + + + + ) +} + +export default FileBrowserContextMenu diff --git a/src/components/FileBrowserElement.tsx b/src/components/FileBrowserElement.tsx index 711ff67..e8a8b59 100644 --- a/src/components/FileBrowserElement.tsx +++ b/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) => { return ( - { - if(props.file){ - props.onClick?.(props.file) - }else if(props.dir){ - props.onClick?.(props.dir) - } - }}> + { + if(props.file){ + props.onClick?.(props.file) + }else if(props.dir){ + props.onClick?.(props.dir) + } + }} + + onContextMenu={(e)=>props.onContextMenu?.(e)} + + > {(props.file) ? :(props.dir)?:<>} ) diff --git a/src/index.tsx b/src/index.tsx index b856aeb..5163497 100644 --- a/src/index.tsx +++ b/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", diff --git a/yarn.lock b/yarn.lock index ffefd15..929fb95 100644 --- a/yarn.lock +++ b/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"