niklas/s3browser-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

context menu

Browse Source
This commit is contained in:
Djeeberjr 2021-08-10 11:21:18 +02:00
parent 8ad319bc13
commit 2e85989c18
6 changed files with 110 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

35
src/components/FileBrowser.tsx
View File

@ -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>

48
src/components/FileBrowserContextMenu.tsx Normal file
View File

@ -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

20
src/components/FileBrowserElement.tsx
View File

@ -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>
)

1
src/index.tsx
View File

@ -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",

12
yarn.lock
View File

@ -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"