design-system-simplefi
Version:
Design System for SimpleFi Applications
47 lines • 2.02 kB
JavaScript
// Inspired by David Gilbertson (https://codepen.io/davidgilbertson/pen/ooXVyw)
import { useCallback } from 'react';
export var useCalculatePortaPlacement = function (_a, _b) {
var current = _a.current;
var placement = _b.placement, _c = _b.width, width = _c === void 0 ? 270 : _c, _d = _b.space, space = _d === void 0 ? 5 : _d;
return useCallback(function () {
var style = { width: width, space: space };
if (current === null)
return style;
var dimensions = current.getBoundingClientRect();
var scrollTop = dimensions.top + window.pageYOffset;
var scrollBottom = dimensions.bottom + window.pageYOffset;
var scrollLeft = dimensions.left + window.pageXOffset;
var scrollRight = dimensions.right + window.pageXOffset;
if (placement === 'bottom' || placement === 'top') {
style.left = scrollLeft + dimensions.width / 2 - style.width / 2;
}
if (placement === 'left' || placement === 'right') {
style.bottom = window.innerHeight - scrollTop - dimensions.height / 2;
}
switch (placement) {
case 'bottom-left':
style.left = scrollLeft;
style.top = scrollBottom + space;
break;
case 'bottom-right':
style.left = scrollRight - width;
style.top = scrollBottom + space;
break;
case 'left':
style.right = window.innerWidth - scrollLeft + space;
break;
case 'right':
style.left = scrollRight + space;
break;
case 'top':
style.bottom = window.innerHeight - scrollTop + space;
break;
case 'bottom':
default:
style.top = scrollBottom + space;
break;
}
return style;
}, [current, placement, width, space]);
};
//# sourceMappingURL=useCalculatePortalPlacement.js.map