Merge pull request #2550 from Expensify/revert-2307-parasharrajat/quo…

…tedText Revert "fix inline code blocks for native platforms"
Expensify · Apr 23, 2021 · b6e487f · b6e487f
2 parents d27cf29 + 05fbe44
commit b6e487f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 139 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, Text} from 'react-native';
+import {StyleSheet} from 'react-native';
 import anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 
 const defaultProps = {
@@ -18,17 +18,16 @@ const AnchorForCommentsOnly = ({
     style,
     ...props
 }) => (
-    <Text
+    <a
         style={StyleSheet.flatten(style)}
-        accessibilityRole="link"
         href={href}
         rel={rel}
         target={target}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
     >
         {children}
-    </Text>
+    </a>
 );
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes;

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

diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1312,39 +1312,6 @@ 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,
@@ -1365,6 +1332,8 @@ const styles = {
 const baseCodeTagStyles = {
     borderWidth: 1,
     borderRadius: 5,
+    marginTop: 4,
+    marginBottom: 4,
     borderColor: themeColors.border,
     backgroundColor: themeColors.textBackground,
 };
@@ -1421,9 +1390,9 @@ const webViewStyles = {
             ...baseCodeTagStyles,
             paddingLeft: 5,
             paddingRight: 5,
+            paddingBottom: 2,
+            alignSelf: 'flex-start',
             fontFamily: fontFamily.MONOSPACE,
-            lineHeight: 18,
-            fontSize: 13,
         },
 
         img: {
@@ -1436,7 +1405,6 @@ 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,7 +12,6 @@ export default {
     fontSizeExtraSmall: 9,
     fontSizeLabel: 13,
     fontSizeNormal: 15,
-    fontSizeNormalHeight: 20,
     fontSizeLarge: 17,
     fontSizeh1: 19,
     iconSizeExtraSmall: 12,