Differential D6632 Diff 23361 web/chat/reaction-message-utils.js

Changeset View

Standalone View

web/chat/reaction-message-utils.js

Show All 12 Lines
import {		import {
useDispatchActionPromise,		useDispatchActionPromise,
useServerCall,		useServerCall,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';
import { cloneError } from 'lib/utils/errors.js';		import { cloneError } from 'lib/utils/errors.js';

import Alert from '../modals/alert.react.js';		import Alert from '../modals/alert.react.js';
import { useSelector } from '../redux/redux-utils.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(		function useSendReaction(
messageID: ?string,		messageID: ?string,
localID: string,		localID: string,
threadID: string,		threadID: string,
): (reaction: string, action: 'add_reaction' \| 'remove_reaction') => mixed {		): (reaction: string, action: 'add_reaction' \| 'remove_reaction') => mixed {
const { pushModal } = useModalContext();		const { pushModal } = useModalContext();

▲ Show 20 Lines • Show All 67 Lines • ▼ Show 20 Lines	[
localID,		localID,
dispatchActionPromise,		dispatchActionPromise,
callSendReactionMessage,		callSendReactionMessage,
pushModal,		pushModal,
],		],
);		);
}		}

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