Merge branch 'main' into fix/17555-regression

Expensify · May 19, 2023 · 7cc963b · 7cc963b
2 parents be85b0c + 2182d0c
commit 7cc963b
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "@react-navigation/drawer": "github:Expensify/react-navigation#react-navigation-drawer-v6.5.0-alpha1-gitpkg",
     "@react-navigation/native": "6.0.13",
     "@react-navigation/stack": "6.3.1",
+    "@react-ng/bounds-observer": "^0.2.1",
     "@ua/react-native-airship": "^15.2.3",
     "awesome-phonenumber": "^5.4.0",
     "babel-plugin-transform-remove-console": "^6.9.4",

diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -20,11 +20,11 @@ const propTypes = {
     /** The distance between the top of the wrapper view and the top of the window */
     yOffset: PropTypes.number.isRequired,
 
-    /** The width of the tooltip wrapper */
-    wrapperWidth: PropTypes.number.isRequired,
+    /** The width of the tooltip's target */
+    targetWidth: PropTypes.number.isRequired,
 
-    /** The Height of the tooltip wrapper */
-    wrapperHeight: PropTypes.number.isRequired,
+    /** The height of the tooltip's target */
+    targetHeight: PropTypes.number.isRequired,
 
     /** Any additional amount to manually adjust the horizontal position of the tooltip.
     A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
@@ -63,9 +63,10 @@ const TooltipRenderedOnPageBody = (props) => {
     // The width and height of tooltip's inner content. Has to be undefined in the beginning
     // as a width/height of 0 will cause the content to be rendered of a width/height of 0,
     // which prevents us from measuring it correctly.
-    const [tooltipContentWidth, setTooltipContentWidth] = useState(undefined);
-    const [tooltipContentHeight, setTooltipContentHeight] = useState(undefined);
+    const [contentMeasuredWidth, setContentMeasuredWidth] = useState(undefined);
+    const [contentMeasuredHeight, setContentMeasuredHeight] = useState(undefined);
     const contentRef = useRef();
+    const rootWrapper = useRef();
 
     useEffect(() => {
         if (!props.renderTooltipContent || !props.text) {
@@ -78,35 +79,36 @@ const TooltipRenderedOnPageBody = (props) => {
         // Calculate the tooltip width and height before the browser repaints the screen to prevent flicker
         // because of the late update of the width and the height from onLayout.
         const rect = contentRef.current.getBoundingClientRect();
-        setTooltipContentWidth(rect.width);
-        setTooltipContentHeight(rect.height);
+        setContentMeasuredWidth(rect.width);
+        setContentMeasuredHeight(rect.height);
     }, []);
 
-    const {animationStyle, tooltipWrapperStyle, tooltipTextStyle, pointerWrapperStyle, pointerStyle} = useMemo(
+    const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
         () =>
             getTooltipStyles(
                 props.animation,
                 props.windowWidth,
                 props.xOffset,
                 props.yOffset,
-                props.wrapperWidth,
-                props.wrapperHeight,
+                props.targetWidth,
+                props.targetHeight,
                 props.maxWidth,
-                tooltipContentWidth,
-                tooltipContentHeight,
+                contentMeasuredWidth,
+                contentMeasuredHeight,
                 props.shiftHorizontal,
                 props.shiftVertical,
+                rootWrapper.current,
             ),
         [
             props.animation,
             props.windowWidth,
             props.xOffset,
             props.yOffset,
-            props.wrapperWidth,
-            props.wrapperHeight,
+            props.targetWidth,
+            props.targetHeight,
             props.maxWidth,
-            tooltipContentWidth,
-            tooltipContentHeight,
+            contentMeasuredWidth,
+            contentMeasuredHeight,
             props.shiftHorizontal,
             props.shiftVertical,
         ],
@@ -119,10 +121,10 @@ const TooltipRenderedOnPageBody = (props) => {
         content = (
             <Text
                 numberOfLines={props.numberOfLines}
-                style={tooltipTextStyle}
+                style={textStyle}
             >
                 <Text
-                    style={tooltipTextStyle}
+                    style={textStyle}
                     ref={contentRef}
                 >
                     {props.text}
@@ -132,7 +134,10 @@ const TooltipRenderedOnPageBody = (props) => {
     }
 
     return ReactDOM.createPortal(
-        <Animated.View style={[tooltipWrapperStyle, animationStyle]}>
+        <Animated.View
+            ref={rootWrapper}
+            style={[rootWrapperStyle, animationStyle]}
+        >
             {content}
             <View style={pointerWrapperStyle}>
                 <View style={pointerStyle} />