archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

fix: 🐛 track "over" state better in useDrop hook

Browse Source
This commit is contained in:
streamich 2019-03-27 19:57:18 +01:00
parent 6e415cfdef
commit acc355cfa4
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/useDrop.ts
View File

@ -51,7 +51,7 @@ const createProcess = (options: DropAreaOptions, mounted: React.RefObject<boolea
}
};
const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
const useDrop = (options: DropAreaOptions = {}, args = []): DropAreaState => {
const {onFiles, onText, onUri} = options;
const mounted = useRefMounted();
const [over, setOverRaw] = useState<boolean>(false);
@ -61,6 +61,7 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
useEffect(() => {
const onDragOver = (event) => {
event.preventDefault();
setOver(true);
};
const onDragEnter = (event) => {
@ -69,7 +70,7 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
};
const onDragLeave = () => {
setOver(true);
setOver(false);
};
const onDragExit = () => {
@ -86,25 +87,23 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
process(event.clipboardData, event);
};
window.addEventListener('dragover', onDragOver);
window.addEventListener('dragenter', onDragEnter);
window.addEventListener('dragleave', onDragLeave);
window.addEventListener('dragexit', onDragExit);
window.addEventListener('drop', onDrop);
if (onText) {
window.addEventListener('paste', onPaste);
}
document.addEventListener('dragover', onDragOver);
document.addEventListener('dragenter', onDragEnter);
document.addEventListener('dragleave', onDragLeave);
document.addEventListener('dragexit', onDragExit);
document.addEventListener('drop', onDrop);
if (onText)
document.addEventListener('paste', onPaste);
return () => {
window.removeEventListener('dragover', onDragOver);
window.removeEventListener('dragenter', onDragEnter);
window.removeEventListener('dragleave', onDragLeave);
window.removeEventListener('dragexit', onDragExit);
window.removeEventListener('drop', onDrop);
window.removeEventListener('paste', onPaste);
document.removeEventListener('dragover', onDragOver);
document.removeEventListener('dragenter', onDragEnter);
document.removeEventListener('dragleave', onDragLeave);
document.removeEventListener('dragexit', onDragExit);
document.removeEventListener('drop', onDrop);
document.removeEventListener('paste', onPaste);
};
}, [process]);
}, [process, ...args]);
return {over};
};