diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js --- a/web/chat/reaction-message-utils.js +++ b/web/chat/reaction-message-utils.js @@ -18,6 +18,11 @@ import Alert from '../modals/alert.react.js'; import { useSelector } from '../redux/redux-utils.js'; +import { + type TooltipSize, + type TooltipPositionStyle, +} from '../utils/tooltip-utils.js'; +import { getAppContainerPositionInfo } from '../utils/window-utils.js'; function useSendReaction( messageID: ?string, @@ -101,4 +106,104 @@ ); } -export { useSendReaction }; +type EmojiKeyboardPosition = { + +bottom: number, + +left: number, +}; + +function getEmojiKeyboardPosition( + emojiKeyboard: ?HTMLDivElement, + tooltipPositionStyle: TooltipPositionStyle, + tooltipSize: TooltipSize, +): ?EmojiKeyboardPosition { + const { alignment, anchorPoint } = tooltipPositionStyle; + const tooltipAnchorX = anchorPoint.x; + const tooltipAnchorY = anchorPoint.y; + + const tooltipWidth = tooltipSize.width; + const tooltipHeight = tooltipSize.height; + + const appContainerPositionInfo = getAppContainerPositionInfo(); + + if (!appContainerPositionInfo) { + return null; + } + + let emojiKeyboardWidth = 352; + let emojiKeyboardHeight = 435; + + if (emojiKeyboard) { + const { width, height } = emojiKeyboard.getBoundingClientRect(); + emojiKeyboardWidth = width; + emojiKeyboardHeight = height; + } + + const { + top: containerTop, + left: containerLeft, + right: containerRight, + bottom: containerBottom, + } = appContainerPositionInfo; + + const padding = 16; + + const canBeDisplayedOnRight = + tooltipAnchorX + tooltipWidth + emojiKeyboardWidth <= containerRight; + + const canBeDisplayedOnLeft = + tooltipAnchorX - emojiKeyboardWidth >= containerLeft; + + const canBeDisplayedOnTop = + tooltipAnchorY - emojiKeyboardHeight - padding >= containerTop; + + const canBeDisplayedOnBottom = + tooltipAnchorY + tooltipHeight + emojiKeyboardHeight + padding <= + containerBottom; + + const emojiKeyboardOverflowTop = + containerTop - (tooltipAnchorY + tooltipHeight - emojiKeyboardHeight); + + const emojiKeyboardOverflowTopCorrection = + emojiKeyboardOverflowTop > 0 ? -emojiKeyboardOverflowTop - padding : 0; + + const emojiKeyboardOverflowRight = + tooltipAnchorX + emojiKeyboardWidth - containerRight; + + const emojiKeyboardOverflowRightCorrection = + emojiKeyboardOverflowRight > 0 ? -emojiKeyboardOverflowRight - padding : 0; + + if (alignment === 'left' && canBeDisplayedOnRight) { + return { + left: tooltipWidth, + bottom: emojiKeyboardOverflowTopCorrection, + }; + } + + if (alignment === 'right' && canBeDisplayedOnLeft) { + return { + left: -emojiKeyboardWidth, + bottom: emojiKeyboardOverflowTopCorrection, + }; + } + + if (canBeDisplayedOnTop) { + return { + bottom: tooltipHeight + padding, + left: emojiKeyboardOverflowRightCorrection, + }; + } + + if (canBeDisplayedOnBottom) { + return { + bottom: -emojiKeyboardHeight - padding, + left: emojiKeyboardOverflowRightCorrection, + }; + } + + return { + left: alignment === 'left' ? -emojiKeyboardWidth : tooltipWidth, + bottom: emojiKeyboardOverflowTopCorrection, + }; +} + +export { useSendReaction, getEmojiKeyboardPosition }; diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/utils/tooltip-utils.js @@ -47,7 +47,7 @@ BOTTOM: 'bottom', }); -type TooltipSize = { +export type TooltipSize = { +height: number, +width: number, };