Page MenuHomePhorge
Files F32569611

D5557.1767379225.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D5557.1767379225.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,11 @@
TouchableOpacity,
Keyboard,
} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {
+ SlideInDown,
+ SlideOutDown,
+ runOnJS,
+} from 'react-native-reanimated';
import { useDispatch } from 'react-redux';
import {
@@ -119,6 +123,9 @@
+showActionSheetWithOptions: ShowActionSheetWithOptions,
+actionSheetShown: boolean,
+setActionSheetShown: (actionSheetShown: boolean) => void,
+ +hideTooltip: boolean,
+ +setHideTooltip: (actionSheetShown: boolean) => void,
+ +exitAnimationWorklet: (finished: boolean) => void,
};
function createTooltip<
@@ -324,7 +331,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 +371,9 @@
style.transform.push({ translateY: this.tooltipVerticalBelow });
}
- style.transform.push({ scale: this.tooltipScale });
+ if (location !== 'fixed') {
+ style.transform.push({ scale: this.tooltipScale });
+ }
return style;
}
@@ -379,6 +391,9 @@
showActionSheetWithOptions,
actionSheetShown,
setActionSheetShown,
+ hideTooltip,
+ setHideTooltip,
+ exitAnimationWorklet,
...navAndRouteForFlow
} = this.props;
@@ -465,15 +480,36 @@
isOpeningSidebar,
};
- const itemsStyle = [styles.items];
+ const itemsStyles = [styles.items, styles.itemsFixed];
- if (this.location === 'fixed') {
- itemsStyle.push(styles.itemsFixed);
- }
+ const animationDelay = Platform.OS === 'ios' ? 200 : 500;
+ const enterAnimation = SlideInDown.delay(animationDelay);
- let tooltip = <View style={itemsStyle}>{items}</View>;
- if (this.props.actionSheetShown) {
- tooltip = null;
+ const exitAnimation = SlideOutDown.withCallback(exitAnimationWorklet);
+
+ let tooltip = null;
+
+ if (this.location !== 'fixed') {
+ tooltip = (
+ <AnimatedView
+ style={this.tooltipContainerStyle}
+ onLayout={this.onTooltipContainerLayout}
+ >
+ {triangleUp}
+ <View style={styles.items}>{items}</View>
+ {triangleDown}
+ </AnimatedView>
+ );
+ } else if (this.location === 'fixed' && !this.props.hideTooltip) {
+ tooltip = (
+ <AnimatedView
+ style={this.tooltipContainerStyle}
+ entering={enterAnimation}
+ exiting={exitAnimation}
+ >
+ <View style={itemsStyles}>{items}</View>
+ </AnimatedView>
+ );
}
return (
@@ -485,25 +521,27 @@
<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);
+ }
};
onPressEntry = (entry: TooltipEntry<RouteName>) => {
- this.props.navigation.goBackOnce();
+ if (this.location !== 'fixed' || this.props.actionSheetShown) {
+ this.props.navigation.goBackOnce();
+ } else {
+ this.props.setHideTooltip(true);
+ }
+
const dispatchFunctions = {
dispatch: this.props.dispatch,
dispatchActionPromise: this.props.dispatchActionPromise,
@@ -522,6 +560,7 @@
onPressMore = () => {
Keyboard.dismiss();
this.props.setActionSheetShown(true);
+ this.props.setHideTooltip(true);
const { entries } = this;
const options = entries.map(entry => entry.text);
@@ -654,6 +693,23 @@
const [actionSheetShown, setActionSheetShown] = React.useState<boolean>(
false,
);
+ const [hideTooltip, setHideTooltip] = React.useState<boolean>(false);
+
+ const goBackCallback = React.useCallback(() => {
+ if (!actionSheetShown) {
+ props.navigation.goBackOnce();
+ }
+ }, [actionSheetShown, props.navigation]);
+
+ const exitAnimationWorklet = React.useCallback(
+ finished => {
+ 'worklet';
+ if (finished) {
+ runOnJS(goBackCallback)();
+ }
+ },
+ [goBackCallback],
+ );
return (
<Tooltip
@@ -669,6 +725,9 @@
showActionSheetWithOptions={showActionSheetWithOptions}
actionSheetShown={actionSheetShown}
setActionSheetShown={setActionSheetShown}
+ hideTooltip={hideTooltip}
+ setHideTooltip={setHideTooltip}
+ exitAnimationWorklet={exitAnimationWorklet}
/>
);
});
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
Fri, Jan 2, 6:40 PM (7 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5881701
Default Alt Text
D5557.1767379225.diff (6 KB)

Event Timeline