Merge branch 'development' into nt/wallet-redesign

package.json

@@ -36,6 +36,7 @@
     "@esteemapp/react-native-slider": "^0.12.0",
     "@hiveio/dhive": "^1.0.1",
     "@native-html/iframe-plugin": "^2.6.1",
+    "@native-html/table-plugin": "^5.3.1",
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/cameraroll": "^1.3.0",
     "@react-native-community/cli-platform-ios": "^4.10.1",

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -7,7 +7,8 @@ import { AutoHeightImage } from '../autoHeightImage/autoHeightImage';
 import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin';
 import WebView from 'react-native-webview';
 import { VideoPlayer } from '..';
-import { Platform } from 'react-native';
+import {useHtmlTableProps } from '@native-html/table-plugin';
+import { ScrollView } from 'react-native-gesture-handler';
 
 interface PostHtmlRendererProps {
   contentWidth: number;
@@ -44,6 +45,8 @@ export const PostHtmlRenderer = memo(
 
     console.log('Comment body:', body);
 
+    const _minTableColWidth = (contentWidth / 3) - 12;
+
     const _handleOnLinkPress = (data: LinkData) => {
       if (!data) {
         return;
@@ -221,6 +224,21 @@ export const PostHtmlRenderer = memo(
     };
 
 
+    //based on number of columns a table have, sets scroll enabled or disable, also adjust table full width
+    const _tableRenderer = ({TDefaultRenderer, ...props}:CustomRendererProps<TNode>) => {
+      const tableProps = useHtmlTableProps(props);
+
+      const isScrollable = tableProps.numOfColumns > 3;
+      const _tableWidth = isScrollable ? tableProps.numOfColumns * _minTableColWidth: contentWidth;    
+      props.style = {width:_tableWidth};
+
+      return (
+        <ScrollView horizontal={true} scrollEnabled={isScrollable}>
+            <TDefaultRenderer {...props} />
+        </ScrollView>
+      )}
+
+
     // iframe renderer for rendering iframes in body
     const _iframeRenderer = function IframeRenderer(props) {
       const iframeProps = useHtmlIframeProps(props);
@@ -237,7 +255,6 @@ export const PostHtmlRenderer = memo(
         )
       }else{
         return (
-
           <VideoPlayer 
             mode='uri'
             uri={iframeProps.source.uri}
@@ -262,15 +279,15 @@ export const PostHtmlRenderer = memo(
           body: styles.body,
           a: styles.a,
           img: styles.img,
-          th: styles.th,
+          table: styles.table,
           tr: { ...styles.tr, width: contentWidth }, //center tag causes tr to have 0 width if not exclusivly set, contentWidth help avoid that
+          th: {...styles.th, minWidth: _minTableColWidth},
+          td: {...styles.td, minWidth: _minTableColWidth},
           div:{width:contentWidth},
-          td: styles.td,
           blockquote: styles.blockquote,
           code: styles.code,
           li: styles.li,
           p: styles.p,
-          table: styles.table,
         }}
         domVisitors={{
           onElement: _onElement,
@@ -280,6 +297,7 @@ export const PostHtmlRenderer = memo(
           a: _anchorRenderer,
           p: _paraRenderer,
           iframe: _iframeRenderer,
+          table: _tableRenderer
         }}
         onHTMLLoaded={onLoaded && onLoaded}
         defaultTextProps={{

src/components/postHtmlRenderer/postHtmlRendererStyles.ts

@@ -39,11 +39,11 @@ export default EStyleSheet.create({
     alignItems:'center',
     fontWeight: 'bold',
     color: '$primaryBlack',
+    backgroundColor:'$darkIconColor',
     fontSize: 14,
     padding: 10,
   } as TextStyle,
   tr:{
-    backgroundColor:'$darkIconColor',
     flexDirection:'row',
   } as ViewStyle,
   td:{

yarn.lock

@@ -1138,7 +1138,7 @@
   resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz#2dc8c57044de0340eb53a7ba602e59abf80dc799"
   integrity sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==
 
-"@formidable-webview/webshell@^2.6.0":
+"@formidable-webview/webshell@2.6.0", "@formidable-webview/webshell@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@formidable-webview/webshell/-/webshell-2.6.0.tgz#64704c0b513206e71b23118b3c9d096f0d545005"
   integrity sha512-FwQQDajg1xs7W3CUiUNJMvdjgLjKLDGzs0XPzoVg0Dunhold1Jg7w5pihUdvVugFlNtkSpXMA+du9QDHE8lmpg==
@@ -1452,6 +1452,16 @@
   resolved "https://registry.yarnpkg.com/@native-html/plugins-core/-/plugins-core-1.3.0.tgz#f1f24622097551930d9dab0214c4929d00f7446e"
   integrity sha512-vce35gqGJKa2oPDZVa2sKjucFFVK+3g8quLayeXiJtj5LzuS8TWGrBFTS5O4ToUtE02AJkCDOLwAguCzK2HWdQ==
 
+"@native-html/table-plugin@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@native-html/table-plugin/-/table-plugin-5.3.1.tgz#12d34869c2ff3e5f45de6ff6a8b5aba1471a8a03"
+  integrity sha512-zz1ww7tUgIY6fMnKYejKHacaUBV+yjuWDBWDwSp4SP0CFiLAbmLIER0UGw0kI58lAVgbWzdEJUX0dmeBG0qevA==
+  dependencies:
+    "@formidable-webview/webshell" "2.6.0"
+    "@native-html/plugins-core" "1.3.0"
+    "@types/prop-types" "^15.7.4"
+    prop-types "^15.7.2"
+
 "@native-html/transient-render-engine@^9.2.2":
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/@native-html/transient-render-engine/-/transient-render-engine-9.2.2.tgz#00691518926ea47709185c3a25a786472c99a1f0"