@ozen-ui/kit
Version:
React component library
105 lines (104 loc) • 3.88 kB
JavaScript
import { useEventListener } from '../../../../hooks/useEventListener';
import { useStoredValue } from '../../../../hooks/useStoredValue';
import { useFileUploaderContext } from '../../context';
import { mergeFiles } from '../../utils';
export var useAsFileUploaderDropZone = function (ref, options) {
var _a = options !== null && options !== void 0 ? options : {}, _b = _a.isWithReactionToClick, isWithReactionToClick = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
var _d = useFileUploaderContext(), setDragging = _d.setDragging, setFiles = _d.setFiles, files = _d.files, status = _d.status, openUploader = _d.openUploader, calculateAllow = _d.calculateAllow, onAllowDropChange = _d.onAllowDropChange, onDrop = _d.onDrop;
var isActive = !disabled;
var isDisabledStatus = status === 'disabled';
var isLoadingStatus = status === 'loading';
var getDataTransferFiles = function (event) {
var _a;
var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
if (!eventFiles) {
return [];
}
return Array.from(eventFiles);
};
var getDataTransferItems = function (event) {
var _a;
var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
if (!eventFiles) {
return [];
}
return Array.from(eventFiles);
};
var lastIsAllow = useStoredValue(false);
var isDraggingOver = useStoredValue(false);
useEventListener({
element: ref,
eventName: 'dragenter',
handler: function (event) {
event.preventDefault();
event.stopPropagation();
if (isDraggingOver.current) {
return;
}
var items = getDataTransferItems(event);
var calculatedAllow = calculateAllow(items);
lastIsAllow.current = calculatedAllow.isAllow;
onAllowDropChange(calculatedAllow.isAllow, calculatedAllow.failed);
isDraggingOver.current = true;
if (!calculatedAllow.isAllow) {
return;
}
setDragging(event, true);
},
active: isActive,
});
useEventListener({
element: ref,
eventName: 'dragover',
handler: function (event) {
event.preventDefault();
event.stopPropagation();
},
active: isActive,
});
useEventListener({
element: ref,
eventName: 'dragleave',
handler: function (event) {
var _a;
event.preventDefault();
event.stopPropagation();
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
return;
}
setDragging(event, false);
onAllowDropChange(true, []);
isDraggingOver.current = false;
},
active: isActive,
});
useEventListener({
element: ref,
eventName: 'drop',
handler: function (event) {
event.preventDefault();
event.stopPropagation();
var eventFiles = getDataTransferFiles(event);
onDrop(event, eventFiles);
setDragging(event, false);
isDraggingOver.current = false;
if (!lastIsAllow.current) {
onAllowDropChange(true, []);
return;
}
setFiles(mergeFiles(files, eventFiles));
},
active: isActive,
});
useEventListener({
element: ref,
eventName: 'click',
handler: function () {
if (isLoadingStatus || isDisabledStatus || !isWithReactionToClick) {
return;
}
openUploader();
},
active: isActive,
});
};