Merge pull request #2307 from parasharrajat/parasharrajat/quotedText

fix inline code blocks for native platforms
Expensify · Apr 20, 2021 · eba5df8 · eba5df8
2 parents 426e8b6 + 92ddc5a
commit eba5df8
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 34 deletions.
diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Text} from 'react-native';
 import anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 
 const defaultProps = {
@@ -18,16 +18,17 @@ const AnchorForCommentsOnly = ({
     style,
     ...props
 }) => (
-    <a
+    <Text
         style={StyleSheet.flatten(style)}
+        accessibilityRole="link"
         href={href}
         rel={rel}
         target={target}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
     >
         {children}
-    </a>
+    </Text>
 );
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes;

diff --git a/src/components/InlineCodeBlock/index.android.js b/src/components/InlineCodeBlock/index.android.js
diff --git a/src/components/InlineCodeBlock/index.ios.js → ...omponents/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.ios.js → ...omponents/InlineCodeBlock/index.native.js
@@ -1,23 +1,26 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import {View} from 'react-native';
 import styles from '../../styles/styles';
+import WrappedText from './wrappedText';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
 
 const InlineCodeBlock = ({
-    TDefaultRenderer,
     defaultRendererProps,
     boxModelStyle,
     textStyle,
 }) => (
-    <View
-        style={{
+    <WrappedText
+        textStyle={textStyle}
+        wordStyle={{
             ...boxModelStyle,
-            ...styles.mbn1,
+            ...styles.codeWordStyle,
         }}
+        firstWordStyle={styles.codeFirstWordStyle}
+        lastWordStyle={styles.codeLastWordStyle}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+        {...defaultRendererProps}
     >
-        <TDefaultRenderer style={textStyle} {...defaultRendererProps} />
-    </View>
+        {defaultRendererProps.tnode.data}
+    </WrappedText>
 );
 
 InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;

diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js
@@ -0,0 +1,87 @@
+import React, {Fragment} from 'react';
+import {Text, View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+
+/**
+ * Breaks the text into matrix
+ * for eg: My Name  is Rajat
+ *  [
+ *    [My,'',Name,'','',is,'',Rajat],
+ *  ]
+ *
+ * @param {String} text
+ * @returns {Array<String[]>}
+ */
+function getTextMatrix(text) {
+    return text.split('\n').map(row => row.split(/(\s)/));
+}
+
+const propTypes = {
+    // Required text
+    children: PropTypes.string.isRequired,
+
+    // Style to be applied to Text
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.object,
+
+    // Style for each word(Token) in the text,
+    // remember that token also includes the following spaces before next word break
+    // eslint-disable-next-line react/forbid-prop-types
+    wordStyle: PropTypes.object,
+
+    // Style for first word
+    // eslint-disable-next-line react/forbid-prop-types
+    firstWordStyle: PropTypes.object,
+
+    // Style for last word
+    // eslint-disable-next-line react/forbid-prop-types
+    lastWordStyle: PropTypes.object,
+};
+
+const defaultProps = {
+    textStyle: {},
+    wordStyle: {},
+    firstWordStyle: {},
+    lastWordStyle: {},
+};
+
+const WrappedText = (props) => {
+    const textMatrix = getTextMatrix(props.children);
+    return (
+        <>
+            {textMatrix.map((rowText, rowIndex) => (
+                <Fragment
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`${rowText}-${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={[
+                                    props.wordStyle,
+                                    colIndex === 0 && props.firstWordStyle,
+                                    colIndex === rowText.length - 1 && props.lastWordStyle,
+                                ]}
+                            >
+                                <Text style={props.textStyle}>{colText}</Text>
+                            </View>
+                        </View>
+                    ))}
+                </Fragment>
+            ))}
+        </>
+    );
+};
+
+WrappedText.propTypes = propTypes;
+WrappedText.defaultProps = defaultProps;
+WrappedText.displayName = 'WrappedText';
+
+export default WrappedText;
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1311,6 +1311,39 @@ const styles = {
         scrollbarWidth: 'none',
     },
 
+    codeWordWrapper: {
+        height: 10,
+    },
+
+    codeWordStyle: {
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        flexBasis: 'auto',
+        paddingLeft: 0,
+        paddingRight: 0,
+        justifyContent: 'center',
+        marginVertical: -2,
+        top: -1,
+    },
+
+    codeFirstWordStyle: {
+        borderLeftWidth: 1,
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        paddingLeft: 5,
+    },
+
+    codeLastWordStyle: {
+        borderRightWidth: 1,
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4,
+        paddingRight: 5,
+    },
+
     fullScreenLoading: {
         backgroundColor: themeColors.componentBG,
         opacity: 0.8,
@@ -1331,8 +1364,6 @@ const styles = {
 const baseCodeTagStyles = {
     borderWidth: 1,
     borderRadius: 5,
-    marginTop: 4,
-    marginBottom: 4,
     borderColor: themeColors.border,
     backgroundColor: themeColors.textBackground,
 };
@@ -1389,9 +1420,9 @@ const webViewStyles = {
             ...baseCodeTagStyles,
             paddingLeft: 5,
             paddingRight: 5,
-            paddingBottom: 2,
-            alignSelf: 'flex-start',
             fontFamily: fontFamily.MONOSPACE,
+            lineHeight: 18,
+            fontSize: 13,
         },
 
         img: {
@@ -1404,6 +1435,7 @@ const webViewStyles = {
     baseFontStyle: {
         color: themeColors.text,
         fontSize: variables.fontSizeNormal,
+        lineHeight: variables.fontSizeNormalHeight,
         fontFamily: fontFamily.GTA,
     },
 };

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -12,6 +12,7 @@ export default {
     fontSizeExtraSmall: 9,
     fontSizeLabel: 13,
     fontSizeNormal: 15,
+    fontSizeNormalHeight: 20,
     fontSizeLarge: 17,
     fontSizeh1: 19,
     iconSizeExtraSmall: 12,