Page MenuHomePhorge
Files F32619710

D7014.1767463498.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D7014.1767463498.diff
View Options

diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js
--- a/native/chat/reaction-message-utils.js
+++ b/native/chat/reaction-message-utils.js
@@ -145,7 +145,8 @@
const boundsTop = verticalBounds.y;
const boundsBottom = verticalBounds.y + verticalBounds.height;
- const fullHeight = reactionSelectionPopoverHeight + calculatedMargin;
+ const fullHeight =
+ reactionSelectionPopoverDimensions.height + calculatedMargin;
if (
contentBottom + fullHeight > boundsBottom &&
@@ -193,11 +194,14 @@
return margin ?? 16;
}
-const reactionSelectionPopoverHeight = 56;
+const reactionSelectionPopoverDimensions = {
+ height: 56,
+ width: 316,
+};
export {
useSendReaction,
useReactionSelectionPopoverPosition,
getCalculatedMargin,
- reactionSelectionPopoverHeight,
+ reactionSelectionPopoverDimensions,
};
diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js
--- a/native/chat/reaction-selection-popover.react.js
+++ b/native/chat/reaction-selection-popover.react.js
@@ -8,12 +8,13 @@
import {
useReactionSelectionPopoverPosition,
getCalculatedMargin,
- reactionSelectionPopoverHeight,
+ reactionSelectionPopoverDimensions,
} from './reaction-message-utils.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import type { TooltipModalParamList } from '../navigation/route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
import type { TooltipRoute } from '../tooltip/tooltip.react.js';
@@ -27,7 +28,7 @@
};
/* eslint-disable import/no-named-as-default-member */
-const { Extrapolate, interpolateNode } = Animated;
+const { Extrapolate, interpolateNode, add, multiply } = Animated;
/* eslint-enable import/no-named-as-default-member */
function ReactionSelectionPopover<RouteName: $Keys<TooltipModalParamList>>(
@@ -50,6 +51,24 @@
);
const { position } = overlayContext;
+ const dimensions = useSelector(state => state.dimensions);
+
+ const popoverHorizontalOffset = React.useMemo(() => {
+ const { x, width } = initialCoordinates;
+
+ const extraLeftSpace = x;
+ const extraRightSpace = dimensions.width - width - x;
+
+ const popoverWidth = reactionSelectionPopoverDimensions.width;
+ if (extraLeftSpace < extraRightSpace) {
+ const minWidth = width + 2 * extraLeftSpace;
+ return (minWidth - popoverWidth) / 2;
+ } else {
+ const minWidth = width + 2 * extraRightSpace;
+ return (popoverWidth - minWidth) / 2;
+ }
+ }, [initialCoordinates, dimensions]);
+
const calculatedMargin = getCalculatedMargin(margin);
const animationStyle = React.useMemo(() => {
const style = {};
@@ -66,13 +85,19 @@
extrapolate: Extrapolate.CLAMP,
}),
},
+ {
+ translateX: multiply(
+ add(1, multiply(-1, position)),
+ popoverHorizontalOffset,
+ ),
+ },
];
if (popoverLocation === 'above') {
style.transform.push({
translateY: interpolateNode(position, {
inputRange: [0, 1],
outputRange: [
- calculatedMargin + reactionSelectionPopoverHeight / 2,
+ calculatedMargin + reactionSelectionPopoverDimensions.height / 2,
0,
],
extrapolate: Extrapolate.CLAMP,
@@ -83,7 +108,7 @@
translateY: interpolateNode(position, {
inputRange: [0, 1],
outputRange: [
- -calculatedMargin - reactionSelectionPopoverHeight / 2,
+ -calculatedMargin - reactionSelectionPopoverDimensions.height / 2,
0,
],
extrapolate: Extrapolate.CLAMP,
@@ -91,7 +116,7 @@
});
}
return style;
- }, [position, calculatedMargin, popoverLocation]);
+ }, [position, calculatedMargin, popoverLocation, popoverHorizontalOffset]);
const styles = useStyles(unboundStyles);

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 3, 6:04 PM (9 h, 50 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5890086
Default Alt Text
D7014.1767463498.diff (4 KB)

Event Timeline