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 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,11 +103,10 @@ 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())
@ -180,7 +179,6 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
setShowFile(false)
}} />
</DragAndDrop>
</div>
)
}

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

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