wip: update text and emoji splitting logic and messages layout fixes

Expensify · Apr 3, 2024 · 13182fd · 13182fd
1 parent a9024b4
commit 13182fd
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 33 deletions.
diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
@@ -653,18 +653,33 @@ const splitTextWithEmojis = (text: string): string[] => {
         increment = 0;
     }
 
-    tmpResult.forEach((char: string) => {
-        // @ts-expect-error -- we are looping through previously processed array so at execution time object will not be undefined
-        if (char.codePointAt(0) <= 0xffff) {
+    for (let j = 0; j <= tmpResult.length; j++) {
+        if (!tmpResult[j]?.codePointAt(0)) {
+            // eslint-disable-next-line no-continue -- prevent error for empty chars
+            continue;
+        }
+        if (tmpResult[j] === ' ') {
+            tmpString += tmpResult[j];
+            processedArray.push(tmpString);
+            tmpString = '';
+            // eslint-disable-next-line no-continue -- skip rest of the checks in current iteration
+            continue;
+        }
+        // @ts-expect-error -- ensured in 1st 'if' that object won't be undefined
+        if (tmpResult[j].codePointAt(0) <= 0xffff) {
             // is BMP character
-            tmpString += char;
+            tmpString += tmpResult[j];
+            if (j === tmpResult.length - 1) {
+                processedArray.push(tmpString);
+            }
         } else {
             processedArray.push(tmpString);
-            processedArray.push(char);
+            processedArray.push(tmpResult[j]);
             tmpString = '';
         }
-    });
-    return processedArray;
+    }
+    // remove empty characters from array
+    return processedArray.filter((item) => item);
 };
 
 export {

diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -86,37 +86,40 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
                     passedStyles={style}
                     styleAsDeleted={styleAsDeleted}
                     styleAsMuted={styleAsMuted}
+                    isEdited={fragment.isEdited}
                 />
             ) : (
-                <Text
-                    style={[
-                        textContainsOnlyEmojis ? styles.onlyEmojisText : undefined,
-                        styles.ltr,
-                        style,
-                        styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
-                        styleAsMuted ? styles.colorMuted : undefined,
-                        !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone,
-                    ]}
-                >
-                    {message}
-                </Text>
-            )}
-
-            {fragment.isEdited && (
                 <>
                     <Text
-                        style={[textContainsOnlyEmojis && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
-                        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-                    >
-                        {' '}
-                    </Text>
-                    <Text
-                        fontSize={variables.fontSizeSmall}
-                        color={theme.textSupporting}
-                        style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedback.deleted, style]}
+                        style={[
+                            textContainsOnlyEmojis ? styles.onlyEmojisText : undefined,
+                            styles.ltr,
+                            style,
+                            styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
+                            styleAsMuted ? styles.colorMuted : undefined,
+                            !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone,
+                        ]}
                     >
-                        {translate('reportActionCompose.edited')}
+                        {message}
                     </Text>
+
+                    {fragment.isEdited && (
+                        <>
+                            <Text
+                                style={[textContainsOnlyEmojis && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
+                                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                            >
+                                {' '}
+                            </Text>
+                            <Text
+                                fontSize={variables.fontSizeSmall}
+                                color={theme.textSupporting}
+                                style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedback.deleted, style]}
+                            >
+                                {translate('reportActionCompose.edited')}
+                            </Text>
+                        </>
+                    )}
                 </>
             )}
         </Text>

diff --git a/src/pages/home/report/comment/TextWithEmojiFragment.tsx b/src/pages/home/report/comment/TextWithEmojiFragment.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import {splitTextWithEmojis} from '@libs/EmojiUtils';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type ComponentProps = {
@@ -14,9 +17,12 @@ type ComponentProps = {
     styleAsDeleted?: boolean;
     styleAsMuted?: boolean;
     isSmallScreenWidth?: boolean;
+    isEdited?: boolean;
 };
-function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth}: ComponentProps) {
+function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited}: ComponentProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const theme = useTheme();
     const processedTextArray = splitTextWithEmojis(text);
 
     return (
@@ -38,6 +44,24 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl
                     </Text>
                 ),
             )}
+
+            {isEdited && (
+                <>
+                    <Text
+                        style={[textContainsOnlyEmojis && styles.onlyEmojisTextLineHeight, styles.userSelectNone]}
+                        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                    >
+                        {' '}
+                    </Text>
+                    <Text
+                        fontSize={variables.fontSizeSmall}
+                        color={theme.textSupporting}
+                        style={[styles.editedLabelStyles, styleAsDeleted && styles.offlineFeedback.deleted, passedStyles]}
+                    >
+                        {translate('reportActionCompose.edited')}
+                    </Text>
+                </>
+            )}
         </View>
     );
 }