react-drag-drop-files
Version:
Light React Drag & Drop files and images library styled by styled-components
73 lines • 2.51 kB
JavaScript
import { useState, useEffect, useCallback } from 'react';
var draggingCount = 0;
/**
*
* @param data - labelRef, inputRef, handleChanges, onDrop
* @returns boolean - the state.
*
* @internal
*/
export default function useDragging(_a) {
var labelRef = _a.labelRef, inputRef = _a.inputRef, multiple = _a.multiple, handleChanges = _a.handleChanges, onDrop = _a.onDrop;
var _b = useState(false), dragging = _b[0], setDragging = _b[1];
var handleClick = useCallback(function () {
inputRef.current.click();
}, [inputRef]);
var handleDragIn = useCallback(function (ev) {
ev.preventDefault();
ev.stopPropagation();
draggingCount++;
if (ev.dataTransfer.items && ev.dataTransfer.items.length !== 0) {
setDragging(true);
}
}, []);
var handleDragOut = useCallback(function (ev) {
ev.preventDefault();
ev.stopPropagation();
draggingCount--;
if (draggingCount > 0)
return;
setDragging(false);
}, []);
var handleDrag = useCallback(function (ev) {
ev.preventDefault();
ev.stopPropagation();
}, []);
var handleDrop = useCallback(function (ev) {
ev.preventDefault();
ev.stopPropagation();
setDragging(false);
draggingCount = 0;
var eventFiles = ev.dataTransfer.files;
if (eventFiles && eventFiles.length > 0) {
var files = multiple ? eventFiles : eventFiles[0];
var success = handleChanges(files);
if (onDrop && success)
onDrop(files);
}
}, [handleChanges]);
useEffect(function () {
var ele = labelRef.current;
ele.addEventListener('click', handleClick);
ele.addEventListener('dragenter', handleDragIn);
ele.addEventListener('dragleave', handleDragOut);
ele.addEventListener('dragover', handleDrag);
ele.addEventListener('drop', handleDrop);
return function () {
ele.removeEventListener('click', handleClick);
ele.removeEventListener('dragenter', handleDragIn);
ele.removeEventListener('dragleave', handleDragOut);
ele.removeEventListener('dragover', handleDrag);
ele.removeEventListener('drop', handleDrop);
};
}, [
handleClick,
handleDragIn,
handleDragOut,
handleDrag,
handleDrop,
labelRef
]);
return dragging;
}
//# sourceMappingURL=useDragging.js.map