feat(selection-list): add tooltip

Expensify · Aug 28, 2023 · 8fc594b · 8fc594b
1 parent df510ff
commit 8fc594b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 24 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -242,8 +242,11 @@ function BaseSelectionList({
     };
 
     const renderItem = ({item, index, section}) => {
+        const normalizedIndex = index + lodashGet(section, 'indexOffset', 0);
         const isDisabled = section.isDisabled;
-        const isFocused = !isDisabled && focusedIndex === index + lodashGet(section, 'indexOffset', 0);
+        const isFocused = !isDisabled && focusedIndex === normalizedIndex;
+        // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
+        const showTooltip = normalizedIndex < 10;
 
         if (canSelectMultiple) {
             return (
@@ -252,6 +255,7 @@ function BaseSelectionList({
                     isFocused={isFocused}
                     onSelectRow={() => selectRow(item, index)}
                     onDismissError={onDismissError}
+                    showTooltip={showTooltip}
                 />
             );
         }
@@ -262,6 +266,7 @@ function BaseSelectionList({
                 isFocused={isFocused}
                 isDisabled={isDisabled}
                 onSelectRow={() => selectRow(item, index)}
+                showTooltip={showTooltip}
             />
         );
     };

diff --git a/src/components/SelectionList/CheckboxListItem.js b/src/components/SelectionList/CheckboxListItem.js
@@ -13,10 +13,39 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import themeColors from '../../styles/themes/default';
+import Tooltip from '../Tooltip';
+import UserDetailsTooltip from '../UserDetailsTooltip';
 
-function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError = () => {}}) {
+function CheckboxListItem({item, isFocused = false, showTooltip = false, onSelectRow, onDismissError = () => {}}) {
     const hasError = !_.isEmpty(item.errors);
 
+    const avatar = (
+        <Avatar
+            containerStyles={styles.pl5}
+            source={lodashGet(item, 'avatar.source', '')}
+            name={lodashGet(item, 'avatar.name', item.text)}
+            type={lodashGet(item, 'avatar.type', CONST.ICON_TYPE_AVATAR)}
+        />
+    );
+
+    const text = (
+        <Text
+            style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold]}
+            numberOfLines={1}
+        >
+            {item.text}
+        </Text>
+    );
+
+    const alternateText = (
+        <Text
+            style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+            numberOfLines={1}
+        >
+            {item.alternateText}
+        </Text>
+    );
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -53,29 +82,20 @@ function CheckboxListItem({item, isFocused = false, onSelectRow, onDismissError
                         />
                     )}
                 </View>
-                {Boolean(item.avatar) && (
-                    <Avatar
-                        containerStyles={styles.pl5}
-                        source={lodashGet(item, 'avatar.source', '')}
-                        name={lodashGet(item, 'avatar.name', item.text)}
-                        type={lodashGet(item, 'avatar.type', CONST.ICON_TYPE_AVATAR)}
-                    />
-                )}
-                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.pl3, styles.optionRow]}>
-                    <Text
-                        style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold]}
-                        numberOfLines={1}
-                    >
-                        {item.text}
-                    </Text>
-                    {Boolean(item.alternateText) && (
-                        <Text
-                            style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
-                            numberOfLines={1}
+                {Boolean(item.avatar) &&
+                    (showTooltip ? (
+                        <UserDetailsTooltip
+                            accountID={item.accountID}
+                            shiftHorizontal={styles.pl5.paddingLeft / 2}
                         >
-                            {item.alternateText}
-                        </Text>
-                    )}
+                            <View>{avatar}</View>
+                        </UserDetailsTooltip>
+                    ) : (
+                        avatar
+                    ))}
+                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.pl3, styles.optionRow]}>
+                    {showTooltip ? <Tooltip text={item.text}>{text}</Tooltip> : text}
+                    {Boolean(item.alternateText) && (showTooltip ? <Tooltip text={item.alternateText}>{alternateText}</Tooltip> : alternateText)}
                 </View>
                 {Boolean(item.rightElement) && item.rightElement}
             </PressableWithFeedback>

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
@@ -46,6 +46,9 @@ const checkboxListItemPropTypes = {
     /** Whether this item is focused (for arrow key controls) */
     isFocused: PropTypes.bool,
 
+    /** Whether this item should show Tooltip */
+    showTooltip: PropTypes.bool,
+
     /** Callback to fire when the item is pressed */
     onSelectRow: PropTypes.func.isRequired,
 

diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
@@ -307,6 +307,7 @@ function WorkspaceMembersPage(props) {
 
             result.push({
                 keyForList: accountID,
+                accountID,
                 isSelected: _.contains(selectedEmployees, Number(accountID)),
                 isDisabled: accountID === props.session.accountID || details.login === props.policy.owner || policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                 text: props.formatPhoneNumber(details.displayName),