Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

fix(experience): fix the organization selector position (#5315)

Browse source 
fix the organization selector position
This commit is contained in:
simeng-li 2024-01-29 10:19:18 +08:00 • committed by GitHub
parent 47158e857c
commit 2e31b976ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/experience/src/pages/Consent/OrganizationSelector/OrganizationSelectorModal/index.tsx
View file

@ -31,26 +31,38 @@ const OrganizationSelectorModal = ({
const updatePosition = useCallback(() => {
const parent = parentElementRef.current;
if (!parent || isMobile) {
if (!parent || isMobile || !isOpen) {
setPosition({});
return;
}
const offset = 8;
const { top, left, height, width } = parent.getBoundingClientRect();
setPosition({ top: top + height + offset, left, width });
}, [isMobile, parentElementRef]);
// Offset the modal from the parent element
const offset = 8;
// The height of each organization item
const organizationItemHeight = 40;
// The padding around the modal content
const organizationModalPadding = 8;
// Calculate the max top position so that the modal doesn't go off the screen
const modalContentHeight =
organizations.length * organizationItemHeight + organizationModalPadding * 2;
const windowHeight = window.innerHeight;
const maxTop = windowHeight - modalContentHeight;
setPosition({ top: Math.min(top + height + offset, maxTop), left, width });
}, [isMobile, isOpen, organizations.length, parentElementRef]);
useLayoutEffect(() => {
updatePosition();
window.addEventListener('resize', updatePosition);
window.addEventListener('scroll', updatePosition);
return () => {
window.removeEventListener('resize', updatePosition);
window.removeEventListener('scroll', updatePosition);
};
}, [updatePosition]);
}, [updatePosition, isOpen]);
return (
<ReactModal