Merge pull request #613 from shoutem/release/4.4.8

Release/4.4.8

html/components/SimpleHtml.js

@@ -8,17 +8,27 @@ import {
   cssStringToObject,
   cssObjectToString,
 } from 'react-native-render-html/src/HTMLStyles';
+import WebView from 'react-native-webview';
+import {
+  makeTableRenderer,
+  alterNode as tableAlterNode,
+  cssRulesFromSpecs,
+  defaultTableStylesSpecs,
+  IGNORED_TAGS,
+} from 'react-native-render-html-table-bridge';
 import { iframe } from 'react-native-render-html/src/HTMLRenderers';
 import YoutubePlayer from 'react-native-youtube-iframe';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../../components/View';
 import { Text } from '../../components/Text';
 import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
 import isValidVideoFormat from '../services/isValidVideoFormat';
+import Image from './Image';
 
 class SimpleHtml extends PureComponent {
   static propTypes = {
     body: PropTypes.string,
+    attachments: PropTypes.array,
     style: PropTypes.object,
     customTagStyles: PropTypes.object,
     customHandleLinkPress: PropTypes.func,
@@ -50,16 +60,20 @@ class SimpleHtml extends PureComponent {
 
     const styleAttrib = _.get(node, 'attribs.style', '').trim();
 
+    if (node.name === 'table') {
+      return tableAlterNode(node);
+    }
+
     if (node.name === 'figure') {
       const firstChild = _.head(node.children);
 
       if (firstChild.name === 'iframe') {
         const nodeStyle = cssStringToObject(styleAttrib);
         const source = _.get(firstChild, 'attribs.src', '');
 
-        const resolvedNodeStyle = !isValidVideoFormat(source) ?
-          _.omit(nodeStyle, ['height', 'padding-bottom']) :
-          nodeStyle;
+        const resolvedNodeStyle = !isValidVideoFormat(source)
+          ? _.omit(nodeStyle, ['height', 'padding-bottom'])
+          : nodeStyle;
 
         node.attribs.style = cssObjectToString(resolvedNodeStyle);
 
@@ -138,6 +152,31 @@ class SimpleHtml extends PureComponent {
     return <Text style={style.prefix}>{passProps.index + 1}. </Text>;
   }
 
+  /**
+   * Custom rendered method for handling <attachment> tags
+   * Currently only supports rendering image attachments.
+   */
+  renderAttachments({ id, type }) {
+    const { attachments } = this.props;
+
+    if (!attachments) {
+      return null;
+    }
+
+    if (type === 'image') {
+      const image = _.find(attachments, { id });
+
+      if (image && image.src) {
+        const source = { uri: image.src };
+        const style = { height: image.height, alignSelf: 'center' };
+
+        return <Image source={source} key={id} style={style} />;
+      }
+    }
+
+    return null;
+  }
+
   renderIframe(htmlAttribs, children, convertedCSSStyles, passProps) {
     const { style } = this.props;
 
@@ -194,8 +233,18 @@ class SimpleHtml extends PureComponent {
       ol: this.renderOrderedListPrefix,
     };
 
+    const tableStyle = _.get(style, 'table', {});
+    const tableCssStyle = _.get(style, 'tableCss', '');
+    const cssStyle = cssRulesFromSpecs({
+      ...defaultTableStylesSpecs,
+      ...tableStyle,
+    });
+    const cssRules = `${cssStyle}${tableCssStyle}`;
+
     const customRenderers = {
       iframe: this.renderIframe,
+      table: makeTableRenderer({ WebViewComponent: WebView, cssRules }),
+      attachment: this.renderAttachments,
     };
 
     const htmlProps = {
@@ -210,6 +259,7 @@ class SimpleHtml extends PureComponent {
       alterChildren: this.alterChildren,
       listsPrefixesRenderers: listPrefixRenderers,
       renderers: customRenderers,
+      ignoredTags: IGNORED_TAGS,
     };
 
     return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -12,6 +12,7 @@
     "@shoutem/animation": "~0.14.0",
     "@shoutem/eslint-config-react": "^1.0.1",
     "@shoutem/theme": "~0.12.0",
+    "react-native-render-html-table-bridge": "0.6.0",
     "auto-bind": "^4.0.0",
     "babel-plugin-transform-decorators-legacy": "~1.3.4",
     "buffer": "5.6.0",