Merge pull request #42801 from ShridharGoel/magic-lhn

Align inline icons with text in Android LHN
Expensify · Jun 14, 2024 · 07b6b24 · 07b6b24
2 parents f0b6355 + b3523c9
commit 07b6b24
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 29 deletions.
diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx
@@ -10,7 +10,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import LottieAnimations from '@components/LottieAnimations';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
-import Text from '@components/Text';
+import TextBlock from '@components/TextBlock';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
@@ -61,36 +61,52 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
 
     const emptyLHNSubtitle = useMemo(
         () => (
-            <View>
-                <Text
-                    color={theme.placeholderText}
-                    style={[styles.textAlignCenter]}
-                >
-                    {translate('common.emptyLHN.subtitleText1')}
-                    <Icon
-                        src={Expensicons.MagnifyingGlass}
-                        width={variables.emptyLHNIconWidth}
-                        height={variables.emptyLHNIconHeight}
-                        small
-                        inline
-                        fill={theme.icon}
-                        additionalStyles={styles.alignItemsCenter}
-                    />
-                    {translate('common.emptyLHN.subtitleText2')}
-                    <Icon
-                        src={Expensicons.Plus}
-                        width={variables.emptyLHNIconWidth}
-                        height={variables.emptyLHNIconHeight}
-                        small
-                        inline
-                        fill={theme.icon}
-                        additionalStyles={styles.alignItemsCenter}
-                    />
-                    {translate('common.emptyLHN.subtitleText3')}
-                </Text>
+            <View style={[styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter]}>
+                <TextBlock
+                    color={theme.textSupporting}
+                    textStyles={[styles.textAlignCenter, styles.textNormal]}
+                    text={translate('common.emptyLHN.subtitleText1')}
+                />
+                <Icon
+                    src={Expensicons.MagnifyingGlass}
+                    width={variables.emptyLHNIconWidth}
+                    height={variables.emptyLHNIconHeight}
+                    fill={theme.icon}
+                    small
+                    additionalStyles={styles.mh1}
+                />
+                <TextBlock
+                    color={theme.textSupporting}
+                    textStyles={[styles.textAlignCenter, styles.textNormal]}
+                    text={translate('common.emptyLHN.subtitleText2')}
+                />
+                <Icon
+                    src={Expensicons.Plus}
+                    width={variables.emptyLHNIconWidth}
+                    height={variables.emptyLHNIconHeight}
+                    fill={theme.icon}
+                    small
+                    additionalStyles={styles.mh1}
+                />
+                <TextBlock
+                    color={theme.textSupporting}
+                    textStyles={[styles.textAlignCenter, styles.textNormal]}
+                    text={translate('common.emptyLHN.subtitleText3')}
+                />
             </View>
         ),
-        [theme, styles.alignItemsCenter, styles.textAlignCenter, translate],
+        [
+            styles.alignItemsCenter,
+            styles.flexRow,
+            styles.justifyContentCenter,
+            styles.flexWrap,
+            styles.textAlignCenter,
+            styles.mh1,
+            theme.icon,
+            theme.textSupporting,
+            styles.textNormal,
+            translate,
+        ],
     );
 
     /**

diff --git a/src/components/TextBlock.tsx b/src/components/TextBlock.tsx
@@ -0,0 +1,39 @@
+/**
+ * TextBlock component splits a given text into individual words and displays
+ * each word within a Text component.
+ */
+import React, {memo, useMemo} from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
+import Text from './Text';
+
+type TextBlockProps = {
+    /** The color of the text */
+    color?: string;
+
+    /** Styles to apply to each text word */
+    textStyles?: StyleProp<TextStyle>;
+
+    /** The full text to be split into words */
+    text: string;
+};
+
+function TextBlock({color, textStyles, text}: TextBlockProps) {
+    const words = useMemo(() => text.match(/(\S+\s*)/g) ?? [], [text]);
+
+    return (
+        <>
+            {words.map((word) => (
+                <Text
+                    color={color}
+                    style={textStyles}
+                >
+                    {word}
+                </Text>
+            ))}
+        </>
+    );
+}
+
+TextBlock.displayName = 'TextBlock';
+
+export default memo(TextBlock);