@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
107 lines • 4.51 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React from "react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
export var useApplicationHeaderOverModals = function (elevate, className) {
return React.useEffect(function () {
var classNames = className ? className.split(" ") : [];
if (elevate) {
// add css classes to body element to display ApplicationHeader on top overlays and popovers
window.document.body.classList.add("".concat(eccgui, "-application--topheader"));
classNames.forEach(function (className) {
if (className)
window.document.body.classList.add(className);
});
}
else {
window.document.body.classList.remove("".concat(eccgui, "-application--topheader"));
classNames.forEach(function (className) {
if (className)
window.document.body.classList.remove(className);
});
}
}, [elevate, className]);
};
/**
* Tracks drag operations over the application.
* Sets different data attributes to the body element.
* They can be used to apply styling rules.
*/
export var useDropzoneMonitor = function (enabledTypes) {
React.useEffect(function () {
var monitor = window.document.body;
var timestampMonitorEnabled = 0;
var processDragleave;
var addMonitor = function (event) {
var _a;
// stop default, so that also no files cannot executed by browser without demand
event.preventDefault();
if (processDragleave) {
// stop removeMonitor process if it happend shortly before
clearTimeout(processDragleave);
}
// only process if monitor is not already enabled
if (timestampMonitorEnabled > 0) {
return;
}
// stop the event here to prevent double execution
event.stopImmediatePropagation();
// enable monitoring only for supported types of dragged elements
var types = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || [];
var monitorTypes = __spreadArray([], __read(new Set(types.filter(function (type) { return enabledTypes.includes(type); }))), false);
if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
monitor.dataset.monitorDropzone = monitorTypes.join(" ");
}
timestampMonitorEnabled = Date.now();
};
var removeMonitor = function (event) {
var removeAction = function () {
delete monitor.dataset.monitorDropzone;
event.preventDefault();
timestampMonitorEnabled = 0;
};
if (event.type === "dragleave") {
// use timeout function for dragleave to prevent useless removeMonitor actions
processDragleave = setTimeout(removeAction, 250);
}
else {
removeAction();
}
};
if (monitor) {
monitor.addEventListener("dragover", addMonitor);
monitor.addEventListener("dragleave", removeMonitor);
monitor.addEventListener("drop", removeMonitor);
return function () {
monitor.removeEventListener("dragover", addMonitor);
monitor.removeEventListener("dragleave", removeMonitor);
monitor.removeEventListener("drop", removeMonitor);
};
}
return;
}, []);
};
//# sourceMappingURL=helper.js.map