-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from vimdotmd/feature/drop-file
Feat: Support drag file to open
- Loading branch information
Showing
8 changed files
with
108 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,5 @@ | ||
/node_modules | ||
/.parcel-cache | ||
/dist | ||
|
||
.DS_Store | ||
|
||
.vercel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
node_modules/ | ||
dist/ | ||
public/ | ||
/node_modules | ||
/.parcel-cache | ||
/dist | ||
.DS_Store | ||
.vercel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
.container { | ||
position: absolute; | ||
z-index: 1000; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
|
||
background-color: rgba(var(--bg-color-rgb), 0.5); | ||
backdrop-filter: blur(20px); | ||
|
||
display: grid; | ||
place-items: center; | ||
|
||
pointer-events: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import s from "./drop.module.css"; | ||
|
||
export const AppDrop = (): JSX.Element => ( | ||
<div className={s.container}> | ||
<p className={s.body}>Drop file here to open</p> | ||
</div> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import * as React from "react"; | ||
import { FileState } from "~src/components/file/state"; | ||
|
||
interface AppDropState { | ||
dragging: boolean; | ||
handlers: Pick< | ||
React.DOMAttributes<HTMLDivElement>, | ||
"onDrop" | "onDragOver" | "onDragEnter" | "onDragLeave" | ||
>; | ||
} | ||
|
||
interface Params { | ||
file: FileState; | ||
} | ||
|
||
export const useAppDrop = (params: Params): AppDropState => { | ||
// Keep a counter to reliably detect when the drag is still there. We can | ||
// not mute pointer-events on App's children (editor and toolbar). | ||
// https://stackoverflow.com/a/21002544 | ||
const counter = React.useRef(0); | ||
// Since ref does not trigger re-render, we still need a state, but we will | ||
// only set this state when counter is changed between 0 and 1 to avoid | ||
// unnecessary re-renders | ||
const [dragging, setDragging] = React.useState(false); | ||
|
||
const onDrop = async (event: React.DragEvent) => { | ||
event.preventDefault(); | ||
setDragging(false); | ||
counter.current = 0; | ||
|
||
const { items } = event.dataTransfer; | ||
if (1 < items.length || items[0].kind !== "file") | ||
throw Error("Only a single file upload is supported."); | ||
|
||
const file = await items[0].getAsFileSystemHandle(); | ||
if (file) params.file.setFile(file as FileSystemFileHandle); | ||
}; | ||
|
||
const onDragOver = (event: React.DragEvent): void => { | ||
// Specifying this as a drop target | ||
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets | ||
event.preventDefault(); | ||
}; | ||
|
||
const onDragEnter = (event: React.DragEvent): void => { | ||
// Specifying this as a drop target | ||
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets | ||
event.preventDefault(); | ||
if (counter.current === 0) setDragging(true); | ||
counter.current = counter.current + 1; | ||
}; | ||
|
||
const onDragLeave = (_event: React.DragEvent): void => { | ||
if (counter.current === 1) setDragging(false); | ||
counter.current = counter.current - 1; | ||
}; | ||
|
||
const handlers: AppDropState["handlers"] = { | ||
onDrop, | ||
onDragEnter, | ||
onDragLeave, | ||
onDragOver, | ||
}; | ||
|
||
return { handlers, dragging }; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters