Merge pull request #32477 from VickyStash/ts-migration/inlineCodeBloc…

…k-component

[TS migration] Migrate 'InlineCodeBlock' component to TypeScript

src/components/InlineCodeBlock/WrappedText.tsx

@@ -0,0 +1,66 @@
+import React, {Fragment} from 'react';
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import Text from '@components/Text';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type WrappedTextProps = ChildrenProps & {
+    /** Style to be applied to Text */
+    textStyles?: StyleProp<TextStyle>;
+
+    /**
+     * Style for each individual word (token) in the text. Note that a token can also include whitespace characters between words.
+     */
+    wordStyles?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Breaks the text into matrix
+ *
+ * @example
+ * const text = "My Name is Rajat";
+ * const resultMatrix = getTextMatrix(text);
+ * console.log(resultMatrix);
+ * // Output:
+ * // [
+ * //   ['My', ' ', 'Name', ' ', 'is', ' ', 'Rajat'],
+ * // ]
+ */
+function getTextMatrix(text: string): string[][] {
+    return text.split('\n').map((row) => row.split(CONST.REGEX.SPACE_OR_EMOJI).filter((value) => value !== ''));
+}
+
+function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
+    const styles = useThemeStyles();
+
+    if (typeof children !== 'string') {
+        return null;
+    }
+
+    const textMatrix = getTextMatrix(children);
+
+    return textMatrix.map((rowText, rowIndex) => (
+        <Fragment
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${rowText[0]}-${rowIndex}`}
+        >
+            {rowText.map((colText, colIndex) => (
+                // Outer View is important to vertically center the Text
+                <View
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`${colText}-${colIndex}`}
+                    style={styles.codeWordWrapper}
+                >
+                    <View style={[wordStyles, colIndex === 0 && styles.codeFirstWordStyle, colIndex === rowText.length - 1 && styles.codeLastWordStyle]}>
+                        <Text style={textStyles}>{colText}</Text>
+                    </View>
+                </View>
+            ))}
+        </Fragment>
+    ));
+}
+
+WrappedText.displayName = 'WrappedText';
+
+export default WrappedText;

src/components/InlineCodeBlock/index.native.js → src/components/InlineCodeBlock/index.native.tsx

@@ -1,26 +1,27 @@
 import React from 'react';
+import type {TText} from 'react-native-render-html';
 import useThemeStyles from '@styles/useThemeStyles';
-import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
+import type InlineCodeBlockProps from './types';
 import WrappedText from './WrappedText';
 
-function InlineCodeBlock(props) {
+function InlineCodeBlock<TComponent extends TText>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
     const styles = useThemeStyles();
-    const TDefaultRenderer = props.TDefaultRenderer;
+
     return (
         <TDefaultRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props.defaultRendererProps}
+            {...defaultRendererProps}
         >
             <WrappedText
-                textStyles={[props.textStyle]}
-                wordStyles={[props.boxModelStyle, styles.codeWordStyle]}
+                textStyles={textStyle}
+                wordStyles={[boxModelStyle, styles.codeWordStyle]}
             >
-                {props.defaultRendererProps.tnode.data}
+                {defaultRendererProps.tnode.data}
             </WrappedText>
         </TDefaultRenderer>
     );
 }
 
-InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;
 InlineCodeBlock.displayName = 'InlineCodeBlock';
+
 export default InlineCodeBlock;

src/components/InlineCodeBlock/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import type {TText} from 'react-native-render-html';
+import Text from '@components/Text';
+import type InlineCodeBlockProps from './types';
+
+function InlineCodeBlock<TComponent extends TText>({TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
+    const flattenTextStyle = StyleSheet.flatten(textStyle);
+    const {textDecorationLine, ...textStyles} = flattenTextStyle;
+
+    return (
+        <TDefaultRenderer
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...defaultRendererProps}
+        >
+            <Text style={[boxModelStyle, textStyles]}>{defaultRendererProps.tnode.data}</Text>
+        </TDefaultRenderer>
+    );
+}
+
+InlineCodeBlock.displayName = 'InlineCodeBlock';
+
+export default InlineCodeBlock;

src/components/InlineCodeBlock/types.ts

@@ -0,0 +1,11 @@
+import {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {TDefaultRenderer, TDefaultRendererProps, TText} from 'react-native-render-html';
+
+type InlineCodeBlockProps<TComponent extends TText> = {
+    TDefaultRenderer: TDefaultRenderer<TComponent>;
+    textStyle: StyleProp<TextStyle>;
+    defaultRendererProps: TDefaultRendererProps<TComponent>;
+    boxModelStyle: StyleProp<ViewStyle & TextStyle>;
+};
+
+export default InlineCodeBlockProps;

src/styles/codeStyles/types.ts

@@ -1,7 +1,7 @@
 import {TextStyle, ViewStyle} from 'react-native';
 
 type CodeWordWrapperStyles = ViewStyle;
-type CodeWordStyles = TextStyle;
+type CodeWordStyles = ViewStyle;
 type CodeTextStyles = TextStyle;
 
 export type {CodeTextStyles, CodeWordStyles, CodeWordWrapperStyles};