Page MenuHomePhabricator
Files F3493217

D14104.id46322.diff
No OneTemporary
Actions

D14104.id46322.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
@@ -149,6 +149,7 @@
+tooltipContext: TooltipContextType,
+closeTooltip: () => mixed,
+boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
+ +getMargin: () => number,
};
export type TooltipMenuProps<RouteName> = {
@@ -194,15 +195,14 @@
extrapolate: Extrapolate.CLAMP,
});
- const { margin } = this;
this.tooltipVerticalAbove = interpolateNode(position, {
inputRange: [0, 1],
- outputRange: [margin + this.tooltipHeight / 2, 0],
+ outputRange: [this.props.getMargin() + this.tooltipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
});
this.tooltipVerticalBelow = interpolateNode(position, {
inputRange: [0, 1],
- outputRange: [-margin - this.tooltipHeight / 2, 0],
+ outputRange: [-this.props.getMargin() - this.tooltipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
});
@@ -251,8 +251,8 @@
const boundsTop = verticalBounds.y;
const boundsBottom = verticalBounds.y + verticalBounds.height;
- const { margin, tooltipHeight: curTooltipHeight } = this;
- const fullHeight = curTooltipHeight + margin;
+ const { tooltipHeight: curTooltipHeight } = this;
+ const fullHeight = curTooltipHeight + this.props.getMargin();
if (
contentBottom + fullHeight > boundsBottom &&
contentTop - fullHeight > boundsTop
@@ -295,19 +295,12 @@
};
}
- get margin(): number {
- const customMargin = this.props.route.params.margin;
- return customMargin !== null && customMargin !== undefined
- ? customMargin
- : 20;
- }
-
get tooltipContainerStyle(): AnimatedViewStyle {
- const { dimensions, route } = this.props;
+ const { dimensions, route, getMargin } = this.props;
const { initialCoordinates, verticalBounds, chatInputBarHeight } =
route.params;
const { x, y, width, height } = initialCoordinates;
- const { margin, tooltipLocation } = this;
+ const { tooltipLocation } = this;
const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
@@ -347,12 +340,12 @@
transform.push({ translateY: this.fixedTooltipVertical });
} else if (tooltipLocation === 'above') {
style.bottom =
- dimensions.height - Math.max(y, verticalBounds.y) + margin;
+ dimensions.height - Math.max(y, verticalBounds.y) + getMargin();
transform.push({ translateY: this.tooltipVerticalAbove });
} else {
style.top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) +
- margin;
+ getMargin();
transform.push({ translateY: this.tooltipVerticalBelow });
}
@@ -374,6 +367,7 @@
tooltipContext,
closeTooltip,
boundTooltipItem,
+ getMargin,
...navAndRouteForFlow
} = this.props;
@@ -561,6 +555,14 @@
const tooltipContext = React.useContext(TooltipContext);
invariant(tooltipContext, 'TooltipContext should be set in Tooltip');
+
+ const getMargin = React.useCallback(() => {
+ const customMargin = params.margin;
+ return customMargin !== null && customMargin !== undefined
+ ? customMargin
+ : 20;
+ }, [params.margin]);
+
return (
<Tooltip
{...rest}
@@ -571,6 +573,7 @@
tooltipContext={tooltipContext}
closeTooltip={closeTooltip}
boundTooltipItem={boundTooltipItem}
+ getMargin={getMargin}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 2:20 AM (20 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2679844
Default Alt Text
D14104.id46322.diff (3 KB)

Event Timeline