move wrapper width condition to getTooltipStyles

Expensify · May 2, 2022 · e076b95 · e076b95
1 parent 7895f01
commit e076b95
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -4,7 +4,6 @@ import {Animated, View} from 'react-native';
 import ReactDOM from 'react-dom';
 import getTooltipStyles from '../../styles/getTooltipStyles';
 import Text from '../Text';
-import spacing from '../../styles/utilities/spacing';
 
 const propTypes = {
     /** Window width */
@@ -83,14 +82,6 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
     }
 
     render() {
-        // We get wrapper width based on tooltip's inner text width so the wrapper
-        // is just big enough to fit text and prevent white space
-        const wrapperWidth = this.state.tooltipTextWidth && this.state.tooltipTextWidth < this.props.maxWidth
-
-            // Add horizontal padding to the text width to get the wrapper width.
-            // TooltipTextWidth ignores the fractions (OffsetWidth) so add 1px to fit the text properly.
-            ? this.state.tooltipTextWidth + (spacing.ph2.paddingHorizontal * 2) + 1
-            : this.props.maxWidth;
         const {
             animationStyle,
             tooltipWrapperStyle,
@@ -106,9 +97,10 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
             this.props.wrapperHeight,
             this.state.tooltipWidth,
             this.state.tooltipHeight,
+            this.state.tooltipTextWidth,
             this.props.shiftHorizontal,
             this.props.shiftVertical,
-            wrapperWidth,
+            this.props.maxWidth,
         );
         return ReactDOM.createPortal(
             <Animated.View

diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js
@@ -62,12 +62,13 @@ function computeHorizontalShift(windowWidth, xOffset, componentWidth, tooltipWid
  * @param {Number} componentHeight - The height of the wrapped component.
  * @param {Number} tooltipWidth - The width of the tooltip itself.
  * @param {Number} tooltipHeight - The height of the tooltip itself.
+ * @param {Number} tooltipTextWidth - The tooltip's inner text width.
  * @param {Number} [manualShiftHorizontal] - Any additional amount to manually shift the tooltip to the left or right.
  *                                         A positive value shifts it to the right,
  *                                         and a negative value shifts it to the left.
  * @param {Number} [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
- * @param {Number} wrapperWidth - Calculated width for tooltip's wrapper
+ * @param {Number} maxWidth - The tooltip's max width.
  * @returns {Object}
  */
 export default function getTooltipStyles(
@@ -79,9 +80,10 @@ export default function getTooltipStyles(
     componentHeight,
     tooltipWidth,
     tooltipHeight,
+    tooltipTextWidth,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
-    wrapperWidth,
+    maxWidth,
 ) {
     // Determine if the tooltip should display below the wrapped component.
     // If a tooltip will try to render within GUTTER_WIDTH logical pixels of the top of the screen,
@@ -95,6 +97,15 @@ export default function getTooltipStyles(
     const tooltipVerticalPadding = spacing.pv1;
     const tooltipFontSize = variables.fontSizeSmall;
 
+    // We get wrapper width based on tooltip's inner text width so the wrapper
+    // is just big enough to fit text and prevent white space
+    const wrapperWidth = tooltipTextWidth && tooltipTextWidth < maxWidth
+
+        // Add horizontal padding to the text width to get the wrapper width.
+        // TooltipTextWidth ignores the fractions (OffsetWidth) so add 1px to fit the text properly.
+        ? tooltipTextWidth + (spacing.ph2.paddingHorizontal * 2) + 1
+        : maxWidth;
+
     return {
         animationStyle: {
             // remember Transform causes a new Local cordinate system