@wordpress/compose
Version:
WordPress higher-order components (HOCs).
157 lines (156 loc) • 5.72 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var use_drop_zone_exports = {};
__export(use_drop_zone_exports, {
default: () => useDropZone
});
module.exports = __toCommonJS(use_drop_zone_exports);
var import_use_ref_effect = __toESM(require("../use-ref-effect"));
var import_use_event = __toESM(require("../use-event"));
function useDropZone({
dropZoneElement,
isDisabled,
onDrop: _onDrop,
onDragStart: _onDragStart,
onDragEnter: _onDragEnter,
onDragLeave: _onDragLeave,
onDragEnd: _onDragEnd,
onDragOver: _onDragOver
}) {
const onDropEvent = (0, import_use_event.default)(_onDrop);
const onDragStartEvent = (0, import_use_event.default)(_onDragStart);
const onDragEnterEvent = (0, import_use_event.default)(_onDragEnter);
const onDragLeaveEvent = (0, import_use_event.default)(_onDragLeave);
const onDragEndEvent = (0, import_use_event.default)(_onDragEnd);
const onDragOverEvent = (0, import_use_event.default)(_onDragOver);
return (0, import_use_ref_effect.default)(
(elem) => {
if (isDisabled) {
return;
}
const element = dropZoneElement ?? elem;
let isDragging = false;
const { ownerDocument } = element;
function isElementInZone(targetToCheck) {
const { defaultView } = ownerDocument;
if (!targetToCheck || !defaultView || !(targetToCheck instanceof defaultView.HTMLElement) || !element.contains(targetToCheck)) {
return false;
}
let elementToCheck = targetToCheck;
do {
if (elementToCheck.dataset.isDropZone) {
return elementToCheck === element;
}
} while (elementToCheck = elementToCheck.parentElement);
return false;
}
function maybeDragStart(event) {
if (isDragging) {
return;
}
isDragging = true;
ownerDocument.addEventListener("dragend", maybeDragEnd);
ownerDocument.addEventListener("mousemove", maybeDragEnd);
if (_onDragStart) {
onDragStartEvent(event);
}
}
function onDragEnter(event) {
event.preventDefault();
if (element.contains(
/** @type {Node} */
event.relatedTarget
)) {
return;
}
if (_onDragEnter) {
onDragEnterEvent(event);
}
}
function onDragOver(event) {
if (!event.defaultPrevented && _onDragOver) {
onDragOverEvent(event);
}
event.preventDefault();
}
function onDragLeave(event) {
if (isElementInZone(event.relatedTarget)) {
return;
}
if (_onDragLeave) {
onDragLeaveEvent(event);
}
}
function onDrop(event) {
if (event.defaultPrevented) {
return;
}
event.preventDefault();
event.dataTransfer && event.dataTransfer.files.length;
if (_onDrop) {
onDropEvent(event);
}
maybeDragEnd(event);
}
function maybeDragEnd(event) {
if (!isDragging) {
return;
}
isDragging = false;
ownerDocument.removeEventListener("dragend", maybeDragEnd);
ownerDocument.removeEventListener("mousemove", maybeDragEnd);
if (_onDragEnd) {
onDragEndEvent(event);
}
}
element.setAttribute("data-is-drop-zone", "true");
element.addEventListener("drop", onDrop);
element.addEventListener("dragenter", onDragEnter);
element.addEventListener("dragover", onDragOver);
element.addEventListener("dragleave", onDragLeave);
ownerDocument.addEventListener("dragenter", maybeDragStart);
return () => {
element.removeAttribute("data-is-drop-zone");
element.removeEventListener("drop", onDrop);
element.removeEventListener("dragenter", onDragEnter);
element.removeEventListener("dragover", onDragOver);
element.removeEventListener("dragleave", onDragLeave);
ownerDocument.removeEventListener("dragend", maybeDragEnd);
ownerDocument.removeEventListener("mousemove", maybeDragEnd);
ownerDocument.removeEventListener(
"dragenter",
maybeDragStart
);
};
},
[isDisabled, dropZoneElement]
// Refresh when the passed in dropZoneElement changes.
);
}
//# sourceMappingURL=index.js.map