Page MenuHomePhabricator
Files F3507265

D14108.diff
No OneTemporary
Actions

D14108.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
@@ -152,6 +152,14 @@
+margin: number,
+tooltipHeight: number,
+computedTooltipLocation: 'above' | 'below' | 'fixed',
+ +backdropOpacity: Node,
+ +tooltipContainerOpacity: Node,
+ +tooltipVerticalAbove: Node,
+ +tooltipVerticalBelow: Node,
+ +tooltipHorizontalOffset: Value,
+ +tooltipHorizontal: Node,
+ +tooltipScale: Node,
+ +fixedTooltipVertical: Node,
};
export type TooltipMenuProps<RouteName> = {
@@ -169,64 +177,6 @@
class Tooltip extends React.PureComponent<
TooltipProps<BaseTooltipPropsType>,
> {
- backdropOpacity: Node;
- tooltipContainerOpacity: Node;
- tooltipVerticalAbove: Node;
- tooltipVerticalBelow: Node;
- tooltipHorizontalOffset: Value = new Value(0);
- tooltipHorizontal: Node;
- tooltipScale: Node;
- fixedTooltipVertical: Node;
-
- constructor(props: TooltipProps<BaseTooltipPropsType>) {
- super(props);
-
- const { overlayContext } = props;
- invariant(overlayContext, 'Tooltip should have OverlayContext');
- const { position } = overlayContext;
- invariant(position, 'position should be defined in tooltip');
-
- this.backdropOpacity = interpolateNode(position, {
- inputRange: [0, 1],
- outputRange: [0, 0.7],
- extrapolate: Extrapolate.CLAMP,
- });
- this.tooltipContainerOpacity = interpolateNode(position, {
- inputRange: [0, 0.1],
- outputRange: [0, 1],
- extrapolate: Extrapolate.CLAMP,
- });
-
- this.tooltipVerticalAbove = interpolateNode(position, {
- inputRange: [0, 1],
- outputRange: [this.props.margin + this.props.tooltipHeight / 2, 0],
- extrapolate: Extrapolate.CLAMP,
- });
- this.tooltipVerticalBelow = interpolateNode(position, {
- inputRange: [0, 1],
- outputRange: [-this.props.margin - this.props.tooltipHeight / 2, 0],
- extrapolate: Extrapolate.CLAMP,
- });
-
- const invertedPosition = add(1, multiply(-1, position));
-
- this.tooltipHorizontal = multiply(
- invertedPosition,
- this.tooltipHorizontalOffset,
- );
-
- this.tooltipScale = interpolateNode(position, {
- inputRange: [0, 0.2, 0.8, 1],
- outputRange: [0, 0, 1, 1],
- extrapolate: Extrapolate.CLAMP,
- });
-
- this.fixedTooltipVertical = multiply(
- invertedPosition,
- props.dimensions.height,
- );
- }
-
componentDidMount() {
Haptics.impactAsync();
}
@@ -234,7 +184,7 @@
get opacityStyle(): AnimatedViewStyle {
return {
...this.props.styles.backdrop,
- opacity: this.backdropOpacity,
+ opacity: this.props.backdropOpacity,
};
}
@@ -272,12 +222,12 @@
const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
style.alignItems = 'center';
- style.opacity = this.tooltipContainerOpacity;
+ style.opacity = this.props.tooltipContainerOpacity;
const transform: Array<ReanimatedTransform> = [];
if (computedTooltipLocation !== 'fixed') {
- transform.push({ translateX: this.tooltipHorizontal });
+ transform.push({ translateX: this.props.tooltipHorizontal });
}
const extraLeftSpace = x;
@@ -304,20 +254,20 @@
verticalBounds.y -
inputBarHeight +
padding;
- transform.push({ translateY: this.fixedTooltipVertical });
+ transform.push({ translateY: this.props.fixedTooltipVertical });
} else if (computedTooltipLocation === 'above') {
style.bottom =
dimensions.height - Math.max(y, verticalBounds.y) + margin;
- transform.push({ translateY: this.tooltipVerticalAbove });
+ transform.push({ translateY: this.props.tooltipVerticalAbove });
} else {
style.top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) +
margin;
- transform.push({ translateY: this.tooltipVerticalBelow });
+ transform.push({ translateY: this.props.tooltipVerticalBelow });
}
if (computedTooltipLocation !== 'fixed') {
- transform.push({ scale: this.tooltipScale });
+ transform.push({ scale: this.props.tooltipScale });
}
style.transform = transform;
@@ -337,6 +287,14 @@
margin,
tooltipHeight,
computedTooltipLocation,
+ backdropOpacity,
+ tooltipContainerOpacity,
+ tooltipVerticalAbove,
+ tooltipVerticalBelow,
+ tooltipHorizontalOffset,
+ tooltipHorizontal,
+ tooltipScale,
+ fixedTooltipVertical,
...navAndRouteForFlow
} = this.props;
@@ -473,10 +431,14 @@
const actualWidth = event.nativeEvent.layout.width;
if (extraLeftSpace < extraRightSpace) {
const minWidth = width + 2 * extraLeftSpace;
- this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2);
+ this.props.tooltipHorizontalOffset.setValue(
+ (minWidth - actualWidth) / 2,
+ );
} else {
const minWidth = width + 2 * extraRightSpace;
- this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
+ this.props.tooltipHorizontalOffset.setValue(
+ (actualWidth - minWidth) / 2,
+ );
}
};
}
@@ -562,6 +524,74 @@
return 'below';
}, [margin, tooltipHeight, params, tooltipLocation]);
+ invariant(overlayContext, 'Tooltip should have OverlayContext');
+ const { position } = overlayContext;
+ invariant(position, 'position should be defined in tooltip');
+
+ const backdropOpacity = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 1],
+ outputRange: [0, 0.7],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [position],
+ );
+ const tooltipContainerOpacity = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 0.1],
+ outputRange: [0, 1],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [position],
+ );
+
+ const tooltipVerticalAbove = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 1],
+ outputRange: [margin + tooltipHeight / 2, 0],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [margin, tooltipHeight, position],
+ );
+ const tooltipVerticalBelow = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 1],
+ outputRange: [-margin - tooltipHeight / 2, 0],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [margin, tooltipHeight, position],
+ );
+
+ const invertedPosition = React.useMemo(
+ () => add(1, multiply(-1, position)),
+ [position],
+ );
+ const tooltipHorizontalOffset = React.useRef(new Value(0));
+
+ const tooltipHorizontal = React.useMemo(
+ () => multiply(invertedPosition, tooltipHorizontalOffset.current),
+ [invertedPosition],
+ );
+
+ const tooltipScale = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 0.2, 0.8, 1],
+ outputRange: [0, 0, 1, 1],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [position],
+ );
+
+ const fixedTooltipVertical = React.useMemo(
+ () => multiply(invertedPosition, dimensions.height),
+ [dimensions.height, invertedPosition],
+ );
+
return (
<Tooltip
{...rest}
@@ -575,6 +605,14 @@
margin={margin}
tooltipHeight={tooltipHeight}
computedTooltipLocation={computedTooltipLocation}
+ backdropOpacity={backdropOpacity}
+ tooltipContainerOpacity={tooltipContainerOpacity}
+ tooltipVerticalAbove={tooltipVerticalAbove}
+ tooltipVerticalBelow={tooltipVerticalBelow}
+ tooltipHorizontalOffset={tooltipHorizontalOffset.current}
+ tooltipHorizontal={tooltipHorizontal}
+ tooltipScale={tooltipScale}
+ fixedTooltipVertical={fixedTooltipVertical}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 8:03 PM (20 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2681548
Default Alt Text
D14108.diff (8 KB)

Event Timeline