From 06b7c323aea4696c8f57979aa73fdf89d9aa5315 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Fri, 1 Oct 2021 21:23:27 +0200
Subject: [PATCH] made drag and drop handler global

---
 src/components/FileBrowser.tsx                | 146 +++++++++---------
 ...{DragAndDrop.tsx => GlobalDragAndDrop.tsx} |  40 ++---
 2 files changed, 87 insertions(+), 99 deletions(-)
 rename src/components/{DragAndDrop.tsx => GlobalDragAndDrop.tsx} (51%)

diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index 32ec9a5..a382a3a 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -8,7 +8,7 @@ import uploadFile from "../functions/uploadFile"
 import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import CreateDirButton from "./CreateDirButton"
-import DragAndDrop from "./DragAndDrop"
+import GlobalDragAndDrop from "./GlobalDragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
@@ -103,84 +103,82 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 				onSelect={onContextSelect}
 				pasteActive={!!srcID}
 			/>
-			<DragAndDrop
+			<GlobalDragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)
-				}}
-			>
-				<div className="flex justify-between h-12">
-					<Breadcrum path={path} onDirClick={(newPath)=>{
-						props.history.push(newPath.toURI())
-					}}/>
-					<div className="ml-auto">
-						<CreateDirButton 
-							onPressed={async (dirName)=>{
-								const dirID = new ObjID(path.bucket,path.key + dirName + "/")
-								await createDirMutation({variables:{path: dirID}})
-								refetchDir()
-							}}
-						/>
-					</div>
-					<div>
-						<FileUploadButton 
-							onUpload={(files)=>handleDrop(files)}
-						/>
-					</div>
-					<div>
-						<MoreMenu />
-					</div>
-
-				</div>
-				<div>
-					<FileBrowserList 
-						directorys={data?.directories || []}
-						files={data?.files || []}
-
-						onDirClick={(e,path)=>{
-							props.history.push(path.toURI())
-						}}
-
-						onDirContext={(e,path)=>{
-							e.preventDefault()
-							showDirContext(e,{props:{id:path}})
-						}}
-
-						onFileClick={(e,id)=>{
-							setOpenFileId(id)
-							setShowFile(true)
-						}}
-
-						onFileContext={(e,id)=>{
-							e.preventDefault()
-							showFileContext(e,{props:{id}})
-						}}
-
-						editId={editID}
-						editEnable={editEnable}
-
-						onRenameDone={async (id,changed,newName)=>{
-							setEditEnable(false)
-							if (changed){
-								// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
-								// TODO: input check & error handling
-								await moveMutation({variables:{
-									src:id,
-									dest: id.rename(newName)
-								}})
-								refetchDir()
-							}
+				}}/>
+			<div className="flex justify-between h-12">
+				<Breadcrum path={path} onDirClick={(newPath)=>{
+					props.history.push(newPath.toURI())
+				}}/>
+				<div className="ml-auto">
+					<CreateDirButton 
+						onPressed={async (dirName)=>{
+							const dirID = new ObjID(path.bucket,path.key + dirName + "/")
+							await createDirMutation({variables:{path: dirID}})
+							refetchDir()
 						}}
 					/>
-					{loading && 
-						<div className="flex justify-center mt-4">
-							<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
-						</div>
-					}
 				</div>
-				<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
-					setShowFile(false)
-				}} />
-			</DragAndDrop>
+				<div>
+					<FileUploadButton 
+						onUpload={(files)=>handleDrop(files)}
+					/>
+				</div>
+				<div>
+					<MoreMenu />
+				</div>
+
+			</div>
+			<div>
+				<FileBrowserList 
+					directorys={data?.directories || []}
+					files={data?.files || []}
+
+					onDirClick={(e,path)=>{
+						props.history.push(path.toURI())
+					}}
+
+					onDirContext={(e,path)=>{
+						e.preventDefault()
+						showDirContext(e,{props:{id:path}})
+					}}
+
+					onFileClick={(e,id)=>{
+						setOpenFileId(id)
+						setShowFile(true)
+					}}
+
+					onFileContext={(e,id)=>{
+						e.preventDefault()
+						showFileContext(e,{props:{id}})
+					}}
+
+					editId={editID}
+					editEnable={editEnable}
+
+					onRenameDone={async (id,changed,newName)=>{
+						setEditEnable(false)
+						if (changed){
+							// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
+							// TODO: input check & error handling
+							await moveMutation({variables:{
+								src:id,
+								dest: id.rename(newName)
+							}})
+							refetchDir()
+						}
+					}}
+				/>
+				{loading && 
+					<div className="flex justify-center mt-4">
+						<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+					</div>
+				}
+			</div>
+			<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				setShowFile(false)
+			}} />
 		</div>
 	)
 }
diff --git a/src/components/DragAndDrop.tsx b/src/components/GlobalDragAndDrop.tsx
similarity index 51%
rename from src/components/DragAndDrop.tsx
rename to src/components/GlobalDragAndDrop.tsx
index 36baef3..1efb756 100644
--- a/src/components/DragAndDrop.tsx
+++ b/src/components/GlobalDragAndDrop.tsx
@@ -10,12 +10,10 @@ interface Props {
 	handleDrop?: (files: FileList)=>void
 }
 
-const DragAndDrop: React.FC<Props> = (props) => {
-	const dropRef = React.createRef<HTMLDivElement>()
+const GlobalDragAndDrop: React.FC<Props> = (props) => {
 	const [hover,setHover] = useState(false)
 
 	function handleDragEnter(event: DragEvent) {
-		// console.debug("dragenter",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(true)
@@ -23,7 +21,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	function handleDragLeave(event: DragEvent) {
-		// console.debug("dragleave",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(false)
@@ -38,7 +35,6 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	function handleDrop(event: DragEvent) {
-		console.debug("drop",event)
 		event.preventDefault()
 		event.stopPropagation()
 		setHover(false)
@@ -49,31 +45,25 @@ const DragAndDrop: React.FC<Props> = (props) => {
 	}
 
 	useEffect(()=>{
-		if(dropRef.current){
-			dropRef.current.addEventListener("dragenter",handleDragEnter)
-			dropRef.current.addEventListener("dragleave",handleDragLeave)
-			dropRef.current.addEventListener("dragover",handleDragOver)
-			dropRef.current.addEventListener("drop",handleDrop)
+		document.addEventListener("dragenter",handleDragEnter)
+		document.addEventListener("dragleave",handleDragLeave)
+		document.addEventListener("dragover",handleDragOver)
+		document.addEventListener("drop",handleDrop)
 
-			return ()=>{
-				if (dropRef.current){
-					dropRef.current.removeEventListener("dragenter",handleDragEnter)
-					dropRef.current.removeEventListener("dragleave",handleDragLeave)
-					dropRef.current.removeEventListener("dragover",handleDragOver)
-					dropRef.current.removeEventListener("drop",handleDrop)
-				}
-			}
+		return ()=>{
+			document.removeEventListener("dragenter",handleDragEnter)
+			document.removeEventListener("dragleave",handleDragLeave)
+			document.removeEventListener("dragover",handleDragOver)
+			document.removeEventListener("drop",handleDrop)
+			
 		}
+	
 	},[])
 
 	return (
-		<div ref={dropRef} 
-			className={`fixed top-0 left-0 w-full h-full z-10
-				${hover? "border-dashed border-gray-600 border-4":""}`}
-		>
-			{props.children}
-		</div>
+		<div className={`fixed top-0 left-0 w-full h-full z-10 pointer-events-none
+				${hover? "border-dashed border-gray-600 border-4":""}`} />
 	)
 }
 
-export default DragAndDrop
+export default GlobalDragAndDrop