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