@syncfusion/react-popups
Version:
Syncfusion React popup package is a feature-rich collection of UI components such as Dialog and Tooltip, used to display contextual information or messages in separate pop-ups.
49 lines (48 loc) • 2.72 kB
JavaScript
import { getElementReact } from './collision';
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 = getElementReact(currentElement) || targetValues;
const fixedElement = getComputedStyle(currentElement).position === 'fixed';
const scrollTop = fixedElement ? 0 : parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop || 0;
const scrollLeft = fixedElement ? 0 : parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft || 0;
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) => {
const anchorPos = { left: 0, top: 0 };
if (!anchor || !element) {
return anchorPos;
}
let fixedElement = false;
if (!element.offsetParent && getComputedStyle(element)?.position === 'fixed') {
fixedElement = true;
}
const originalAnchor = anchor;
let current = anchor;
while ((element.offsetParent || fixedElement) && current && element.offsetParent !== current) {
anchorPos.left += current.offsetLeft;
anchorPos.top += current.offsetTop;
current = current.offsetParent;
}
current = originalAnchor;
while ((element.offsetParent || fixedElement) && current && element.offsetParent !== current) {
anchorPos.left -= current.scrollLeft;
anchorPos.top -= current.scrollTop;
current = current.parentElement;
}
return anchorPos;
};