Page MenuHomePhabricator
Files F3509689

D14109.diff
No OneTemporary
Actions

D14109.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,17 +149,12 @@
+tooltipContext: TooltipContextType,
+closeTooltip: () => mixed,
+boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
- +margin: number,
- +tooltipHeight: number,
+computedTooltipLocation: 'above' | 'below' | 'fixed',
- +backdropOpacity: Node,
- +tooltipContainerOpacity: Node,
- +tooltipVerticalAbove: Node,
- +tooltipVerticalBelow: Node,
+tooltipHorizontalOffset: Value,
- +tooltipHorizontal: Node,
- +tooltipScale: Node,
- +fixedTooltipVertical: Node,
+ +opacityStyle: AnimatedViewStyle,
+ +contentContainerStyle: ViewStyle,
+ +buttonStyle: ViewStyle,
+ +tooltipContainerStyle: AnimatedViewStyle,
};
export type TooltipMenuProps<RouteName> = {
@@ -181,100 +176,6 @@
Haptics.impactAsync();
}
- get opacityStyle(): AnimatedViewStyle {
- return {
- ...this.props.styles.backdrop,
- opacity: this.props.backdropOpacity,
- };
- }
-
- get contentContainerStyle(): ViewStyle {
- const { verticalBounds } = this.props.route.params;
- const fullScreenHeight = this.props.dimensions.height;
- const top = verticalBounds.y;
- const bottom =
- fullScreenHeight - verticalBounds.y - verticalBounds.height;
- return {
- ...this.props.styles.contentContainer,
- marginTop: top,
- marginBottom: bottom,
- };
- }
-
- get buttonStyle(): ViewStyle {
- const { params } = this.props.route;
- const { initialCoordinates, verticalBounds } = params;
- const { x, y, width, height } = initialCoordinates;
- return {
- width: Math.ceil(width),
- height: Math.ceil(height),
- marginTop: y - verticalBounds.y,
- marginLeft: x,
- };
- }
-
- get tooltipContainerStyle(): AnimatedViewStyle {
- const { dimensions, route, margin, computedTooltipLocation } = this.props;
- const { initialCoordinates, verticalBounds, chatInputBarHeight } =
- route.params;
- const { x, y, width, height } = initialCoordinates;
-
- const style: WritableAnimatedStyleObj = {};
- style.position = 'absolute';
- style.alignItems = 'center';
- style.opacity = this.props.tooltipContainerOpacity;
-
- const transform: Array<ReanimatedTransform> = [];
-
- if (computedTooltipLocation !== 'fixed') {
- transform.push({ translateX: this.props.tooltipHorizontal });
- }
-
- const extraLeftSpace = x;
- const extraRightSpace = dimensions.width - width - x;
- if (extraLeftSpace < extraRightSpace) {
- style.left = 0;
- style.minWidth = width + 2 * extraLeftSpace;
- } else {
- style.right = 0;
- style.minWidth = width + 2 * extraRightSpace;
- }
-
- const inputBarHeight = chatInputBarHeight ?? 0;
-
- if (computedTooltipLocation === 'fixed') {
- const padding = 8;
-
- style.minWidth = dimensions.width - 16;
- style.left = 8;
- style.right = 8;
- style.bottom =
- dimensions.height -
- verticalBounds.height -
- verticalBounds.y -
- inputBarHeight +
- padding;
- transform.push({ translateY: this.props.fixedTooltipVertical });
- } else if (computedTooltipLocation === 'above') {
- style.bottom =
- dimensions.height - Math.max(y, verticalBounds.y) + margin;
- transform.push({ translateY: this.props.tooltipVerticalAbove });
- } else {
- style.top =
- Math.min(y + height, verticalBounds.y + verticalBounds.height) +
- margin;
- transform.push({ translateY: this.props.tooltipVerticalBelow });
- }
-
- if (computedTooltipLocation !== 'fixed') {
- transform.push({ scale: this.props.tooltipScale });
- }
-
- style.transform = transform;
-
- return style;
- }
-
render(): React.Node {
const {
dimensions,
@@ -284,17 +185,12 @@
tooltipContext,
closeTooltip,
boundTooltipItem,
- margin,
- tooltipHeight,
computedTooltipLocation,
- backdropOpacity,
- tooltipContainerOpacity,
- tooltipVerticalAbove,
- tooltipVerticalBelow,
tooltipHorizontalOffset,
- tooltipHorizontal,
- tooltipScale,
- fixedTooltipVertical,
+ opacityStyle,
+ contentContainerStyle,
+ buttonStyle,
+ tooltipContainerStyle: _tooltipContainerStyle,
...navAndRouteForFlow
} = this.props;
@@ -370,7 +266,7 @@
if (computedTooltipLocation !== 'fixed') {
tooltip = (
<AnimatedView
- style={this.tooltipContainerStyle}
+ style={this.props.tooltipContainerStyle}
onLayout={this.onTooltipContainerLayout}
>
{triangleUp}
@@ -383,7 +279,7 @@
!this.props.route.params.hideTooltip
) {
tooltip = (
- <AnimatedView style={this.tooltipContainerStyle}>
+ <AnimatedView style={this.props.tooltipContainerStyle}>
<View style={itemsStyles}>{items}</View>
</AnimatedView>
);
@@ -392,9 +288,9 @@
return (
<TouchableWithoutFeedback onPress={this.props.closeTooltip}>
<View style={styles.container}>
- <AnimatedView style={this.opacityStyle} />
- <View style={this.contentContainerStyle}>
- <View style={this.buttonStyle}>
+ <AnimatedView style={this.props.opacityStyle} />
+ <View style={this.props.contentContainerStyle}>
+ <View style={this.props.buttonStyle}>
<ButtonComponent {...buttonProps} />
</View>
</View>
@@ -592,6 +488,109 @@
[dimensions.height, invertedPosition],
);
+ const opacityStyle: AnimatedViewStyle = React.useMemo(() => {
+ return {
+ ...styles.backdrop,
+ opacity: backdropOpacity,
+ };
+ }, [backdropOpacity, styles.backdrop]);
+
+ const contentContainerStyle: ViewStyle = React.useMemo(() => {
+ const { verticalBounds } = params;
+ const fullScreenHeight = dimensions.height;
+ const top = verticalBounds.y;
+ const bottom =
+ fullScreenHeight - verticalBounds.y - verticalBounds.height;
+ return {
+ ...styles.contentContainer,
+ marginTop: top,
+ marginBottom: bottom,
+ };
+ }, [dimensions.height, params, styles.contentContainer]);
+
+ const buttonStyle: ViewStyle = React.useMemo(() => {
+ const { initialCoordinates, verticalBounds } = params;
+ const { x, y, width, height } = initialCoordinates;
+ return {
+ width: Math.ceil(width),
+ height: Math.ceil(height),
+ marginTop: y - verticalBounds.y,
+ marginLeft: x,
+ };
+ }, [params]);
+
+ const tooltipContainerStyle: AnimatedViewStyle = React.useMemo(() => {
+ const { initialCoordinates, verticalBounds, chatInputBarHeight } = params;
+ const { x, y, width, height } = initialCoordinates;
+
+ const style: WritableAnimatedStyleObj = {};
+ style.position = 'absolute';
+ style.alignItems = 'center';
+ style.opacity = tooltipContainerOpacity;
+
+ const transform: Array<ReanimatedTransform> = [];
+
+ if (computedTooltipLocation !== 'fixed') {
+ transform.push({ translateX: tooltipHorizontal });
+ }
+
+ const extraLeftSpace = x;
+ const extraRightSpace = dimensions.width - width - x;
+ if (extraLeftSpace < extraRightSpace) {
+ style.left = 0;
+ style.minWidth = width + 2 * extraLeftSpace;
+ } else {
+ style.right = 0;
+ style.minWidth = width + 2 * extraRightSpace;
+ }
+
+ const inputBarHeight = chatInputBarHeight ?? 0;
+
+ if (computedTooltipLocation === 'fixed') {
+ const padding = 8;
+
+ style.minWidth = dimensions.width - 16;
+ style.left = 8;
+ style.right = 8;
+ style.bottom =
+ dimensions.height -
+ verticalBounds.height -
+ verticalBounds.y -
+ inputBarHeight +
+ padding;
+ transform.push({ translateY: fixedTooltipVertical });
+ } else if (computedTooltipLocation === 'above') {
+ style.bottom =
+ dimensions.height - Math.max(y, verticalBounds.y) + margin;
+ transform.push({ translateY: tooltipVerticalAbove });
+ } else {
+ style.top =
+ Math.min(y + height, verticalBounds.y + verticalBounds.height) +
+ margin;
+ transform.push({ translateY: tooltipVerticalBelow });
+ }
+
+ if (computedTooltipLocation !== 'fixed') {
+ transform.push({ scale: tooltipScale });
+ }
+
+ style.transform = transform;
+
+ return style;
+ }, [
+ dimensions.height,
+ dimensions.width,
+ fixedTooltipVertical,
+ margin,
+ computedTooltipLocation,
+ params,
+ tooltipContainerOpacity,
+ tooltipHorizontal,
+ tooltipScale,
+ tooltipVerticalAbove,
+ tooltipVerticalBelow,
+ ]);
+
return (
<Tooltip
{...rest}
@@ -602,17 +601,12 @@
tooltipContext={tooltipContext}
closeTooltip={closeTooltip}
boundTooltipItem={boundTooltipItem}
- margin={margin}
- tooltipHeight={tooltipHeight}
computedTooltipLocation={computedTooltipLocation}
- backdropOpacity={backdropOpacity}
- tooltipContainerOpacity={tooltipContainerOpacity}
- tooltipVerticalAbove={tooltipVerticalAbove}
- tooltipVerticalBelow={tooltipVerticalBelow}
tooltipHorizontalOffset={tooltipHorizontalOffset.current}
- tooltipHorizontal={tooltipHorizontal}
- tooltipScale={tooltipScale}
- fixedTooltipVertical={fixedTooltipVertical}
+ opacityStyle={opacityStyle}
+ contentContainerStyle={contentContainerStyle}
+ buttonStyle={buttonStyle}
+ tooltipContainerStyle={tooltipContainerStyle}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 7:24 AM (6 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2679921
Default Alt Text
D14109.diff (9 KB)

Event Timeline