Merge pull request #32532 from abzokhattab/truncate-long-items-in-the…

…-selectionlist Truncate long items in the SelectionList
Expensify · Dec 8, 2023 · 2aab3e8 · 2aab3e8
2 parents 9aba09a + b1a49ed
commit 2aab3e8
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
@@ -86,7 +86,13 @@ function BaseListItem({
                     )}
                     <ListItem
                         item={item}
-                        isFocused={isFocused}
+                        textStyles={[
+                            styles.optionDisplayName,
+                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                            isUserItem || item.isSelected ? styles.sidebarLinkTextBold : null,
+                            styles.pre,
+                        ]}
+                        alternateTextStyles={[styles.optionAlternateText, styles.textLabelSupporting, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.pre]}
                         isDisabled={isDisabled}
                         onSelectRow={onSelectRow}
                         showTooltip={showTooltip}

diff --git a/src/components/SelectionList/RadioListItem.js b/src/components/SelectionList/RadioListItem.js
@@ -1,17 +1,38 @@
 import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@styles/useThemeStyles';
 import {radioListItemPropTypes} from './selectionListPropTypes';
 
-function RadioListItem({item, isFocused = false}) {
+function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}) {
     const styles = useThemeStyles();
     return (
         <View style={[styles.flex1, styles.alignItemsStart]}>
-            <Text style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, item.isSelected && styles.sidebarLinkTextBold]}>{item.text}</Text>
+            <Tooltip
+                shouldRender={showTooltip}
+                text={item.text}
+            >
+                <Text
+                    style={textStyles}
+                    numberOfLines={1}
+                >
+                    {item.text}
+                </Text>
+            </Tooltip>
 
             {Boolean(item.alternateText) && (
-                <Text style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}>{item.alternateText}</Text>
+                <Tooltip
+                    shouldRender={showTooltip}
+                    text={item.alternateText}
+                >
+                    <Text
+                        style={alternateTextStyles}
+                        numberOfLines={1}
+                    >
+                        {item.alternateText}
+                    </Text>
+                </Tooltip>
             )}
         </View>
     );

diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
@@ -7,7 +7,7 @@ import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@styles/useThemeStyles';
 import {userListItemPropTypes} from './selectionListPropTypes';
 
-function UserListItem({item, isFocused = false, showTooltip}) {
+function UserListItem({item, textStyles, alternateTextStyles, showTooltip}) {
     const styles = useThemeStyles();
     return (
         <>
@@ -24,7 +24,7 @@ function UserListItem({item, isFocused = false, showTooltip}) {
                     text={item.text}
                 >
                     <Text
-                        style={[styles.optionDisplayName, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold]}
+                        style={textStyles}
                         numberOfLines={1}
                     >
                         {item.text}
@@ -36,7 +36,7 @@ function UserListItem({item, isFocused = false, showTooltip}) {
                         text={item.alternateText}
                     >
                         <Text
-                            style={[isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                            style={alternateTextStyles}
                             numberOfLines={1}
                         >
                             {item.alternateText}

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
@@ -6,6 +6,12 @@ const commonListItemPropTypes = {
     /** Whether this item is focused (for arrow key controls) */
     isFocused: PropTypes.bool,
 
+    /** Style to be applied to Text */
+    textStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Style to be applied on the alternate text */
+    alternateTextStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Whether this item is disabled */
     isDisabled: PropTypes.bool,