made drag and drop handler global
This commit is contained in:
parent
c12181fe16
commit
06b7c323ae
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 ()=>{
|
||||
document.removeEventListener("dragenter",handleDragEnter)
|
||||
document.removeEventListener("dragleave",handleDragLeave)
|
||||
document.removeEventListener("dragover",handleDragOver)
|
||||
document.removeEventListener("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 (
|
||||
<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
|
||||
Loading…
Reference in New Issue
Block a user