7486 reduce tooltip over group

src/components/MultipleAvatars.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {Image, View} from 'react-native';
 import _ from 'underscore';
 import styles from '../styles/styles';
+import variables from '../styles/variables';
 import Avatar from './Avatar';
 import Tooltip from './Tooltip';
 import Text from './Text';
@@ -80,7 +81,7 @@ const MultipleAvatars = (props) => {
                             />
                         </Tooltip>
                     ) : (
-                        <Tooltip text={props.avatarTooltips.slice(1).join(', ')} absolute>
+                        <Tooltip text={props.avatarTooltips.slice(1).join(', ')} absolute numberOfLines={3} maxWidth={variables.sideBarWidth}>
                             <View
                                 style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}
                             >

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -1,4 +1,4 @@
-import React, {memo} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {Animated, View} from 'react-native';
 import ReactDOM from 'react-dom';
@@ -25,12 +25,6 @@ const propTypes = {
     /** The Height of the tooltip wrapper */
     wrapperHeight: PropTypes.number.isRequired,
 
-    /** The width of the tooltip itself */
-    tooltipWidth: PropTypes.number.isRequired,
-
-    /** The Height of the tooltip itself */
-    tooltipHeight: 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. */
     shiftHorizontal: PropTypes.number.isRequired,
@@ -39,59 +33,102 @@ const propTypes = {
     A positive value shifts the tooltip down, and a negative value shifts it up. */
     shiftVertical: PropTypes.number.isRequired,
 
-    /** Callback to set the Ref to the Tooltip */
-    setTooltipRef: PropTypes.func.isRequired,
-
     /** Text to be shown in the tooltip */
     text: PropTypes.string.isRequired,
 
-    /** Callback to be used to calulate the width and height of tooltip */
-    measureTooltip: PropTypes.func.isRequired,
-};
+    /** Number of pixels to set max-width on tooltip  */
+    maxWidth: PropTypes.number,
+
+    /** Maximum number of lines to set on tooltip */
+    numberOfLines: PropTypes.number,
 
-const defaultProps = {};
-
-const TooltipRenderedOnPageBody = (props) => {
-    const {
-        animationStyle,
-        tooltipWrapperStyle,
-        tooltipTextStyle,
-        pointerWrapperStyle,
-        pointerStyle,
-    } = getTooltipStyles(
-        props.animation,
-        props.windowWidth,
-        props.xOffset,
-        props.yOffset,
-        props.wrapperWidth,
-        props.wrapperHeight,
-        props.tooltipWidth,
-        props.tooltipHeight,
-        props.shiftHorizontal,
-        props.shiftVertical,
-    );
-    return ReactDOM.createPortal(
-        <Animated.View
-            ref={props.setTooltipRef}
-            onLayout={props.measureTooltip}
-            style={[tooltipWrapperStyle, animationStyle]}
-        >
-            <Text style={tooltipTextStyle} numberOfLines={1}>{props.text}</Text>
-            <View style={pointerWrapperStyle}>
-                <View style={pointerStyle} />
-            </View>
-        </Animated.View>,
-        document.querySelector('body'),
-    );
 };
 
-TooltipRenderedOnPageBody.propTypes = propTypes;
-TooltipRenderedOnPageBody.defaultProps = defaultProps;
-TooltipRenderedOnPageBody.displayName = 'TooltipRenderedOnPageBody';
+const defaultProps = {
+    maxWidth: undefined,
+    numberOfLines: undefined,
+};
 
 // Props will change frequently.
 // On every tooltip hover, we update the position in state which will result in re-rendering.
 // We also update the state on layout changes which will be triggered often.
 // There will be n number of tooltip components in the page.
 // Its good to memorize this one.
-export default memo(TooltipRenderedOnPageBody);
+class TooltipRenderedOnPageBody extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Set maxWidth as initial so we can get width of word wrapped text
+            tooltipTextWidth: this.props.maxWidth,
+
+            // The width and height of the tooltip itself
+            tooltipWidth: 0,
+            tooltipHeight: 0,
+        };
+
+        this.measureTooltip = this.measureTooltip.bind(this);
+    }
+
+    componentDidMount() {
+        if (!this.props.maxWidth) {
+            return;
+        }
+        this.setState({
+            tooltipTextWidth: this.textRef.offsetWidth,
+        });
+    }
+
+    /**
+     * Measure the size of the tooltip itself.
+     *
+     * @param {Object} nativeEvent
+     */
+    measureTooltip({nativeEvent}) {
+        this.setState({
+            tooltipWidth: nativeEvent.layout.width,
+            tooltipHeight: nativeEvent.layout.height,
+        });
+    }
+
+    render() {
+        const {
+            animationStyle,
+            tooltipWrapperStyle,
+            tooltipTextStyle,
+            pointerWrapperStyle,
+            pointerStyle,
+        } = getTooltipStyles(
+            this.props.animation,
+            this.props.windowWidth,
+            this.props.xOffset,
+            this.props.yOffset,
+            this.props.wrapperWidth,
+            this.props.wrapperHeight,
+            this.state.tooltipWidth,
+            this.state.tooltipHeight,
+            this.props.shiftHorizontal,
+            this.props.shiftVertical,
+            this.state.tooltipTextWidth,
+            this.props.maxWidth,
+        );
+        return ReactDOM.createPortal(
+            <Animated.View
+                onLayout={this.measureTooltip}
+                style={[tooltipWrapperStyle, animationStyle]}
+            >
+                <Text numberOfLines={this.props.numberOfLines} style={tooltipTextStyle}>
+                    <Text style={tooltipTextStyle} ref={ref => this.textRef = ref}>{this.props.text}</Text>
+                </Text>
+                <View style={pointerWrapperStyle}>
+                    <View style={pointerStyle} />
+                </View>
+            </Animated.View>,
+            document.querySelector('body'),
+        );
+    }
+}
+
+TooltipRenderedOnPageBody.propTypes = propTypes;
+TooltipRenderedOnPageBody.defaultProps = defaultProps;
+
+export default TooltipRenderedOnPageBody;

src/components/Tooltip/index.js

@@ -26,24 +26,17 @@ class Tooltip extends PureComponent {
             wrapperWidth: 0,
             wrapperHeight: 0,
 
-            // The width and height of the tooltip itself
-            tooltipWidth: 0,
-            tooltipHeight: 0,
         };
 
         // The wrapper view containing the wrapped content along with the Tooltip itself.
         this.wrapperView = null;
 
-        // The tooltip (popover) itself.
-        this.tooltip = null;
-
         // Whether the tooltip is first tooltip to activate the TooltipSense
         this.isTooltipSenseInitiator = false;
         this.shouldStartShowAnimation = false;
         this.animation = new Animated.Value(0);
 
         this.getWrapperPosition = this.getWrapperPosition.bind(this);
-        this.measureTooltip = this.measureTooltip.bind(this);
         this.showTooltip = this.showTooltip.bind(this);
         this.hideTooltip = this.hideTooltip.bind(this);
     }
@@ -86,18 +79,6 @@ class Tooltip extends PureComponent {
         }));
     }
 
-    /**
-     * Measure the size of the tooltip itself.
-     *
-     * @param {Object} nativeEvent
-     */
-    measureTooltip({nativeEvent}) {
-        this.setState({
-            tooltipWidth: nativeEvent.layout.width,
-            tooltipHeight: nativeEvent.layout.height,
-        });
-    }
-
     /**
      * Display the tooltip in an animation.
      */
@@ -200,13 +181,11 @@ class Tooltip extends PureComponent {
                         yOffset={this.state.yOffset}
                         wrapperWidth={this.state.wrapperWidth}
                         wrapperHeight={this.state.wrapperHeight}
-                        tooltipWidth={this.state.tooltipWidth}
-                        tooltipHeight={this.state.tooltipHeight}
-                        setTooltipRef={el => this.tooltip = el}
                         shiftHorizontal={_.result(this.props, 'shiftHorizontal')}
                         shiftVertical={_.result(this.props, 'shiftVertical')}
-                        measureTooltip={this.measureTooltip}
                         text={this.props.text}
+                        maxWidth={this.props.maxWidth}
+                        numberOfLines={this.props.numberOfLines}
                     />
                 )}
                 <Hoverable

src/components/Tooltip/tooltipPropTypes.js

@@ -24,6 +24,13 @@ const propTypes = {
     /** Any additional amount to manually adjust the vertical position of the tooltip.
     A positive value shifts the tooltip down, and a negative value shifts it up. */
     shiftVertical: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+
+    /** Number of pixels to set max-width on tooltip  */
+    maxWidth: PropTypes.number,
+
+    /** Maximum number of lines to set on tooltip */
+    numberOfLines: PropTypes.number,
+
 };
 
 const defaultProps = {
@@ -32,6 +39,8 @@ const defaultProps = {
     shiftVertical: 0,
     containerStyles: [],
     text: '',
+    maxWidth: undefined,
+    numberOfLines: undefined,
 };
 
 export {

src/styles/getTooltipStyles.js

@@ -67,6 +67,8 @@ 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
  * @returns {Object}
  */
 export default function getTooltipStyles(
@@ -80,6 +82,8 @@ export default function getTooltipStyles(
     tooltipHeight,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
+    tooltipTextWidth,
+    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,
@@ -109,6 +113,11 @@ export default function getTooltipStyles(
             ...tooltipVerticalPadding,
             ...spacing.ph2,
             zIndex: variables.tooltipzIndex,
+            maxWidth: tooltipTextWidth >= maxWidth
+                ? maxWidth
+
+                // Sum left and right padding
+                : tooltipTextWidth + (spacing.ph2.paddingHorizontal * 2),
 
             // Because it uses fixed positioning, the top-left corner of the tooltip is aligned
             // with the top-left corner of the window by default.
@@ -144,6 +153,8 @@ export default function getTooltipStyles(
             color: themeColors.textReversed,
             fontFamily: fontFamily.GTA,
             fontSize: tooltipFontSize,
+            overflowWrap: 'normal',
+            overflow: 'hidden',
         },
         pointerWrapperStyle: {
             position: 'fixed',