danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Message Context Menu: Fix flickering (#1646)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-21 17:29:32 +01:00
parent fc0365d5b9
commit 8f1b32cdb4
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/middle/message/MessageContextMenu.tsx
View File

@ -11,6 +11,7 @@ import useContextMenuPosition from '../../../hooks/useContextMenuPosition';
import useLang from '../../../hooks/useLang';
import buildClassName from '../../../util/buildClassName';
import useFlag from '../../../hooks/useFlag';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
import Menu from '../../ui/Menu';
import MenuItem from '../../ui/MenuItem';
@ -159,6 +160,13 @@ const MessageContextMenu: FC<OwnProps> = ({
}, ANIMATION_DURATION);
}, [isOpen, markIsReady, unmarkIsReady]);
const extraHeightAudioPlayer = (IS_SINGLE_COLUMN_LAYOUT
&& (document.querySelector<HTMLElement>('.AudioPlayer-content'))?.offsetHeight) || 0;
const pinnedElement = document.querySelector<HTMLElement>('.HeaderPinnedMessage-wrapper');
const extraHeightPinned = (((IS_SINGLE_COLUMN_LAYOUT && !extraHeightAudioPlayer)
|| (!IS_SINGLE_COLUMN_LAYOUT && pinnedElement?.classList.contains('full-width')))
&& pinnedElement?.offsetHeight) || 0;
const {
positionX, positionY, style, menuStyle, withScroll,
} = useContextMenuPosition(
@ -167,8 +175,9 @@ const MessageContextMenu: FC<OwnProps> = ({
getRootElement,
getMenuElement,
SCROLLBAR_WIDTH,
(document.querySelector('.MiddleHeader') as HTMLElement).offsetHeight,
(document.querySelector<HTMLElement>('.MiddleHeader')!).offsetHeight,
withReactions ? REACTION_BUBBLE_EXTRA_WIDTH : undefined,
extraHeightPinned + extraHeightAudioPlayer,
);
useEffect(() => {

9
src/hooks/useContextMenuPosition.ts
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from '../lib/teact/teact';
import { useState, useLayoutEffect } from '../lib/teact/teact';
import { IAnchorPosition } from '../types';
const MENU_POSITION_VISUAL_COMFORT_SPACE_PX = 16;
@ -12,6 +12,7 @@ export default (
extraPaddingX = 0,
extraTopPadding = 0,
marginSides = 0,
extraMarginTop = 0,
) => {
const [positionX, setPositionX] = useState<'right' | 'left'>('right');
const [positionY, setPositionY] = useState<'top' | 'bottom'>('bottom');
@ -19,7 +20,7 @@ export default (
const [style, setStyle] = useState('');
const [menuStyle, setMenuStyle] = useState('');
useEffect(() => {
useLayoutEffect(() => {
const triggerEl = getTriggerElement();
if (!anchor || !triggerEl) {
return;
@ -35,7 +36,7 @@ export default (
const triggerRect = triggerEl.getBoundingClientRect();
const marginTop = menuEl ? parseInt(getComputedStyle(menuEl).marginTop, 10) : undefined;
const marginTop = menuEl ? parseInt(getComputedStyle(menuEl).marginTop, 10) + extraMarginTop : undefined;
const menuRect = menuEl ? {
width: menuEl.offsetWidth,
@ -93,7 +94,7 @@ export default (
setMenuStyle(`max-height: ${menuMaxHeight}px;`);
setStyle(`left: ${left}px; top: ${top}px`);
}, [
anchor, extraPaddingX, extraTopPadding,
anchor, extraPaddingX, extraTopPadding, extraMarginTop,
getMenuElement, getRootElement, getTriggerElement, marginSides,
]);