Move renderEmojisAsTextComponents to a new file

Expensify · Apr 20, 2024 · dcccca4 · dcccca4
1 parent 06e0038
commit dcccca4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 43 deletions.
diff --git a/src/components/InlineCodeBlock/getCurrentData.ts b/src/components/InlineCodeBlock/getCurrentData.ts
diff --git 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
@@ -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
@@ -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 };
+}