Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(console): language dropdown height should be calculated properly on first load (#3763)

Browse source
This commit is contained in:
Charles Zhao 2023-04-26 10:19:07 +08:00 committed by GitHub
parent 97d0ca6d9f
commit 9a795c8ecd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/console/src/containers/AppContent/components/SubMenu/index.tsx
View file

@ -1,6 +1,6 @@
import type { AdminConsoleKey } from '@logto/phrases';
import classNames from 'classnames';
import { type ReactNode, useCallback, useEffect, useState, useRef } from 'react';
import { type ReactNode, useCallback, useState, useRef } from 'react';
import ArrowRight from '@/assets/images/arrow-right.svg';
import Tick from '@/assets/images/tick.svg';
@ -26,7 +26,7 @@ type Props<T> = {
const menuItemHeight = 40;
const menuItemMargin = 4;
const menuBorderSize = 1;
const menuBottomPadding = 16;
const menuBottomMargin = 16;
function SubMenu<T extends string>({
className,
@ -50,24 +50,12 @@ function SubMenu<T extends string>({
options.length * menuItemHeight +
(options.length + 1) * menuItemMargin +
2 * menuBorderSize;
const availableHeight = window.innerHeight - anchorRect.top - menuBottomPadding;
const availableHeight = window.innerHeight - anchorRect.top - menuBottomMargin;
setMenuHeight(Math.min(originalMenuHeight, availableHeight));
}
}, [options.length]);
useEffect(() => {
calculateDropdownHeight();
window.addEventListener('resize', calculateDropdownHeight);
window.addEventListener('scroll', calculateDropdownHeight);
return () => {
window.removeEventListener('resize', calculateDropdownHeight);
window.removeEventListener('scroll', calculateDropdownHeight);
};
}, [calculateDropdownHeight]);
return (
<div
ref={anchorRef}
@ -79,6 +67,7 @@ function SubMenu<T extends string>({
})}
onMouseEnter={() => {
window.clearTimeout(mouseLeaveTimeoutRef.current);
calculateDropdownHeight();
// eslint-disable-next-line @silverhand/fp/no-mutation
mouseEnterTimeoutRef.current = window.setTimeout(() => {
setShowMenu(true);