Merge pull request #35460 from tienifr/fix/34961

Fix: Web - Settings - The same text is also displayed as tooltips
Expensify · Feb 5, 2024 · e37afd2 · e37afd2
2 parents e287420 + a9adf81
commit e37afd2
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 44 deletions.
diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
+import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {RadioListItemProps} from './types';
 
@@ -10,30 +9,18 @@ function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: Rad
 
     return (
         <View style={[styles.flex1, styles.alignItemsStart]}>
-            <Tooltip
-                shouldRender={showTooltip}
+            <TextWithTooltip
+                shouldShowTooltip={showTooltip}
                 text={item.text}
-            >
-                <Text
-                    style={textStyles}
-                    numberOfLines={1}
-                >
-                    {item.text}
-                </Text>
-            </Tooltip>
+                textStyles={textStyles}
+            />
 
             {!!item.alternateText && (
-                <Tooltip
-                    shouldRender={showTooltip}
+                <TextWithTooltip
+                    shouldShowTooltip={showTooltip}
                     text={item.alternateText}
-                >
-                    <Text
-                        style={alternateTextStyles}
-                        numberOfLines={1}
-                    >
-                        {item.alternateText}
-                    </Text>
-                </Tooltip>
+                    textStyles={alternateTextStyles}
+                />
             )}
         </View>
     );

diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import SubscriptAvatar from '@components/SubscriptAvatar';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
+import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {UserListItemProps} from './types';
 
@@ -18,29 +17,17 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style
                 />
             )}
             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
-                <Tooltip
-                    shouldRender={showTooltip}
+                <TextWithTooltip
+                    shouldShowTooltip={showTooltip}
                     text={item.text}
-                >
-                    <Text
-                        style={[textStyles, style]}
-                        numberOfLines={1}
-                    >
-                        {item.text}
-                    </Text>
-                </Tooltip>
+                    textStyles={[textStyles, style]}
+                />
                 {!!item.alternateText && (
-                    <Tooltip
-                        shouldRender={showTooltip}
+                    <TextWithTooltip
+                        shouldShowTooltip={showTooltip}
                         text={item.alternateText}
-                    >
-                        <Text
-                            style={[alternateTextStyles, style]}
-                            numberOfLines={1}
-                        >
-                            {item.alternateText}
-                        </Text>
-                    </Tooltip>
+                        textStyles={[alternateTextStyles, style]}
+                    />
                 )}
             </View>
             {!!item.rightElement && item.rightElement}

diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Text from '@components/Text';
+import type TextWithTooltipProps from './types';
+
+function TextWithTooltip({text, textStyles}: TextWithTooltipProps) {
+    return (
+        <Text
+            style={textStyles}
+            numberOfLines={1}
+        >
+            {text}
+        </Text>
+    );
+}
+
+TextWithTooltip.displayName = 'TextWithTooltip';
+
+export default TextWithTooltip;
diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx
@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import type TextWithTooltipProps from './types';
+
+type LayoutChangeEvent = {
+    target: HTMLElement;
+};
+
+function TextWithTooltip({text, shouldShowTooltip, textStyles}: TextWithTooltipProps) {
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    return (
+        <Tooltip
+            shouldRender={showTooltip}
+            text={text}
+        >
+            <Text
+                style={textStyles}
+                numberOfLines={1}
+                onLayout={(e) => {
+                    const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
+                    if (!shouldShowTooltip) {
+                        return;
+                    }
+                    if (target.scrollWidth > target.offsetWidth) {
+                        setShowTooltip(true);
+                        return;
+                    }
+                    setShowTooltip(false);
+                }}
+            >
+                {text}
+            </Text>
+        </Tooltip>
+    );
+}
+
+TextWithTooltip.displayName = 'TextWithTooltip';
+
+export default TextWithTooltip;
diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts
@@ -0,0 +1,9 @@
+import type {StyleProp, TextStyle} from 'react-native';
+
+type TextWithTooltipProps = {
+    text: string;
+    shouldShowTooltip: boolean;
+    textStyles?: StyleProp<TextStyle>;
+};
+
+export default TextWithTooltipProps;