From 05fbe4409d6ff901d42f7937d94bedd95a655179 Mon Sep 17 00:00:00 2001 From: Rory Abraham <47436092+roryabraham@users.noreply.github.com> Date: Thu, 22 Apr 2021 17:57:37 -0700 Subject: [PATCH] Revert "fix inline code blocks for native platforms" --- src/components/AnchorForCommentsOnly/index.js | 7 +- .../InlineCodeBlock/index.android.js | 19 ++++ .../{index.native.js => index.ios.js} | 19 ++-- src/components/InlineCodeBlock/wrappedText.js | 87 ------------------- src/styles/styles.js | 40 +-------- src/styles/variables.js | 1 - 6 files changed, 34 insertions(+), 139 deletions(-) create mode 100644 src/components/InlineCodeBlock/index.android.js rename src/components/InlineCodeBlock/{index.native.js => index.ios.js} (50%) delete mode 100644 src/components/InlineCodeBlock/wrappedText.js diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js index 3edda2184b8c..6e70e859cf96 100644 --- 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,9 +18,8 @@ const AnchorForCommentsOnly = ({ style, ...props }) => ( - {children} - + ); AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes; diff --git a/src/components/InlineCodeBlock/index.android.js b/src/components/InlineCodeBlock/index.android.js new file mode 100644 index 000000000000..d68ca0031b84 --- /dev/null +++ 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, +}) => ( + + + +); + +InlineCodeBlock.propTypes = inlineCodeBlockPropTypes; +InlineCodeBlock.displayName = 'InlineCodeBlock'; +export default InlineCodeBlock; diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.ios.js similarity index 50% rename from src/components/InlineCodeBlock/index.native.js rename to src/components/InlineCodeBlock/index.ios.js index 0178ecf18289..163bf4a201d8 100644 --- a/src/components/InlineCodeBlock/index.native.js +++ b/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, }) => ( - - {defaultRendererProps.tnode.data} - + + ); InlineCodeBlock.propTypes = inlineCodeBlockPropTypes; diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js deleted file mode 100644 index 930ebb4c99bc..000000000000 --- a/src/components/InlineCodeBlock/wrappedText.js +++ /dev/null @@ -1,87 +0,0 @@ -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} - */ -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) => ( - - {rowText.map((colText, colIndex) => ( - - // Outer View is important to vertically center the Text - - - {colText} - - - ))} - - ))} - - ); -}; - -WrappedText.propTypes = propTypes; -WrappedText.defaultProps = defaultProps; -WrappedText.displayName = 'WrappedText'; - -export default WrappedText; diff --git a/src/styles/styles.js b/src/styles/styles.js index fcdfd665b348..3f3fa97e6782 100644 --- 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 index 4ca7fef91365..9b70c5d5b072 100644 --- 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,