From dcccca48aa65052ad6136cb2c17493d1ff5f7cc9 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 20 Apr 2024 07:55:04 +0700
Subject: [PATCH] Move renderEmojisAsTextComponents to a new file

---
 .../InlineCodeBlock/getCurrentData.ts         | 11 -------
 .../InlineCodeBlock/index.native.tsx          |  8 ++---
 src/components/InlineCodeBlock/index.tsx      | 30 ++---------------
 .../renderEmojisAsTextComponents.tsx          | 32 +++++++++++++++++++
 4 files changed, 38 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/InlineCodeBlock/getCurrentData.ts
 create mode 100644 src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx

diff --git a/src/components/InlineCodeBlock/getCurrentData.ts b/src/components/InlineCodeBlock/getCurrentData.ts
deleted file mode 100644
index 591ec74c885d..000000000000
--- a/src/components/InlineCodeBlock/getCurrentData.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {TDefaultRendererProps} from 'react-native-render-html';
-import type {TTextOrTPhrasing} from './types';
-
-// Create a temporary solution to display when there are emojis in the inline code block
-// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed
-export default function getCurrentData(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string {
-    if ('data' in defaultRendererProps.tnode) {
-        return defaultRendererProps.tnode.data;
-    }
-    return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join('');
-}
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 1c8a1bea4312..fe7bfba62947 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getCurrentData from './getCurrentData';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
+import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const data = getCurrentData(defaultRendererProps);
+    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
 
     return (
         <TDefaultRenderer
@@ -16,9 +16,9 @@ function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer,
         >
             <WrappedText
                 textStyles={textStyle}
-                wordStyles={[boxModelStyle, styles.codeWordStyle]}
+                wordStyles={[boxModelStyle, styles.codeWordStyle, hasLargeStyle ? styles.onlyEmojisText : {}]}
             >
-                {data}
+                {elements}
             </WrappedText>
         </TDefaultRenderer>
     );
diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
index 4dfe30032d47..f092e41fd3fb 100644
--- a/src/components/InlineCodeBlock/index.tsx
+++ b/src/components/InlineCodeBlock/index.tsx
@@ -4,39 +4,13 @@ import Text from '@components/Text';
 import type InlineCodeBlockProps from './types';
 import type { TTextOrTPhrasing } from './types';
 import useThemeStyles from '@hooks/useThemeStyles';
-import { TDefaultRendererProps } from 'react-native-render-html';
-import { ThemeStyles } from '@styles/index';
-
-function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
-    const elements: (string | React.JSX.Element)[] = [];
-    
-    let hasLargeStyle = false;
-    if ('data' in defaultRendererProps.tnode) {
-        elements.push(defaultRendererProps.tnode.data);
-    } else if (defaultRendererProps.tnode.children) {
-        defaultRendererProps.tnode.children.forEach((child) => {
-            if ('data' in child) {
-                if (child.tagName === 'emoji') {
-                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
-                    if (Object.keys(largeStyle).length > 0) {
-                        hasLargeStyle = true;
-                    }
-                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
-                } else {
-                    elements.push(child.data);
-                }
-            }
-        });
-    }
-
-    return { elements, hasLargeStyle };
-}
+import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({ TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle }: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
     const flattenTextStyle = StyleSheet.flatten(textStyle);
     const { textDecorationLine, ...textStyles } = flattenTextStyle;
-    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps, styles);
+    const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
 
     return (
         <TDefaultRenderer
diff --git a/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
new file mode 100644
index 000000000000..6c6c97636e11
--- /dev/null
+++ b/src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Text from '@components/Text';
+import type { TTextOrTPhrasing } from './types';
+import { TDefaultRendererProps } from 'react-native-render-html';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+
+export function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>) {
+    const elements: (string | React.JSX.Element)[] = [];
+    const styles = useThemeStyles();
+
+    let hasLargeStyle = false;
+    if ('data' in defaultRendererProps.tnode) {
+        elements.push(defaultRendererProps.tnode.data);
+    } else if (defaultRendererProps.tnode.children) {
+        defaultRendererProps.tnode.children.forEach((child) => {
+            if ('data' in child) {
+                if (child.tagName === 'emoji') {
+                    const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
+                    if (Object.keys(largeStyle).length > 0) {
+                        hasLargeStyle = true;
+                    }
+                    elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
+                } else {
+                    elements.push(child.data);
+                }
+            }
+        });
+    }
+
+    return { elements, hasLargeStyle };
+}