@syncfusion/react-popups
Version:
A package of Pure React popup components such as Tooltip that is used to display information or messages in separate pop-ups.
36 lines (35 loc) • 2.38 kB
JavaScript
export const calculatePosition = (elementRef, positionX, positionY, targetValues) => {
if (!elementRef || elementRef === null) {
return { left: 0, top: 0 };
}
const currentElement = elementRef;
const parentDocument = currentElement.ownerDocument;
const elementRect = currentElement.getBoundingClientRect() || targetValues;
const fixedElement = getComputedStyle(currentElement).position === 'fixed';
const scrollTop = fixedElement ? 0 : parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;
const scrollLeft = fixedElement ? 0 : parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;
const positionMap = {
'topcenter': { left: elementRect.left + elementRect.width / 2, top: elementRect.top + scrollTop },
'topright': { left: elementRect.right, top: elementRect.top + scrollTop },
'centercenter': { left: elementRect.left + elementRect.width / 2, top: elementRect.top + elementRect.height / 2 + scrollTop },
'centerright': { left: elementRect.right, top: elementRect.top + elementRect.height / 2 + scrollTop },
'centerleft': { left: elementRect.left + scrollLeft, top: elementRect.top + elementRect.height / 2 + scrollTop },
'bottomcenter': { left: elementRect.left + elementRect.width / 2, top: elementRect.bottom + scrollTop },
'bottomright': { left: elementRect.right, top: elementRect.bottom + scrollTop },
'bottomleft': { left: elementRect.left + scrollLeft, top: elementRect.bottom + scrollTop },
'topleft': { left: elementRect.left + scrollLeft, top: elementRect.top + scrollTop }
};
return positionMap[`${positionY.toLowerCase()}${positionX.toLowerCase()}`] || positionMap['topleft'];
};
export const calculateRelativeBasedPosition = (anchor, element) => {
if (anchor === null || element === null) {
return { left: 0, top: 0 };
}
const anchorRect = anchor.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const fixedElement = getComputedStyle(element).position === 'fixed';
return {
left: anchorRect.left - elementRect.left + (fixedElement ? 0 : window.pageXOffset || document.documentElement.scrollLeft),
top: anchorRect.top - elementRect.top + (fixedElement ? 0 : window.pageYOffset || document.documentElement.scrollTop)
};
};