@pushchain/ui-kit
Version:
## Overview
58 lines • 2.65 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(triggerRef, 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 = () => {
var _a;
if (!triggerRef.current)
return;
if (((_a = config.modal) === null || _a === void 0 ? void 0 : _a.connectedLayout) === constants_1.PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL) {
setPosition({ top: 0, left: 0 });
return;
}
const triggerRect = triggerRef.current.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
const spaceBelow = viewportHeight - triggerRect.bottom;
const spaceAbove = triggerRect.top;
const spaceRight = viewportWidth - triggerRect.left;
const spaceLeft = triggerRect.right;
const top = spaceBelow >= modalHeight
? triggerRect.bottom - 16
: spaceAbove >= modalHeight
? triggerRect.top - modalHeight + 16
: Math.max(viewportHeight - modalHeight, 0);
const left = spaceRight >= modalWidth
? triggerRect.left - 35
: spaceLeft >= modalWidth
? triggerRect.right - modalWidth + 35
: Math.max(viewportWidth - modalWidth, 0);
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 = '';
};
}, [triggerRef, modalWidth, modalHeight, isWalletMinimised, config]);
(0, react_1.useEffect)(() => {
if (!universalAccount) {
setPosition({ top: 0, left: 0 });
}
}, [universalAccount]);
return position;
}
//# sourceMappingURL=useSmartModalPosition.js.map