@ozen-ui/kit
Version:
React component library
109 lines (108 loc) • 4.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAsFileUploaderDropZone = void 0;
var useEventListener_1 = require("../../../../hooks/useEventListener");
var useStoredValue_1 = require("../../../../hooks/useStoredValue");
var context_1 = require("../../context");
var utils_1 = require("../../utils");
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 = (0, context_1.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 = (0, useStoredValue_1.useStoredValue)(false);
var isDraggingOver = (0, useStoredValue_1.useStoredValue)(false);
(0, useEventListener_1.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,
});
(0, useEventListener_1.useEventListener)({
element: ref,
eventName: 'dragover',
handler: function (event) {
event.preventDefault();
event.stopPropagation();
},
active: isActive,
});
(0, useEventListener_1.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,
});
(0, useEventListener_1.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((0, utils_1.mergeFiles)(files, eventFiles));
},
active: isActive,
});
(0, useEventListener_1.useEventListener)({
element: ref,
eventName: 'click',
handler: function () {
if (isLoadingStatus || isDisabledStatus || !isWithReactionToClick) {
return;
}
openUploader();
},
active: isActive,
});
};
exports.useAsFileUploaderDropZone = useAsFileUploaderDropZone;