Page MenuHomePhabricator
Files F3509495

D14107.diff
No OneTemporary
Actions

D14107.diff
View Options

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
@@ -151,6 +151,7 @@
+boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
+margin: number,
+tooltipHeight: number,
+ +computedTooltipLocation: 'above' | 'below' | 'fixed',
};
export type TooltipMenuProps<RouteName> = {
@@ -230,31 +231,6 @@
Haptics.impactAsync();
}
- get tooltipLocation(): 'above' | 'below' | 'fixed' {
- const { params } = this.props.route;
- const { tooltipLocation } = params;
- if (tooltipLocation) {
- return tooltipLocation;
- }
-
- const { initialCoordinates, verticalBounds } = params;
- const { y, height } = initialCoordinates;
- const contentTop = y;
- const contentBottom = y + height;
- const boundsTop = verticalBounds.y;
- const boundsBottom = verticalBounds.y + verticalBounds.height;
-
- const fullHeight = this.props.tooltipHeight + this.props.margin;
- if (
- contentBottom + fullHeight > boundsBottom &&
- contentTop - fullHeight > boundsTop
- ) {
- return 'above';
- }
-
- return 'below';
- }
-
get opacityStyle(): AnimatedViewStyle {
return {
...this.props.styles.backdrop,
@@ -288,11 +264,10 @@
}
get tooltipContainerStyle(): AnimatedViewStyle {
- const { dimensions, route, margin } = this.props;
+ const { dimensions, route, margin, computedTooltipLocation } = this.props;
const { initialCoordinates, verticalBounds, chatInputBarHeight } =
route.params;
const { x, y, width, height } = initialCoordinates;
- const { tooltipLocation } = this;
const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
@@ -301,7 +276,7 @@
const transform: Array<ReanimatedTransform> = [];
- if (tooltipLocation !== 'fixed') {
+ if (computedTooltipLocation !== 'fixed') {
transform.push({ translateX: this.tooltipHorizontal });
}
@@ -317,7 +292,7 @@
const inputBarHeight = chatInputBarHeight ?? 0;
- if (tooltipLocation === 'fixed') {
+ if (computedTooltipLocation === 'fixed') {
const padding = 8;
style.minWidth = dimensions.width - 16;
@@ -330,7 +305,7 @@
inputBarHeight +
padding;
transform.push({ translateY: this.fixedTooltipVertical });
- } else if (tooltipLocation === 'above') {
+ } else if (computedTooltipLocation === 'above') {
style.bottom =
dimensions.height - Math.max(y, verticalBounds.y) + margin;
transform.push({ translateY: this.tooltipVerticalAbove });
@@ -341,7 +316,7 @@
transform.push({ translateY: this.tooltipVerticalBelow });
}
- if (tooltipLocation !== 'fixed') {
+ if (computedTooltipLocation !== 'fixed') {
transform.push({ scale: this.tooltipScale });
}
@@ -361,12 +336,13 @@
boundTooltipItem,
margin,
tooltipHeight,
+ computedTooltipLocation,
...navAndRouteForFlow
} = this.props;
const tooltipContainerStyle: Array<ViewStyle> = [styles.itemContainer];
- if (this.tooltipLocation === 'fixed') {
+ if (computedTooltipLocation === 'fixed') {
tooltipContainerStyle.push(styles.itemContainerFixed);
}
@@ -411,10 +387,9 @@
let triangleDown = null;
let triangleUp = null;
- const { tooltipLocation } = this;
- if (tooltipLocation === 'above') {
+ if (computedTooltipLocation === 'above') {
triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
- } else if (tooltipLocation === 'below') {
+ } else if (computedTooltipLocation === 'below') {
triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
}
@@ -434,7 +409,7 @@
let tooltip = null;
- if (this.tooltipLocation !== 'fixed') {
+ if (computedTooltipLocation !== 'fixed') {
tooltip = (
<AnimatedView
style={this.tooltipContainerStyle}
@@ -446,7 +421,7 @@
</AnimatedView>
);
} else if (
- this.tooltipLocation === 'fixed' &&
+ computedTooltipLocation === 'fixed' &&
!this.props.route.params.hideTooltip
) {
tooltip = (
@@ -564,6 +539,29 @@
}
}, [tooltipLocation, tooltipContext]);
+ const computedTooltipLocation = React.useMemo(() => {
+ if (tooltipLocation) {
+ return tooltipLocation;
+ }
+
+ const { initialCoordinates, verticalBounds } = params;
+ const { y, height } = initialCoordinates;
+ const contentTop = y;
+ const contentBottom = y + height;
+ const boundsTop = verticalBounds.y;
+ const boundsBottom = verticalBounds.y + verticalBounds.height;
+
+ const fullHeight = tooltipHeight + margin;
+ if (
+ contentBottom + fullHeight > boundsBottom &&
+ contentTop - fullHeight > boundsTop
+ ) {
+ return 'above';
+ }
+
+ return 'below';
+ }, [margin, tooltipHeight, params, tooltipLocation]);
+
return (
<Tooltip
{...rest}
@@ -576,6 +574,7 @@
boundTooltipItem={boundTooltipItem}
margin={margin}
tooltipHeight={tooltipHeight}
+ computedTooltipLocation={computedTooltipLocation}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 5:36 AM (11 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2679951
Default Alt Text
D14107.diff (5 KB)

Event Timeline