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

implemented delete

Browse Source
This commit is contained in:
Niklas 2021-08-14 01:33:20 +02:00
parent 895e59d32c
commit 4655f2f8c1
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/FileBrowser.tsx
View File

@ -2,10 +2,10 @@ import React from "react"
import { useState } from "react"
import { useContextMenu } from "react-contexify"
import uploadFile from "../functions/uploadFile"
import { useOpenDirQuery } from "../generated/graphql"
import { useDeleteFileMutation, useOpenDirQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum"
import DragAndDrop from "./DragAndDrop"
import FileBrowserContextMenu, { CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
import FileBrowserElement from "./FileBrowserElement"
import FileOpen from "./FileOpen"
@ -14,6 +14,8 @@ const FileBrowser: React.FC = () => {
const [openFileId, setOpenFileId] = useState("")
const [showFile, setShowFile] = useState(false)
const [deleteMutation] = useDeleteFileMutation()
const { show: showFileContext } = useContextMenu({
id: CONTEXT_MENU_FILE,
})
@ -56,9 +58,23 @@ const FileBrowser: React.FC = () => {
})
}
function onContextSelect(action:Action, id: string) {
console.debug(action)
switch (action) {
case Action.FileDelete:
deleteMutation({variables:{id}})
break
default:
break
}
}
return (
<div>
<FileBrowserContextMenu/ >
<FileBrowserContextMenu
onSelect={onContextSelect}
/>
<DragAndDrop
handleDrop={async (files)=>{
await handleDrop(files)

12
src/components/FileBrowserContextMenu.tsx
View File

@ -5,14 +5,18 @@ 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"
export enum Action {
FileDelete
}
interface Props {
onSelect?: (action: string, id: string)=>void
onSelect?: (action: Action, id: string)=>void
}
const FileBrowserContextMenu: React.FC<Props> = (props) => {
function onClick({ props: itemProps, data }: ItemParams<{id:string}, string>) {
if (itemProps?.id && data){
function onClick({ props: itemProps, data }: ItemParams<{id:string}, Action>) {
if (itemProps?.id && data != null){
props.onSelect?.(data,itemProps.id)
}
}
@ -20,7 +24,7 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
return (
<>
<Menu id={CONTEXT_MENU_FILE} animation={false}>
<Item onClick={onClick} data="item1" >Item 1</Item>
<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
<Item onClick={onClick} data="item2" >Item 2</Item>
<Separator />
<Item disabled>Disabled</Item>