59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { useMemo, useState } from 'react';
|
|
import useMountedState from './useMountedState';
|
|
import { noop } from './misc/util';
|
|
/*
|
|
const defaultState: DropAreaState = {
|
|
over: false,
|
|
};
|
|
*/
|
|
var createProcess = function (options, mounted) { return function (dataTransfer, event) {
|
|
var uri = dataTransfer.getData('text/uri-list');
|
|
if (uri) {
|
|
(options.onUri || noop)(uri, event);
|
|
return;
|
|
}
|
|
if (dataTransfer.files && dataTransfer.files.length) {
|
|
(options.onFiles || noop)(Array.from(dataTransfer.files), event);
|
|
return;
|
|
}
|
|
if (dataTransfer.items && dataTransfer.items.length) {
|
|
dataTransfer.items[0].getAsString(function (text) {
|
|
if (mounted) {
|
|
(options.onText || noop)(text, event);
|
|
}
|
|
});
|
|
}
|
|
}; };
|
|
var createBond = function (process, setOver) { return ({
|
|
onDragOver: function (event) {
|
|
event.preventDefault();
|
|
},
|
|
onDragEnter: function (event) {
|
|
event.preventDefault();
|
|
setOver(true);
|
|
},
|
|
onDragLeave: function () {
|
|
setOver(false);
|
|
},
|
|
onDrop: function (event) {
|
|
event.preventDefault();
|
|
event.persist();
|
|
setOver(false);
|
|
process(event.dataTransfer, event);
|
|
},
|
|
onPaste: function (event) {
|
|
event.persist();
|
|
process(event.clipboardData, event);
|
|
},
|
|
}); };
|
|
var useDropArea = function (options) {
|
|
if (options === void 0) { options = {}; }
|
|
var onFiles = options.onFiles, onText = options.onText, onUri = options.onUri;
|
|
var isMounted = useMountedState();
|
|
var _a = useState(false), over = _a[0], setOver = _a[1];
|
|
var process = useMemo(function () { return createProcess(options, isMounted()); }, [onFiles, onText, onUri]);
|
|
var bond = useMemo(function () { return createBond(process, setOver); }, [process, setOver]);
|
|
return [bond, { over: over }];
|
|
};
|
|
export default useDropArea;
|