@pushchain/ui-kit
Version:
Push Chain is a true universal L1 that is 100% EVM compatible. It allows developers to deploy once and make their apps instantly compatible with users from all other L1s (Ethereum, Solana, etc) with zero on-chain code change.
69 lines • 2.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSmartModalPosition = useSmartModalPosition;
const react_1 = require("react");
const usePushWallet_1 = require("../../hooks/usePushWallet");
const constants_1 = require("../../constants");
function useSmartModalPosition(triggerId, triggerRefs, modalWidth = 450, modalHeight = 675, uid) {
const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
const { isWalletMinimised, universalAccount, config } = (0, usePushWallet_1.usePushWalletContext)(uid);
(0, react_1.useEffect)(() => {
const calculatePosition = () => {
if (!triggerId || !triggerRefs.current[triggerId])
return;
const triggerRef = triggerRefs.current[triggerId];
if (config.modal?.connectedLayout === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL) {
setPosition({ top: 0, left: 0 });
return;
}
const triggerRect = triggerRef.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
const spaceBelow = viewportHeight - triggerRect.bottom;
const spaceAbove = triggerRect.top;
const spaceRight = viewportWidth - triggerRect.right;
const spaceLeft = triggerRect.left;
let top;
let left;
if (spaceBelow >= modalHeight) {
top = triggerRect.bottom;
}
else if (spaceAbove >= modalHeight) {
top = triggerRect.top - modalHeight;
}
else {
top = Math.max(viewportHeight - modalHeight, 0) / 2;
}
// Horizontal
if ((spaceRight + triggerRect.width) >= modalWidth) {
left = triggerRect.left - 35;
}
else if (spaceLeft >= modalWidth) {
left = triggerRect.right - modalWidth + 35;
}
else {
left = Math.max(viewportWidth - modalWidth, 0) / 2;
}
setPosition({ top, left });
};
if (!isWalletMinimised && universalAccount) {
document.body.style.overflow = 'hidden';
}
else {
document.body.style.overflow = '';
}
calculatePosition();
window.addEventListener('resize', calculatePosition);
return () => {
window.removeEventListener('resize', calculatePosition);
document.body.style.overflow = '';
};
}, [triggerId, triggerRefs, modalWidth, modalHeight, isWalletMinimised, config, uid]);
(0, react_1.useEffect)(() => {
if (!universalAccount) {
setPosition({ top: 0, left: 0 });
}
}, [universalAccount]);
return position;
}
//# sourceMappingURL=useSmartModalPosition.js.map