From bb2886307eb4f2276df271b246a1fabd52bcd04a Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 31 Jan 2024 16:38:02 +0700
Subject: [PATCH] fix: 34961

---
 .../SelectionList/RadioListItem.tsx           | 31 ++++----------
 src/components/SelectionList/UserListItem.tsx | 31 ++++----------
 .../TextWithTooltip/index.native.tsx          | 18 ++++++++
 src/components/TextWithTooltip/index.tsx      | 41 +++++++++++++++++++
 src/components/TextWithTooltip/types.ts       |  9 ++++
 5 files changed, 86 insertions(+), 44 deletions(-)
 create mode 100644 src/components/TextWithTooltip/index.native.tsx
 create mode 100644 src/components/TextWithTooltip/index.tsx
 create mode 100644 src/components/TextWithTooltip/types.ts

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index 769eaa80df4b..ca0ae859c3ad 100644
--- 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
index 3c973ad0bbea..11ef03bec33d 100644
--- 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.alignItemsStart, 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
new file mode 100644
index 000000000000..f8013ae00e4c
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..fd202db8de64
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..80517b0b2acf
--- /dev/null
+++ 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;