Page MenuHomePhabricator
Files F3512022

D14117.id46474.diff
No OneTemporary
Actions

D14117.id46474.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
@@ -10,7 +10,11 @@
Platform,
Keyboard,
} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {
+ interpolate,
+ useAnimatedStyle,
+ useSharedValue,
+} from 'react-native-reanimated';
import {
TooltipContextProvider,
@@ -34,12 +38,12 @@
import {
AnimatedView,
type ViewStyle,
- type AnimatedViewStyle,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
+ type AnimatedStyleObj,
} from '../types/styles.js';
-const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated;
+const { Node, Extrapolate } = Animated;
const unboundStyles = {
backdrop: {
@@ -234,79 +238,23 @@
}, [margin, tooltipHeight, params, tooltipLocation]);
invariant(overlayContext, 'Tooltip should have OverlayContext');
- const { position } = overlayContext;
+ const { position, positionV2 } = overlayContext;
invariant(position, 'position should be defined in tooltip');
+ invariant(positionV2, '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],
- );
+ const tooltipHorizontalOffset = useSharedValue(0);
- const opacityStyle: AnimatedViewStyle = React.useMemo(() => {
+ const opacityStyle: AnimatedStyleObj = useAnimatedStyle(() => {
+ const backdropOpacity = interpolate(
+ positionV2.value,
+ [0, 1],
+ [0, 0.7],
+ Extrapolate.CLAMP,
+ );
return {
- ...styles.backdrop,
opacity: backdropOpacity,
};
- }, [backdropOpacity, styles.backdrop]);
+ });
const contentContainerStyle: ViewStyle = React.useMemo(() => {
const { verticalBounds } = params;
@@ -332,18 +280,28 @@
};
}, [params]);
- const tooltipContainerStyle: AnimatedViewStyle = React.useMemo(() => {
+ const tooltipContainerStyle: AnimatedStyleObj = useAnimatedStyle(() => {
const { initialCoordinates, verticalBounds, chatInputBarHeight } = params;
const { x, y, width, height } = initialCoordinates;
const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
style.alignItems = 'center';
+ const tooltipContainerOpacity = interpolate(
+ positionV2.value,
+ [0, 0.1],
+ [0, 1],
+ Extrapolate.CLAMP,
+ );
style.opacity = tooltipContainerOpacity;
+ const invertedPosition = 1 - positionV2.value;
+
const transform: Array<ReanimatedTransform> = [];
if (computedTooltipLocation !== 'fixed') {
+ const tooltipHorizontal =
+ invertedPosition * tooltipHorizontalOffset.value;
transform.push({ translateX: tooltipHorizontal });
}
@@ -371,19 +329,38 @@
verticalBounds.y -
inputBarHeight +
padding;
+ const fixedTooltipVertical = invertedPosition * dimensions.height;
transform.push({ translateY: fixedTooltipVertical });
} else if (computedTooltipLocation === 'above') {
style.bottom =
dimensions.height - Math.max(y, verticalBounds.y) + margin;
+ const tooltipVerticalAbove = interpolate(
+ positionV2.value,
+ [0, 1],
+ [margin + tooltipHeight / 2, 0],
+ Extrapolate.CLAMP,
+ );
transform.push({ translateY: tooltipVerticalAbove });
} else {
style.top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) +
margin;
+ const tooltipVerticalBelow = interpolate(
+ positionV2.value,
+ [0, 1],
+ [-margin - tooltipHeight / 2, 0],
+ Extrapolate.CLAMP,
+ );
transform.push({ translateY: tooltipVerticalBelow });
}
if (computedTooltipLocation !== 'fixed') {
+ const tooltipScale = interpolate(
+ positionV2.value,
+ [0, 0.2, 0.8, 1],
+ [0, 0, 1, 1],
+ Extrapolate.CLAMP,
+ );
transform.push({ scale: tooltipScale });
}
@@ -393,15 +370,10 @@
}, [
dimensions.height,
dimensions.width,
- fixedTooltipVertical,
- margin,
- computedTooltipLocation,
params,
- tooltipContainerOpacity,
- tooltipHorizontal,
- tooltipScale,
- tooltipVerticalAbove,
- tooltipVerticalBelow,
+ computedTooltipLocation,
+ margin,
+ tooltipHeight,
]);
const onPressMore = React.useCallback(() => {
@@ -425,17 +397,18 @@
const actualWidth = event.nativeEvent.layout.width;
if (extraLeftSpace < extraRightSpace) {
const minWidth = width + 2 * extraLeftSpace;
- tooltipHorizontalOffset.current.setValue(
- (minWidth - actualWidth) / 2,
- );
+ tooltipHorizontalOffset.value = (minWidth - actualWidth) / 2;
} else {
const minWidth = width + 2 * extraRightSpace;
- tooltipHorizontalOffset.current.setValue(
- (actualWidth - minWidth) / 2,
- );
+ tooltipHorizontalOffset.value = (actualWidth - minWidth) / 2;
}
},
- [dimensions.width, params.initialCoordinates],
+ [dimensions.width, params.initialCoordinates, tooltipHorizontalOffset],
+ );
+
+ const backdropStyle = React.useMemo(
+ () => [opacityStyle, styles.backdrop],
+ [opacityStyle, styles.backdrop],
);
const tooltipItemContainerStyle: Array<ViewStyle> = [styles.itemContainer];
@@ -524,7 +497,7 @@
return (
<TouchableWithoutFeedback onPress={closeTooltip}>
<View style={styles.container}>
- <AnimatedView style={opacityStyle} />
+ <AnimatedView style={backdropStyle} />
<View style={contentContainerStyle}>
<View style={buttonStyle}>
<ButtonComponent {...buttonProps} />

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 5:58 PM (18 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2674321
Default Alt Text
D14117.id46474.diff (7 KB)

Event Timeline