Differential D7011 Diff 23562 native/chat/reaction-message-utils.js

Changeset View

Standalone View

native/chat/reaction-message-utils.js

	Show First 20 Lines • Show All 113 Lines • ▼ Show 20 Lines
	}			}

	type ReactionSelectionPopoverPositionArgs = {			type ReactionSelectionPopoverPositionArgs = {
	+initialCoordinates: LayoutCoordinates,			+initialCoordinates: LayoutCoordinates,
	+verticalBounds: VerticalBounds,			+verticalBounds: VerticalBounds,
	+margin: ?number,			+margin: ?number,
	};			};

				type ReactionSelectionPopoverPosition = {
				+containerStyle: ViewStyle,
				+popoverLocation: 'above' \| 'below',
				};
	function useReactionSelectionPopoverPosition({			function useReactionSelectionPopoverPosition({
	initialCoordinates,			initialCoordinates,
	verticalBounds,			verticalBounds,
	margin,			margin,
	}: ReactionSelectionPopoverPositionArgs): ViewStyle {			}: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition {
	const reactionSelectionPopoverHeight = 56;			const reactionSelectionPopoverHeight = 56;

	const calculatedMargin = margin ?? 16;			const calculatedMargin = margin ?? 16;

	const windowWidth = useSelector(state => state.dimensions.width);			const windowWidth = useSelector(state => state.dimensions.width);

	const reactionSelectionPopoverLocation: 'above' \| 'below' = (() => {			const popoverLocation: 'above' \| 'below' = (() => {
	const { y, height } = initialCoordinates;			const { y, height } = initialCoordinates;
	const contentTop = y;			const contentTop = y;
	const contentBottom = y + height;			const contentBottom = y + height;
	const boundsTop = verticalBounds.y;			const boundsTop = verticalBounds.y;
	const boundsBottom = verticalBounds.y + verticalBounds.height;			const boundsBottom = verticalBounds.y + verticalBounds.height;

	const fullHeight = reactionSelectionPopoverHeight + calculatedMargin;			const fullHeight = reactionSelectionPopoverHeight + calculatedMargin;

	if (			if (
	contentBottom + fullHeight > boundsBottom &&			contentBottom + fullHeight > boundsBottom &&
	contentTop - fullHeight > boundsTop			contentTop - fullHeight > boundsTop
	) {			) {
	return 'above';			return 'above';
	}			}

	return 'below';			return 'below';
	})();			})();

	return React.useMemo(() => {			const containerStyle = React.useMemo(() => {
	const { x, width, height } = initialCoordinates;			const { x, width, height } = initialCoordinates;

	const style = {};			const style = {};

	style.position = 'absolute';			style.position = 'absolute';

	const extraLeftSpace = x;			const extraLeftSpace = x;
	const extraRightSpace = windowWidth - width - x;			const extraRightSpace = windowWidth - width - x;
	if (extraLeftSpace < extraRightSpace) {			if (extraLeftSpace < extraRightSpace) {
	style.left = 0;			style.left = 0;
	} else {			} else {
	style.right = 0;			style.right = 0;
	}			}

	if (reactionSelectionPopoverLocation === 'above') {			if (popoverLocation === 'above') {
	style.bottom = height + calculatedMargin / 2;			style.bottom = height + calculatedMargin / 2;
	} else {			} else {
	style.top = height + calculatedMargin / 2;			style.top = height + calculatedMargin / 2;
	}			}

	return style;			return style;
	}, [			}, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]);
	calculatedMargin,			return React.useMemo(
	initialCoordinates,			() => ({
	reactionSelectionPopoverLocation,			popoverLocation,
	windowWidth,			containerStyle,
	]);			}),
				[popoverLocation, containerStyle],
				);
	}			}

	export { useSendReaction, useReactionSelectionPopoverPosition };			export { useSendReaction, useReactionSelectionPopoverPosition };