From f143f1aade6f7e16b81d761cf937c41d9aedae19 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Mon, 14 Mar 2022 14:04:04 +0500 Subject: [PATCH] Added support for scrollable table rendering if columns are greater than 3 --- package.json | 1 + .../postHtmlRenderer/postHtmlRenderer.tsx | 28 +++++++++++++++---- .../postHtmlRendererStyles.ts | 2 +- yarn.lock | 12 +++++++- 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 78613ec06..e13c667e2 100644 --- a/package.json +++ b/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", diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index f1a13c4c9..e84fd07fa 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/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) => { + const tableProps = useHtmlTableProps(props); + + const isScrollable = tableProps.numOfColumns > 3; + const _tableWidth = isScrollable ? tableProps.numOfColumns * _minTableColWidth: contentWidth; + props.style = {width:_tableWidth}; + + return ( + + + + )} + + // 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 ( -