@netdata/netdata-ui
Version:
netdata UI kit
106 lines (105 loc) • 3.94 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = require("react");
var getAbsoluteXPosition = function getAbsoluteXPosition(align, targetRect, dropRect) {
if (align.left === "left") return targetRect.left;
if (align.left === "right") return targetRect.right;
if (align.right === "right") return targetRect.right - dropRect.width;
if (align.right === "left") return targetRect.left - dropRect.width;
return targetRect.left + targetRect.width / 2 - dropRect.width / 2;
};
var reverseXPosition = function reverseXPosition(align) {
if (align.left === "left") return {
right: "right"
};
if (align.left === "right") return {
right: "left"
};
if (align.right === "right") return {
left: "left"
};
if (align.right === "left") return {
left: "right"
};
return align;
};
var _getXPosition = function getXPosition(align, targetRect, dropRect, canHideTarget) {
if (canHideTarget === void 0) {
canHideTarget = true;
}
var x = getAbsoluteXPosition(align, targetRect, dropRect);
var minX = Math.max(0, x);
x = Math.min(window.innerWidth - dropRect.width, minX);
if (!canHideTarget && minX !== x) return _getXPosition(reverseXPosition(align), targetRect, dropRect);
return x;
};
var getAbsoluteYPosition = function getAbsoluteYPosition(align, targetRect, dropRect) {
if (align.top === "top") return targetRect.top;
if (align.top === "bottom") return targetRect.bottom;
if (align.bottom === "bottom") return targetRect.bottom - dropRect.height;
if (align.bottom === "top") {
var y = targetRect.top - dropRect.height;
if (y < 0 && targetRect.bottom + dropRect.height < window.innerHeight) {
return targetRect.bottom;
}
return y;
}
return targetRect.top + targetRect.height / 2 - dropRect.height / 2;
};
var reverseYPosition = function reverseYPosition(align) {
if (align.top === "top") return {
bottom: "bottom"
};
if (align.top === "bottom") return {
bottom: "top"
};
if (align.bottom === "bottom") return {
top: "top"
};
if (align.bottom === "top") return {
top: "bottom"
};
return align;
};
var _getYPosition = function getYPosition(align, targetRect, dropRect, canHideTarget) {
if (canHideTarget === void 0) {
canHideTarget = true;
}
var y = getAbsoluteYPosition(align, targetRect, dropRect);
var minY = Math.max(0, y);
y = Math.min(window.innerHeight - dropRect.height, minY);
if (!canHideTarget && minY !== y) return _getYPosition(reverseYPosition(align), targetRect, dropRect);
return y;
};
var getWidth = function getWidth(stretch, targetRect, dropRect) {
if (stretch === "align") return Math.min(targetRect.width, dropRect.width);
if (stretch === "width") return Math.max(targetRect.width, dropRect.width);
return Math.min(dropRect.width, window.innerWidth);
};
var styles = ["top", "right", "bottom", "right", "width"];
var _default = exports["default"] = function _default(target, dropRef, align, stretch, canHideTarget, keepHorizontal) {
return (0, _react.useCallback)(function () {
if (!dropRef.current) return;
styles.forEach(function (position) {
return dropRef.current.style[position] = "";
});
var targetRect = target.getBoundingClientRect();
var dropRect = dropRef.current.getBoundingClientRect();
var width = getWidth(stretch, targetRect, dropRect);
dropRect.width = width;
var animate = function animate() {
var x = _getXPosition(align, targetRect, dropRect, canHideTarget);
var y = _getYPosition(align, targetRect, dropRect, canHideTarget);
if (!dropRef.current) return;
if (!keepHorizontal || !dropRef.current.style.left) {
dropRef.current.style.left = x + "px";
}
dropRef.current.style.top = y + "px";
if (stretch) {
dropRef.current.style.width = width + "px";
}
};
requestAnimationFrame(animate);
}, [target, align, stretch]);
};