added drag and drop to file browser

src/components/DragAndDrop.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { useState } from "react"
+import { useEffect } from "react"
+import style from "./../style/DragAndDrop.module.scss"
+
+interface Props {
+	onDrop?: ()=>void
+	onEnter?: (event: DragEvent)=>void
+	onLeave?: (event: DragEvent)=>void
+	onDragOver?: (event: DragEvent)=>void
+	handleDrop?: (files: FileList)=>void
+}
+
+const DragAndDrop: React.FC<Props> = (props) => {
+	const dropRef = React.createRef<HTMLDivElement>()
+	const [hover,setHover] = useState(false)
+
+	function handleDragEnter(event: DragEvent) {
+		// console.debug("dragenter",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onEnter?.(event)
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		// console.debug("dragleave",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onLeave?.(event)
+	}
+
+	function handleDragOver(event:DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onDragOver?.(event)
+	}
+
+	function handleDrop(event: DragEvent) {
+		console.debug("drop",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onDrop?.()
+		if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+			props.handleDrop?.(event.dataTransfer.files)
+			// event.dataTransfer.clearData()
+		}
+	}
+
+	useEffect(()=>{
+		if(dropRef.current){
+			console.debug("Add drag event listner")
+			dropRef.current.addEventListener("dragenter",handleDragEnter)
+			dropRef.current.addEventListener("dragleave",handleDragLeave)
+			dropRef.current.addEventListener("dragover",handleDragOver)
+			dropRef.current.addEventListener("drop",handleDrop)
+
+			return ()=>{
+				if (dropRef.current){
+					console.debug("Remove drag event listner")
+					dropRef.current.removeEventListener("dragenter",handleDragEnter)
+					dropRef.current.removeEventListener("dragleave",handleDragLeave)
+					dropRef.current.removeEventListener("dragover",handleDragOver)
+					dropRef.current.removeEventListener("drop",handleDrop)
+				}
+			}
+		}
+	},[])
+
+	return (
+		<div ref={dropRef} className={`${style.dragAndDrop} ${hover? style.active:""}`}>
+			{props.children}
+		</div>
+	)
+}
+
+export default DragAndDrop

src/components/FileBrowser.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { useState } from "react"
 import { useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
+import DragAndDrop from "./DragAndDrop"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 
@@ -16,46 +17,57 @@ const FileBrowser: React.FC = () => {
 		}
 	})
 
+	function handleDrop(files:FileList) {
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i]
+			console.debug(file) // TODO
+		}
+	}
+
 	return (
 		<div>
-			<Breadcrum path={path} onDirClick={(newPath)=>{
+			<DragAndDrop
-				setPath(newPath)
+				handleDrop={handleDrop}
-			}}/>
+			>
-			<div>
+				<Breadcrum path={path} onDirClick={(newPath)=>{
-				{loading && 
+					setPath(newPath)
-					<div className="loading loading-lg"></div> // TODO: center
+				}}/>
-				}
+				<div>
-				<table className="table table-striped table-hover">
+					{loading && 
-					<thead>
+						<div className="loading loading-lg"></div> // TODO: center
-						<tr>
+					}
-							<th>Name</th>
+					<table className="table table-striped table-hover">
-							<th>Size</th>
+						<thead>
-						</tr>
+							<tr>
-					</thead>
+								<th>Name</th>
-					<tbody>
+								<th>Size</th>
+							</tr>
+						</thead>
+						<tbody>
 
-						{ data?.directorys.map(v => (<FileBrowserElement
+							{ data?.directorys.map(v => (<FileBrowserElement
-							key={v?.id}
+								key={v?.id}
-							dir={v}
+								dir={v}
-							onClick={(dir)=>{
+								onClick={(dir)=>{
-								setPath(dir.id)
+									setPath(dir.id)
-							}}
+								}}
-						/>))}
+							/>))}
 								
-						{ data?.files.map(v => (<FileBrowserElement 
+							{ data?.files.map(v => (<FileBrowserElement 
-							key={v?.id}
+								key={v?.id}
-							file={v}
+								file={v}
-							onClick={(file)=>{
+								onClick={(file)=>{
-								setOpenFileId(file.id)
+									setOpenFileId(file.id)
-								setShowFile(true)
+									setShowFile(true)
-							}}
+								}}
-						/>))}
+							/>))}
-					</tbody>
+						</tbody>
-				</table>
+					</table>
-			</div>
+				</div>
-			{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
-				setShowFile(false)
+					setShowFile(false)
-			}} />}
+				}} />}
+			</DragAndDrop>
 		</div>
 	)
 }

src/index.tsx

@@ -9,6 +9,16 @@ const client = new ApolloClient({
 	cache: new InMemoryCache()
 })
 
+// Disable drag and drop behaviour on document
+function disable(event: DragEvent) {
+	event.preventDefault()
+	event.stopPropagation()
+}
+document.addEventListener("dragenter",disable)
+document.addEventListener("dragleave",disable)
+document.addEventListener("dragover",disable)
+document.addEventListener("drop",disable)
+
 ReactDOM.render(
 	<React.StrictMode>
 		<ApolloProvider client={client}>

src/style/DragAndDrop.module.scss

@@ -0,0 +1,21 @@
+.active{
+    border: dashed grey 4px;
+    background-color: rgba(255,255,255,.8);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+}
+
+.dragAndDrop{
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+}