@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
90 lines • 4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDropzoneMonitor = exports.useApplicationHeaderOverModals = void 0;
const react_1 = __importDefault(require("react"));
const constants_1 = require("../../configuration/constants");
const useApplicationHeaderOverModals = (elevate, className) => {
return react_1.default.useEffect(() => {
const 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(`${constants_1.CLASSPREFIX}-application--topheader`);
classNames.forEach((className) => {
if (className)
window.document.body.classList.add(className);
});
}
else {
window.document.body.classList.remove(`${constants_1.CLASSPREFIX}-application--topheader`);
classNames.forEach((className) => {
if (className)
window.document.body.classList.remove(className);
});
}
}, [elevate, className]);
};
exports.useApplicationHeaderOverModals = useApplicationHeaderOverModals;
/**
* Tracks drag operations over the application.
* Sets different data attributes to the body element.
* They can be used to apply styling rules.
*/
const useDropzoneMonitor = (enabledTypes) => {
react_1.default.useEffect(() => {
const monitor = window.document.body;
let timestampMonitorEnabled = 0;
let processDragleave;
const addMonitor = (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
const types = ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || [];
const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
monitor.dataset.monitorDropzone = monitorTypes.join(" ");
}
timestampMonitorEnabled = Date.now();
};
const removeMonitor = (event) => {
const removeAction = () => {
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 () => {
monitor.removeEventListener("dragover", addMonitor);
monitor.removeEventListener("dragleave", removeMonitor);
monitor.removeEventListener("drop", removeMonitor);
};
}
return;
}, []);
};
exports.useDropzoneMonitor = useDropzoneMonitor;
//# sourceMappingURL=helper.js.map