move wrapper width logic close to its variables

Expensify · Apr 26, 2022 · 706f227 · 706f227
1 parent b66427b
commit 706f227
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -4,6 +4,7 @@ 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 */
@@ -52,8 +53,8 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            // tooltipTextWidth will update with wrapped text offsetWidth based on maxWidth prop
-            tooltipTextWidth: this.props.maxWidth,
+            // The width of toolttip's inner text
+            tooltipTextWidth: 0,
 
             // The width and height of the tooltip itself
             tooltipWidth: 0,
@@ -82,6 +83,14 @@ 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,
@@ -99,8 +108,7 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
             this.state.tooltipHeight,
             this.props.shiftHorizontal,
             this.props.shiftVertical,
-            this.state.tooltipTextWidth,
-            this.props.maxWidth,
+            wrapperWidth,
         );
         return ReactDOM.createPortal(
             <Animated.View

diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js
@@ -67,8 +67,7 @@ function computeHorizontalShift(windowWidth, xOffset, componentWidth, tooltipWid
  *                                         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} tooltipTextWidth - Tooltip's inner text width.
- * @param {Number} maxWidth -  Max-width for tooltip's wrapper.
+ * @param {Number} wrapperWidth - Calculated width for tooltip's wrapper
  * @returns {Object}
  */
 export default function getTooltipStyles(
@@ -82,8 +81,7 @@ export default function getTooltipStyles(
     tooltipHeight,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
-    tooltipTextWidth,
-    maxWidth,
+    wrapperWidth,
 ) {
     // 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,
@@ -113,15 +111,7 @@ export default function getTooltipStyles(
             ...tooltipVerticalPadding,
             ...spacing.ph2,
             zIndex: variables.tooltipzIndex,
-
-            // Generate wrapper's width using text's offsetWidth based on maxWidth prop
-            width: 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,
+            width: wrapperWidth,
 
             // Because it uses fixed positioning, the top-left corner of the tooltip is aligned
             // with the top-left corner of the window by default.