Merge pull request #2215 from Expensify/Rory-RenameOptionRowTitle

[No QA] Rename and cleanup OptionRowTitle

src/components/DisplayNames/displayNamesPropTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    // The full title of the DisplayNames component (not split up)
+    fullTitle: PropTypes.string,
+
+    // Array of objects that map display names to their corresponding tooltip
+    displayNamesWithTooltips: PropTypes.arrayOf(PropTypes.shape({
+        // The name to display in bold
+        displayName: PropTypes.string,
+
+        // The tooltip to show when the associated name is hovered
+        tooltip: PropTypes.string,
+    })),
+
+    // Number of lines before wrapping
+    numberOfLines: PropTypes.number,
+
+    // Is tooltip needed?
+    // When true, triggers complex title rendering
+    tooltipEnabled: PropTypes.bool,
+
+    // Arbitrary styles of the displayName text
+    textStyles: PropTypes.arrayOf(PropTypes.any),
+};
+
+const defaultProps = {
+    numberOfLines: 1,
+    tooltipEnabled: false,
+    titleStyles: [],
+};
+
+export {propTypes, defaultProps};

src/pages/home/sidebar/OptionRowTitle/index.js → src/components/DisplayNames/index.js

@@ -1,15 +1,11 @@
 import _ from 'underscore';
 import React, {Fragment, PureComponent} from 'react';
-import {
-    Text,
-    View,
-} from 'react-native';
-import {propTypes, defaultProps} from './OptionRowTitleProps';
-import styles from '../../../../styles/styles';
-import Tooltip from '../../../../components/Tooltip';
-import hasEllipsis from '../../../../libs/hasEllipsis';
+import {Text, View} from 'react-native';
+import {propTypes, defaultProps} from './displayNamesPropTypes';
+import styles from '../../styles/styles';
+import Tooltip from '../Tooltip';
 
-class OptionRowTitle extends PureComponent {
+class DisplayNames extends PureComponent {
     constructor(props) {
         super(props);
         this.containerRef = null;
@@ -23,15 +19,17 @@ class OptionRowTitle extends PureComponent {
 
     componentDidMount() {
         this.setState({
-            isEllipsisActive: this.containerRef && hasEllipsis(this.containerRef),
+            isEllipsisActive: this.containerRef
+                && this.containerRef.offsetWidth
+                && this.containerRef.scrollWidth
+                && this.containerRef.offsetWidth < this.containerRef.scrollWidth,
         });
     }
 
     /**
      * Set the container layout for post calculations
      *
      * @param {*} {nativeEvent}
-     * @memberof OptionRowTitle
      */
     setContainerLayout({nativeEvent}) {
         this.containerLayout = nativeEvent.layout;
@@ -44,11 +42,10 @@ class OptionRowTitle extends PureComponent {
      * So we shift it by calculating it as follows:
      * 1. We get the container layout and take the Child inline text node.
      * 2. Now we get the tooltip original position.
-     * 3. If inline node's right edge is overflowing the containe's right edge, we set the tooltip to the center
+     * 3. If inline node's right edge is overflowing the container's right edge, we set the tooltip to the center
      * of the distance between the left edge of the inline node and right edge of the container.
      * @param {Number} index Used to get the Ref to the node at the current index.
      * @returns {Number} Distance to shift the tooltip horizontally
-     * @memberof OptionRowTitle
      */
     getTooltipShiftX(index) {
         // Only shift when containerLayout or Refs to text node is available .
@@ -70,43 +67,48 @@ class OptionRowTitle extends PureComponent {
 
 
     render() {
-        const {
-            option, style, tooltipEnabled, numberOfLines,
-        } = this.props;
-
-        if (!tooltipEnabled) {
-            return <Text style={style} numberOfLines={numberOfLines}>{option.text}</Text>;
+        if (!this.props.tooltipEnabled) {
+            // No need for any complex text-splitting, just return a simple text component
+            return (
+                <Text
+                    style={this.props.textStyles}
+                    numberOfLines={this.props.numberOfLines}
+                >
+                    {this.props.fullTitle}
+                </Text>
+            );
         }
+
         return (
 
-            // Tokenization of string only support 1 numberofLines on Web
+            // Tokenization of string only support 1 numberOfLines on Web
             <Text
-                style={[style, styles.optionDisplayNameTooltipWrapper]}
+                style={[this.props.textStyles, styles.pRelative]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
                 ref={el => this.containerRef = el}
             >
-                {_.map(option.participantsList, (participant, index) => (
+                {_.map(this.props.displayNamesToTooltips, ({displayName, tooltip}, index) => (
                     <Fragment key={index}>
                         <Tooltip
                             key={index}
-                            text={participant.login}
+                            text={tooltip}
                             containerStyle={styles.dInline}
                             shiftHorizontal={() => this.getTooltipShiftX(index)}
                         >
                             {/*  // We need to get the refs to all the names which will be used to correct
                                  the horizontal position of the tooltip */}
                             <Text ref={el => this.childRefs[index] = el}>
-                                {participant.displayName}
+                                {displayName}
                             </Text>
                         </Tooltip>
-                        {index < option.participantsList.length - 1 && <Text>,&nbsp;</Text>}
+                        {index < this.props.displayNamesToTooltips.length - 1 && <Text>,&nbsp;</Text>}
                     </Fragment>
                 ))}
-                {option.participantsList.length > 1 && this.state.isEllipsisActive
+                {this.props.displayNamesToTooltips.length > 1 && this.state.isEllipsisActive
                     && (
-                        <View style={styles.optionDisplayNameTooltipEllipsis}>
-                            <Tooltip text={option.tooltipText}>
+                        <View style={styles.displayNameTooltipEllipsis}>
+                            <Tooltip text={this.props.fullTitle}>
                                 {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
                                 <Text>....</Text>
                             </Tooltip>
@@ -116,8 +118,8 @@ class OptionRowTitle extends PureComponent {
         );
     }
 }
-OptionRowTitle.propTypes = propTypes;
-OptionRowTitle.defaultProps = defaultProps;
-OptionRowTitle.displayName = 'OptionRowTitle';
+DisplayNames.propTypes = propTypes;
+DisplayNames.defaultProps = defaultProps;
+DisplayNames.displayName = 'DisplayNames';
 
-export default OptionRowTitle;
+export default DisplayNames;

src/components/DisplayNames/index.native.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {propTypes, defaultProps} from './displayNamesPropTypes';
+
+// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
+const DisplayNames = ({
+    fullTitle,
+    numberOfLines,
+    textStyles,
+}) => (
+    <Text style={textStyles} numberOfLines={numberOfLines}>
+        {fullTitle}
+    </Text>
+);
+
+DisplayNames.propTypes = propTypes;
+DisplayNames.defaultProps = defaultProps;
+DisplayNames.displayName = 'DisplayNames';
+
+export default DisplayNames;

src/pages/home/HeaderView.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
@@ -15,7 +16,7 @@ import MultipleAvatars from '../../components/MultipleAvatars';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import {getReportParticipantsTitle} from '../../libs/reportUtils';
-import OptionRowTitle from './sidebar/OptionRowTitle';
+import DisplayNames from '../../components/DisplayNames';
 import {getPersonalDetailsForLogins} from '../../libs/OptionsListUtils';
 import {participantPropTypes} from './sidebar/optionPropTypes';
 import VideoChatButtonAndMenu from '../../components/VideoChatButtonAndMenu';
@@ -53,11 +54,10 @@ const defaultProps = {
 
 const HeaderView = (props) => {
     const participants = lodashGet(props.report, 'participants', []);
-    const reportOption = {
-        text: lodashGet(props.report, 'reportName', ''),
-        tooltipText: getReportParticipantsTitle(participants),
-        participantsList: getPersonalDetailsForLogins(participants, props.personalDetails),
-    };
+    const displayNamesWithTooltips = _.map(
+        getPersonalDetailsForLogins(participants, props.personalDetails),
+        ({displayName, login}) => ({displayName, tooltip: login}),
+    );
 
     return (
         <View style={[styles.appContentHeader]} nativeID="drag-area">
@@ -92,11 +92,12 @@ const HeaderView = (props) => {
                                 secondAvatarStyle={[styles.secondAvatarHovered]}
                             />
                             <View style={[styles.flex1, styles.flexRow]}>
-                                <OptionRowTitle
-                                    option={reportOption}
+                                <DisplayNames
+                                    fullTitle={getReportParticipantsTitle(participants)}
+                                    displayNamesWithTooltips={displayNamesWithTooltips}
                                     tooltipEnabled
                                     numberOfLines={1}
-                                    style={[styles.headerText]}
+                                    textStyles={[styles.headerText]}
                                 />
                             </View>
                         </Pressable>

src/pages/home/report/ReportActionItem.js

@@ -110,7 +110,7 @@ class ReportActionItem extends Component {
                                     <ReportActionContextMenu
                                         isVisible
                                         reportID={-1}
-                                        reportAction={{}}
+                                        reportAction={this.props.action}
                                     />
                                 )}
                             >

src/pages/home/sidebar/OptionRow.js

@@ -14,7 +14,7 @@ import {Pencil, PinCircle, Checkmark} from '../../../components/Icon/Expensicons
 import MultipleAvatars from '../../../components/MultipleAvatars';
 import themeColors from '../../../styles/themes/default';
 import Hoverable from '../../../components/Hoverable';
-import OptionRowTitle from './OptionRowTitle';
+import DisplayNames from '../../../components/DisplayNames';
 import IOUBadge from '../../../components/IOUBadge';
 import colors from '../../../styles/colors';
 
@@ -109,6 +109,11 @@ const OptionRow = ({
         ? hoverStyle.backgroundColor
         : backgroundColor;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const displayNamesWithTooltips = _.map(
+        option.participantsList,
+        ({displayName, login}) => ({displayName, tooltip: login}),
+    );
+
     return (
         <Hoverable>
             {hovered => (
@@ -152,14 +157,13 @@ const OptionRow = ({
                                 )
                             }
                             <View style={contentContainerStyles}>
-                                <OptionRowTitle
-                                    option={option}
+                                <DisplayNames
+                                    fullTitle={option.text}
+                                    displayNamesWithTooltips={displayNamesWithTooltips}
                                     tooltipEnabled={showTitleTooltip}
                                     numberOfLines={1}
-                                    style={displayNameStyle}
-                                    reportID={option.reportID}
+                                    textStyles={displayNameStyle}
                                 />
-
                                 {option.alternateText ? (
                                     <Text
                                         style={alternateTextStyle}

src/styles/styles.js

@@ -14,6 +14,7 @@ import whiteSpace from './utilities/whiteSpace';
 import wordBreak from './utilities/wordBreak';
 import textInputAlignSelf from './utilities/textInputAlignSelf';
 import CONST from '../CONST';
+import positioning from './utilities/positioning';
 
 const styles = {
     // Add all of our utility and helper styles
@@ -22,6 +23,7 @@ const styles = {
     ...flex,
     ...display,
     ...overflow,
+    ...positioning,
     ...wordBreak,
     ...whiteSpace,
 
@@ -601,11 +603,7 @@ const styles = {
         flexShrink: 0,
     },
 
-    optionDisplayNameTooltipWrapper: {
-        position: 'relative',
-    },
-
-    optionDisplayNameTooltipEllipsis: {
+    displayNameTooltipEllipsis: {
         position: 'absolute',
         opacity: 0,
         right: 0,

src/styles/utilities/positioning.js

@@ -3,6 +3,9 @@
  * Everything is a multiple of 4 to coincide with the spacing utilities.
  */
 export default {
+    pRelative: {
+        position: 'relative',
+    },
     tn4: {
         top: -16,
     },