Page MenuHomePhorge
Files F33258612

D13072.1768593200.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D13072.1768593200.diff
View Options

diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js
--- a/native/tooltip/nux-tips-overlay.react.js
+++ b/native/tooltip/nux-tips-overlay.react.js
@@ -23,6 +23,7 @@
} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';
import { AnimatedView } from '../types/styles.js';
+import type { WritableAnimatedStyleObj } from '../types/styles.js';
const { Value } = Animated;
@@ -63,6 +64,20 @@
height: 10,
width: 10,
},
+ triangleDown: {
+ borderBottomColor: 'transparent',
+ borderBottomWidth: 0,
+ borderLeftColor: 'transparent',
+ borderLeftWidth: 10,
+ borderRightColor: 'transparent',
+ borderRightWidth: 10,
+ borderStyle: 'solid',
+ borderTopColor: 'tooltipBackground',
+ borderTopWidth: 10,
+ height: 10,
+ top: Platform.OS === 'android' ? -1 : 0,
+ width: 10,
+ },
tipText: {
color: 'panelForegroundLabel',
fontSize: 20,
@@ -73,6 +88,7 @@
export type NUXTipsOverlayParams = {
+initialCoordinates: LayoutCoordinates,
+verticalBounds: VerticalBounds,
+ +tooltipLocation: 'above' | 'below',
};
export type NUXTipsOverlayProps = {
@@ -81,7 +97,6 @@
};
const margin: number = 20;
-const tipContainerTranslateY = -80;
function opacityEnteringAnimation() {
'worklet';
@@ -159,34 +174,41 @@
[dimensions.width, initialCoordinates, tipHorizontalOffset],
);
+ const { tooltipLocation } = route.params;
+
const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;
- const top =
- Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
+ const style: WritableAnimatedStyleObj = {
+ position: 'absolute',
+ alignItems: 'center',
+ };
+
+ if (tooltipLocation === 'below') {
+ style.top =
+ Math.min(y + height, verticalBounds.y + verticalBounds.height) +
+ margin;
+ } else {
+ style.bottom =
+ dimensions.height - Math.max(y, verticalBounds.y) + margin;
+ }
const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {
- return {
- top,
- position: 'absolute',
- alignItems: 'center',
- left: 0,
- minWidth: width + 2 * extraLeftSpace,
- };
+ style.left = 0;
+ style.minWidth = width + 2 * extraLeftSpace;
} else {
- return {
- top,
- position: 'absolute',
- alignItems: 'center',
- right: 0,
- minWidth: width + 2 * extraRightSpace,
- };
+ style.right = 0;
+ style.minWidth = width + 2 * extraRightSpace;
}
+
+ return style;
}, [
+ dimensions.height,
dimensions.width,
initialCoordinates,
+ tooltipLocation,
verticalBounds.height,
verticalBounds.y,
]);
@@ -232,7 +254,10 @@
initialCoordinates.width +
initialCoordinates.x) /
2;
- const initialY = tipContainerTranslateY;
+ const initialY =
+ tooltipLocation === 'below'
+ ? -values.targetHeight / 2
+ : values.targetHeight / 2;
return {
animations: {
@@ -253,7 +278,7 @@
},
};
},
- [initialCoordinates.width, initialCoordinates.x],
+ [initialCoordinates.width, initialCoordinates.x, tooltipLocation],
);
// prettier-ignore
@@ -266,7 +291,10 @@
initialCoordinates.width +
initialCoordinates.x) /
2;
- const toValueY = tipContainerTranslateY;
+ const toValueY =
+ tooltipLocation === 'below'
+ ? -values.currentHeight / 2
+ : values.currentHeight / 2;;
return {
animations: {
@@ -291,9 +319,17 @@
},
};
},
- [initialCoordinates.width, initialCoordinates.x],
+ [initialCoordinates.width, initialCoordinates.x, tooltipLocation],
);
+ let triangleDown = null;
+ let triangleUp = null;
+ if (tooltipLocation === 'above') {
+ triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
+ } else if (tooltipLocation === 'below') {
+ triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
+ }
+
return (
<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>
@@ -317,10 +353,11 @@
entering={tipContainerEnteringAnimation}
exiting={tipContainerExitingAnimation}
>
- <View style={[styles.triangleUp, triangleStyle]} />
+ {triangleUp}
<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>
</View>
+ {triangleDown}
</AnimatedView>
</View>
</TouchableWithoutFeedback>

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 16, 7:53 PM (20 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5945806
Default Alt Text
D13072.1768593200.diff (4 KB)

Event Timeline