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

made drag and drop handler global

Browse Source
This commit is contained in:
Djeeberjr 2021-10-01 21:23:27 +02:00
parent c12181fe16
commit 06b7c323ae
2 changed files with 87 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/FileBrowser.tsx
View File

@ -8,7 +8,7 @@ import uploadFile from "../functions/uploadFile"
import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql" import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum" import Breadcrum from "./Breadcrum"
import CreateDirButton from "./CreateDirButton" import CreateDirButton from "./CreateDirButton"
import DragAndDrop from "./DragAndDrop" import GlobalDragAndDrop from "./GlobalDragAndDrop"
import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu" import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
import FileOpen from "./FileOpen" import FileOpen from "./FileOpen"
import FileUploadButton from "./FileUploadButton" import FileUploadButton from "./FileUploadButton"
@ -103,11 +103,10 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
onSelect={onContextSelect} onSelect={onContextSelect}
pasteActive={!!srcID} pasteActive={!!srcID}
/> />
<DragAndDrop <GlobalDragAndDrop
handleDrop={async (files)=>{ handleDrop={async (files)=>{
await handleDrop(files) await handleDrop(files)
}} }}/>
>
<div className="flex justify-between h-12"> <div className="flex justify-between h-12">
<Breadcrum path={path} onDirClick={(newPath)=>{ <Breadcrum path={path} onDirClick={(newPath)=>{
props.history.push(newPath.toURI()) props.history.push(newPath.toURI())
@ -180,7 +179,6 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{ <FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
setShowFile(false) setShowFile(false)
}} /> }} />
</DragAndDrop>
</div> </div>
) )
} }

38
src/components/DragAndDrop.tsx → src/components/GlobalDragAndDrop.tsx
View File

@ -10,12 +10,10 @@ interface Props {
handleDrop?: (files: FileList)=>void handleDrop?: (files: FileList)=>void
} }
const DragAndDrop: React.FC<Props> = (props) => { const GlobalDragAndDrop: React.FC<Props> = (props) => {
const dropRef = React.createRef<HTMLDivElement>()
const [hover,setHover] = useState(false) const [hover,setHover] = useState(false)
function handleDragEnter(event: DragEvent) { function handleDragEnter(event: DragEvent) {
// console.debug("dragenter",event)
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
setHover(true) setHover(true)
@ -23,7 +21,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
} }
function handleDragLeave(event: DragEvent) { function handleDragLeave(event: DragEvent) {
// console.debug("dragleave",event)
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
setHover(false) setHover(false)
@ -38,7 +35,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
} }
function handleDrop(event: DragEvent) { function handleDrop(event: DragEvent) {
console.debug("drop",event)
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
setHover(false) setHover(false)
@ -49,31 +45,25 @@ const DragAndDrop: React.FC<Props> = (props) => {
} }
useEffect(()=>{ useEffect(()=>{
if(dropRef.current){ document.addEventListener("dragenter",handleDragEnter)
dropRef.current.addEventListener("dragenter",handleDragEnter) document.addEventListener("dragleave",handleDragLeave)
dropRef.current.addEventListener("dragleave",handleDragLeave) document.addEventListener("dragover",handleDragOver)
dropRef.current.addEventListener("dragover",handleDragOver) document.addEventListener("drop",handleDrop)
dropRef.current.addEventListener("drop",handleDrop)
return ()=>{ return ()=>{
if (dropRef.current){ document.removeEventListener("dragenter",handleDragEnter)
dropRef.current.removeEventListener("dragenter",handleDragEnter) document.removeEventListener("dragleave",handleDragLeave)
dropRef.current.removeEventListener("dragleave",handleDragLeave) document.removeEventListener("dragover",handleDragOver)
dropRef.current.removeEventListener("dragover",handleDragOver) document.removeEventListener("drop",handleDrop)
dropRef.current.removeEventListener("drop",handleDrop)
}
}
} }
},[]) },[])
return ( return (
<div ref={dropRef} <div className={`fixed top-0 left-0 w-full h-full z-10 pointer-events-none
className={`fixed top-0 left-0 w-full h-full z-10 ${hover? "border-dashed border-gray-600 border-4":""}`} />
${hover? "border-dashed border-gray-600 border-4":""}`}
>
{props.children}
</div>
) )
} }
export default DragAndDrop export default GlobalDragAndDrop