@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
122 lines (121 loc) • 6.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.calculatePosition = void 0;
const types_1 = require("../types");
const dom_1 = require("./dom");
/**
* Calculated fixed box position and size.
*/
const calculatePosition = (triggerEl, boxEl, e, position, maxWidth, minWidth, space, isOverflowPrevented) => {
if (!boxEl) {
return;
}
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const triggerRect = Object.assign(Object.assign({}, triggerEl.getBoundingClientRect()), (0, dom_1.calculateShownPart)(triggerEl));
if (triggerRect.width <= 0 || triggerRect.height <= 0) {
boxEl.setAttribute('style', 'pointer-events: none; visibility: hidden;');
return;
}
boxEl.removeAttribute('style');
let width = Math.max(boxEl.offsetWidth + .5, position & (types_1.Position.TOP | types_1.Position.BOTTOM) ? triggerEl.offsetWidth : 0);
if (minWidth && minWidth > width) {
width = minWidth;
}
if (maxWidth && maxWidth < width) {
width = maxWidth;
}
boxEl.style.width = `${width}px`;
boxEl.setAttribute('style', position & (types_1.Position.LEFT | types_1.Position.RIGHT)
? calculatePositionBasedOnXAxis(triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented)
: calculatePositionBasedOnYAxis(triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented));
};
exports.calculatePosition = calculatePosition;
/**
* Calculates fixed box position and sized based on X axis position.
*/
const calculatePositionBasedOnXAxis = (triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
// left & width
let left;
const width = boxEl.offsetWidth + .5;
const triggerLeft = (_d = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = e === null || e === void 0 ? void 0 : e.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageX) !== null && _d !== void 0 ? _d : triggerRect.left;
const triggerWidth = e ? 0 : triggerRect.width;
const diffLeft = triggerRect.left - (space + width);
const diffRight = windowWidth - (triggerLeft + triggerWidth + space + width);
if ((position === types_1.Position.LEFT && (diffLeft >= 0 || diffLeft >= diffRight))
|| (position === types_1.Position.RIGHT && diffRight < 0 && diffLeft > diffRight)) {
left = diffLeft;
}
else {
left = triggerLeft + triggerWidth + space;
}
if (isOverflowPrevented) {
left = Math.max(0, Math.min(windowWidth - width, left));
}
// top & height
let top;
let height = boxEl.offsetHeight;
const triggerTop = (_h = (_e = e === null || e === void 0 ? void 0 : e.clientY) !== null && _e !== void 0 ? _e : (_g = (_f = e === null || e === void 0 ? void 0 : e.touches) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.pageY) !== null && _h !== void 0 ? _h : triggerRect.top;
const triggerHeight = e ? 0 : triggerRect.height + triggerRect.top <= windowHeight ? triggerRect.height : (windowHeight - triggerRect.top);
const diffBottom = windowHeight - (triggerRect.top + height);
const diffTop = (triggerRect.top + triggerHeight) - height;
if (diffBottom >= 0 || diffBottom >= diffTop) {
height = diffBottom > 0 ? height : windowHeight - (triggerTop + height);
top = triggerTop;
}
else {
height = height + Math.min(diffTop, 0);
top = (height > triggerHeight) ? ((triggerTop + triggerHeight) - height) : triggerTop;
}
return `
left: ${left}px;
top: ${top}px;
width: ${width}px;
height: ${height}px;
`;
};
/**
* Calculates fixed box position and sized based on Y axis position.
*/
const calculatePositionBasedOnYAxis = (triggerRect, boxEl, e, position, space, windowWidth, windowHeight, isOverflowPrevented) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
// left & width
let left;
const width = boxEl.offsetWidth + .5;
const triggerLeft = (_d = (_a = e === null || e === void 0 ? void 0 : e.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = e === null || e === void 0 ? void 0 : e.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.pageX) !== null && _d !== void 0 ? _d : triggerRect.left;
const triggerWidth = e ? 0 : triggerRect.width;
const diffLeft = windowWidth - (triggerLeft + width);
const diffRight = triggerLeft - width;
if (diffLeft >= 0 || diffLeft >= diffRight) {
left = triggerLeft;
}
else {
left = triggerLeft + triggerWidth - width;
}
if (isOverflowPrevented) {
left = Math.max(0, Math.min(windowWidth - width, left));
}
// top & height
let top;
let height = boxEl.offsetHeight;
const triggerTop = (_h = (_e = e === null || e === void 0 ? void 0 : e.clientY) !== null && _e !== void 0 ? _e : (_g = (_f = e === null || e === void 0 ? void 0 : e.touches) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.pageY) !== null && _h !== void 0 ? _h : triggerRect.top;
const triggerHeight = e ? 0 : triggerRect.height;
const diffBottom = windowHeight - (triggerTop + triggerHeight + height + space);
const diffTop = (triggerTop + triggerHeight) - (height + 1);
if ((position === types_1.Position.BOTTOM && (diffBottom >= 0 || diffBottom >= diffTop))
|| (position === types_1.Position.TOP && diffTop < 0 && diffBottom > diffTop)) {
height = diffBottom > 0 ? height : (windowHeight - (triggerTop + triggerHeight + space));
top = triggerTop + triggerHeight + space;
}
else {
height = diffTop > 0 ? height : triggerRect.top;
top = (triggerTop + triggerHeight) - (height + 1);
}
return `
left: ${left}px;
top: ${top}px;
width: ${width}px;
height: ${height}px;
`;
};