Page MenuHomePhabricator
Files F3355448

D7012.diff
No OneTemporary
Actions

D7012.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
@@ -22,7 +22,6 @@
LayoutCoordinates,
VerticalBounds,
} from '../types/layout-types.js';
-import type { ViewStyle } from '../types/styles.js';
function useSendReaction(
messageID: ?string,
@@ -120,7 +119,14 @@
};
type ReactionSelectionPopoverPosition = {
- +containerStyle: ViewStyle,
+ +containerStyle: {
+ +position: 'absolute',
+ +left?: number,
+ +right?: number,
+ +bottom?: number,
+ +top?: number,
+ ...
+ },
+popoverLocation: 'above' | 'below',
};
function useReactionSelectionPopoverPosition({
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
@@ -1,15 +1,19 @@
// @flow
+import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
import { useReactionSelectionPopoverPosition } 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 { useStyles } from '../themes/colors.js';
import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
import type { TooltipRoute } from '../tooltip/tooltip.react.js';
+import { AnimatedView } from '../types/styles.js';
type Props<RouteName: $Keys<TooltipModalParamList>> = {
+navigation: AppNavigationProp<RouteName>,
@@ -18,6 +22,10 @@
+sendReaction: (reaction: string) => mixed,
};
+/* eslint-disable import/no-named-as-default-member */
+const { Extrapolate, interpolateNode } = Animated;
+/* eslint-enable import/no-named-as-default-member */
+
function ReactionSelectionPopover<RouteName: $Keys<TooltipModalParamList>>(
props: Props<RouteName>,
): React.Node {
@@ -31,11 +39,46 @@
margin,
});
+ const overlayContext = React.useContext(OverlayContext);
+ invariant(
+ overlayContext,
+ 'ReactionSelectionPopover should have OverlayContext',
+ );
+ const { position } = overlayContext;
+
+ const animationStyle = React.useMemo(
+ () => ({
+ opacity: interpolateNode(position, {
+ inputRange: [0, 0.1],
+ outputRange: [0, 1],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ transform: [
+ {
+ scale: interpolateNode(position, {
+ inputRange: [0.2, 0.8],
+ outputRange: [0, 1],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ },
+ ],
+ }),
+ [position],
+ );
+
const styles = useStyles(unboundStyles);
const containerStyle = React.useMemo(
- () => [styles.reactionSelectionPopoverContainer, popoverContainerStyle],
- [popoverContainerStyle, styles.reactionSelectionPopoverContainer],
+ () => ({
+ ...styles.reactionSelectionPopoverContainer,
+ ...popoverContainerStyle,
+ ...animationStyle,
+ }),
+ [
+ popoverContainerStyle,
+ styles.reactionSelectionPopoverContainer,
+ animationStyle,
+ ],
);
const tooltipRouteKey = route.key;
@@ -74,14 +117,14 @@
]);
return (
- <View style={containerStyle}>
+ <AnimatedView style={containerStyle}>
{defaultEmojis}
<TouchableOpacity onPress={onPressEmojiKeyboardButton}>
<View style={styles.emojiKeyboardButtonContainer}>
<SWMansionIcon name="plus" style={styles.icon} size={18} />
</View>
</TouchableOpacity>
- </View>
+ </AnimatedView>
);
}
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -230,8 +230,8 @@
const style = {};
style.position = 'absolute';
- (style.alignItems = 'center'),
- (style.opacity = this.tooltipContainerOpacity);
+ style.alignItems = 'center';
+ style.opacity = this.tooltipContainerOpacity;
if (tooltipLocation !== 'fixed') {
style.transform = [{ translateX: this.tooltipHorizontal }];

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 2:32 PM (18 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2576339
Default Alt Text
D7012.diff (4 KB)

Event Timeline