Page MenuHomePhabricator
Files F3496855

D6632.diff
No OneTemporary
Actions

D6632.diff
View Options

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,
};

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 3:55 PM (18 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2682010
Default Alt Text
D6632.diff (3 KB)

Event Timeline