render emojis as EmojiWithTooltip instead of Text to keep emoji tooltip

Expensify · Apr 20, 2024 · 6b0d2d6 · 6b0d2d6
1 parent 4fe6841
commit 6b0d2d6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
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 renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
+import renderEmojis from './renderEmojis';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 import WrappedText from './WrappedText';
 
 function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);
+    const {elements, hasLargeStyle} = renderEmojis(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer

diff --git a/src/components/InlineCodeBlock/index.tsx b/src/components/InlineCodeBlock/index.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
-import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
+import renderEmojis from './renderEmojis';
 import type InlineCodeBlockProps from './types';
 import type {TTextOrTPhrasing} from './types';
 
 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} = renderEmojis(defaultRendererProps, styles);
 
     return (
         <TDefaultRenderer

diff --git a/...odeBlock/renderEmojisAsTextComponents.tsx → ...mponents/InlineCodeBlock/renderEmojis.tsx b/...odeBlock/renderEmojisAsTextComponents.tsx → ...mponents/InlineCodeBlock/renderEmojis.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import type {TDefaultRendererProps} from 'react-native-render-html';
-import Text from '@components/Text';
+import EmojiWithTooltip from '@components/EmojiWithTooltip';
 import type {ThemeStyles} from '@styles/index';
 import type {TTextOrTPhrasing} from './types';
 
-function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
+function renderEmojis(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
     const elements: Array<string | React.JSX.Element> = [];
     let hasLargeStyle = false;
 
@@ -28,12 +28,11 @@ function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProp
                 hasLargeStyle = true;
             }
             elements.push(
-                <Text
-                    style={[largeStyle, styles.emojiDefault]}
+                <EmojiWithTooltip
+                    style={[styles.cursorDefault, largeStyle, styles.emojiDefault]}
                     key={child.data}
-                >
-                    {child.data}
-                </Text>,
+                    emojiCode={child.data}
+                />,
             );
         } else {
             elements.push(child.data);
@@ -43,4 +42,4 @@ function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProp
     return {elements, hasLargeStyle};
 }
 
-export default renderEmojisAsTextComponents;
+export default renderEmojis;