Page MenuHomePhabricator
Files F3398949

D5557.id18212.diff
No OneTemporary
Actions

D5557.id18212.diff
View Options

diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js
--- a/native/navigation/tooltip.react.js
+++ b/native/navigation/tooltip.react.js
@@ -16,7 +16,7 @@
TouchableOpacity,
Keyboard,
} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
import { useDispatch } from 'react-redux';
import {
@@ -117,8 +117,8 @@
+inputState: ?InputState,
+chatContext: ?ChatContextType,
+showActionSheetWithOptions: ShowActionSheetWithOptions,
- +actionSheetShown: boolean,
- +setActionSheetShown: (actionSheetShown: boolean) => void,
+ +hideTooltip: boolean,
+ +setHideTooltip: (actionSheetShown: boolean) => void,
};
function createTooltip<
@@ -324,7 +324,10 @@
style.position = 'absolute';
(style.alignItems = 'center'),
(style.opacity = this.tooltipContainerOpacity);
- style.transform = [{ translateX: this.tooltipHorizontal }];
+
+ if (location !== 'fixed') {
+ style.transform = [{ translateX: this.tooltipHorizontal }];
+ }
const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;
@@ -361,7 +364,9 @@
style.transform.push({ translateY: this.tooltipVerticalBelow });
}
- style.transform.push({ scale: this.tooltipScale });
+ if (location !== 'fixed') {
+ style.transform.push({ scale: this.tooltipScale });
+ }
return style;
}
@@ -377,8 +382,8 @@
inputState,
chatContext,
showActionSheetWithOptions,
- actionSheetShown,
- setActionSheetShown,
+ hideTooltip,
+ setHideTooltip,
...navAndRouteForFlow
} = this.props;
@@ -467,12 +472,34 @@
const itemsStyle = [styles.items];
+ let tooltip = (
+ <AnimatedView
+ style={this.tooltipContainerStyle}
+ onLayout={this.onTooltipContainerLayout}
+ >
+ {triangleUp}
+ <View style={itemsStyle}>{items}</View>
+ {triangleDown}
+ </AnimatedView>
+ );
+
if (this.location === 'fixed') {
itemsStyle.push(styles.itemsFixed);
+
+ const animationDelay = Platform.OS === 'ios' ? 200 : 500;
+
+ tooltip = (
+ <AnimatedView
+ style={this.tooltipContainerStyle}
+ entering={SlideInDown.delay(animationDelay)}
+ exiting={SlideOutDown}
+ >
+ <View style={itemsStyle}>{items}</View>
+ </AnimatedView>
+ );
}
- let tooltip = <View style={itemsStyle}>{items}</View>;
- if (this.props.actionSheetShown) {
+ if (this.props.hideTooltip) {
tooltip = null;
}
@@ -485,21 +512,22 @@
<ButtonComponent {...buttonProps} />
</View>
</View>
- <AnimatedView
- style={this.tooltipContainerStyle}
- onLayout={this.onTooltipContainerLayout}
- >
- {triangleUp}
- {tooltip}
- {triangleDown}
- </AnimatedView>
+ {tooltip}
</View>
</TouchableWithoutFeedback>
);
}
onPressBackdrop = () => {
- this.props.navigation.goBackOnce();
+ if (this.location !== 'fixed') {
+ this.props.navigation.goBackOnce();
+ } else {
+ this.props.setHideTooltip(true);
+
+ setTimeout(() => {
+ this.props.navigation.goBackOnce();
+ }, 100);
+ }
};
onPressEntry = (entry: TooltipEntry<RouteName>) => {
@@ -521,7 +549,7 @@
onPressMore = () => {
Keyboard.dismiss();
- this.props.setActionSheetShown(true);
+ this.props.setHideTooltip(true);
const { entries } = this;
const options = entries.map(entry => entry.text);
@@ -651,9 +679,7 @@
const inputState = React.useContext(InputStateContext);
const chatContext = React.useContext(ChatContext);
- const [actionSheetShown, setActionSheetShown] = React.useState<boolean>(
- false,
- );
+ const [hideTooltip, setHideTooltip] = React.useState<boolean>(false);
return (
<Tooltip
@@ -667,8 +693,8 @@
inputState={inputState}
chatContext={chatContext}
showActionSheetWithOptions={showActionSheetWithOptions}
- actionSheetShown={actionSheetShown}
- setActionSheetShown={setActionSheetShown}
+ hideTooltip={hideTooltip}
+ setHideTooltip={setHideTooltip}
/>
);
});
diff --git a/native/types/styles.js b/native/types/styles.js
--- a/native/types/styles.js
+++ b/native/types/styles.js
@@ -2,7 +2,10 @@
import * as React from 'react';
import { View, Text, Image } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {
+ type ReanimatedAnimationBuilder,
+ type EntryExitAnimationFunction,
+} from 'react-native-reanimated';
type ViewProps = React.ElementConfig<typeof View>;
export type ViewStyle = $PropertyType<ViewProps, 'style'>;
@@ -30,6 +33,11 @@
const AnimatedView: React.ComponentType<{
...$Diff<ViewProps, { style: ViewStyle }>,
+style: AnimatedViewStyle,
+ +entering?:
+ | ReanimatedAnimationBuilder
+ | EntryExitAnimationFunction
+ | Keyframe,
+ +exiting?: ReanimatedAnimationBuilder | EntryExitAnimationFunction | Keyframe,
}> = Animated.View;
export type AnimatedTextStyle =

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 1:09 AM (21 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2609593
Default Alt Text
D5557.id18212.diff (5 KB)

Event Timeline