@shoutem/ui 9.0.0-rc.4 → 9.0.0

package/html/components/AttachmentRenderer.js

@@ -4,39 +4,35 @@ import PropTypes from 'prop-types';
 import { resolveDimensions } from '../services/Dimensions';
 import Image from './Image';
 
-const AttachmentRenderer = ({ id, type, style, attachments }) => {
-  if (!attachments) {
+const AttachmentRenderer = ({ tnode, style, attachments }) => {
+  if (!attachments || _.isEmpty(attachments)) {
     return null;
   }
 
-  if (type === 'image') {
-    const image = _.find(attachments, { id });
+  const image = _.find(attachments, { id: tnode?.id });
 
-    if (image && image.src) {
-      const source = { uri: image.src };
-      const imageSize = { width: image.width, height: image.height };
-      const { height, width } = resolveDimensions(imageSize, style);
-      const resolvedStyle = { alignSelf: 'center', height, width };
-
-      return <Image source={source} key={id} style={resolvedStyle} />;
-    }
+  if (!image || !image.src) {
+    return null;
   }
 
-  return null;
+  const source = { uri: image.src };
+  const imageSize = { width: image.width, height: image.height };
+  const { height, width } = resolveDimensions(imageSize, style);
+  const resolvedStyle = { alignSelf: 'center', height, width };
+
+  return <Image source={source} key={tnode?.id} style={resolvedStyle} />;
 };
 
 AttachmentRenderer.propTypes = {
-  attachments: PropTypes.oneOf([PropTypes.array, PropTypes.object]),
-  id: PropTypes.any,
+  attachments: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   style: PropTypes.any,
-  type: PropTypes.any,
+  tnode: PropTypes.object,
 };
 
 AttachmentRenderer.defaultProps = {
-  id: undefined,
-  type: undefined,
   attachments: undefined,
   style: undefined,
+  tnode: {},
 };
 
 export default AttachmentRenderer;

package/html/components/SimpleHtml.js

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+/* eslint-disable react/prop-types */
+import React, { useCallback, useMemo } from 'react';
 import { Linking } from 'react-native';
 import Html, { defaultSystemFonts } from 'react-native-render-html';
 import WebView from 'react-native-webview';
@@ -8,64 +9,66 @@ import table, {
   defaultTableStylesSpecs,
   tableModel,
 } from '@native-html/table-plugin';
-import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import VideoRenderer from '@shoutem/ui/html/components/VideoRenderer';
-import { videoModel } from '@shoutem/ui/html/services/HTMLElementModels';
+import {
+  attachmentModel,
+  videoModel,
+} from '@shoutem/ui/html/services/HTMLElementModels';
 import { View } from '../../components/View';
 import { resolveMaxWidth } from '../services/Dimensions';
 import { onElement } from '../services/DomVisitors';
 import AttachmentRenderer from './AttachmentRenderer';
 import IframeRenderer from './IframeRenderer';
 
-class SimpleHtml extends PureComponent {
-  constructor(props) {
-    super(props);
+const SimpleHtml = ({
+  style,
+  body,
+  unsupportedVideoFormatMessage,
+  attachments,
+  customDomVisitors = {},
+  customCustomRenderers = {},
+  customTagStyles = {},
+  customHtmlElementModels = {},
+  customIgnoredStyles = [],
+  customRendererProps = {},
+  customHandleLinkPress,
+  ...otherProps
+}) => {
+  const onLinkPress = useCallback(
+    (_evt, href) => {
+      return customHandleLinkPress
+        ? customHandleLinkPress(href)
+        : Linking.openURL(href);
+    },
+    [customHandleLinkPress],
+  );
 
-    autoBindReact(this);
-  }
+  const maxWidth = useMemo(() => {
+    return resolveMaxWidth(style);
+  }, [style]);
 
-  onLinkPress(_evt, href) {
-    const { customHandleLinkPress } = this.props;
-
-    return customHandleLinkPress
-      ? customHandleLinkPress(href)
-      : Linking.openURL(href);
-  }
-
-  render() {
-    const {
-      style,
-      body,
-      unsupportedVideoFormatMessage,
-      attachments,
-      customDomVisitors,
-      customCustomRenderers,
-      customTagStyles,
-      customHtmlElementModels,
-      customIgnoredStyles,
-      customRendererProps,
-      ...otherProps
-    } = this.props;
-
-    const maxWidth = resolveMaxWidth(style);
-
-    const tagStyles = {
+  const tagStyles = useMemo(
+    () => ({
       ...style.tags,
       ...customTagStyles,
-    };
+    }),
+    [style.tags, customTagStyles],
+  );
 
+  const cssRules = useMemo(() => {
     const tableStyle = _.get(style, 'table', {});
     const tableCssStyle = _.get(style, 'tableCss', '');
     const cssStyle = cssRulesFromSpecs({
       ...defaultTableStylesSpecs,
       ...tableStyle,
     });
-    const cssRules = `${cssStyle}${tableCssStyle}`;
+    return `${cssStyle}${tableCssStyle}`;
+  }, [style]);
 
-    const customRenderers = {
+  const customRenderers = useMemo(
+    () => ({
       iframe: props => (
         <IframeRenderer
           {...props}
@@ -76,86 +79,95 @@ class SimpleHtml extends PureComponent {
       table,
       attachment: props => (
         <AttachmentRenderer
-          {...props}
+          tnode={props.tnode}
           attachments={attachments}
           style={style}
         />
       ),
       video: VideoRenderer,
       ...customCustomRenderers,
-    };
+    }),
+    [style, unsupportedVideoFormatMessage, attachments, customCustomRenderers],
+  );
+
+  const systemFonts = useMemo(
+    () => [...defaultSystemFonts, style.baseFont.fontFamily],
+    [style.baseFont.fontFamily],
+  );
+
+  const ignoredStyles = useMemo(
+    () => ['fontFamily', 'letterSpacing', 'transform', ...customIgnoredStyles],
+    [customIgnoredStyles],
+  );
+
+  const renderersProps = useMemo(
+    () => ({
+      table: {
+        cssRules,
+      },
+      a: { onPress: onLinkPress },
+      iframe: {
+        webViewProps: {
+          renderToHardwareTextureAndroid: true,
+        },
+      },
+      ...customRendererProps,
+    }),
+    [cssRules, onLinkPress, customRendererProps],
+  );
 
-    const htmlProps = {
+  const customHTMLElementModels = useMemo(
+    () => ({
+      table: tableModel,
+      iframe: iframeModel,
+      video: videoModel,
+      attachment: attachmentModel,
+      ...customHtmlElementModels,
+    }),
+    [customHtmlElementModels],
+  );
+
+  const domVisitors = useMemo(
+    () => ({
+      onElement,
+      ...customDomVisitors,
+    }),
+    [customDomVisitors],
+  );
+
+  const filteredTagStyles = useMemo(
+    () => _.omitBy(tagStyles, tagStyle => !tagStyle),
+    [tagStyles],
+  );
+
+  // We have to be really careful with props passed to SimpleHtml, as they'll cause unnecessary re-renders.
+  // Component is meant to be static (in almost all scenarios) - it should only render with initially given props.
+  // Notice that props below are memoized to only be calculated on mount, because lots of these props non-primitive
+  // (reference types), and they'll cause re-renders.
+  const htmlProps = useMemo(
+    () => ({
       source: { html: body },
       computeEmbeddedMaxWidth: () => maxWidth,
       contentWidth: maxWidth,
-      tagsStyles: _.omitBy(tagStyles, tagStyle => !tagStyle),
-      systemFonts: [...defaultSystemFonts, style.baseFont.fontFamily],
+      tagsStyles: filteredTagStyles,
+      systemFonts,
       baseStyle: style.baseFont,
-      ignoredStyles: [
-        'fontFamily',
-        'letterSpacing',
-        'transform',
-        ...customIgnoredStyles,
-      ],
+      ignoredStyles,
       renderers: customRenderers,
-      renderersProps: {
-        table: {
-          cssRules,
-        },
-        a: { onPress: this.onLinkPress },
-        iframe: {
-          webViewProps: {
-            renderToHardwareTextureAndroid: true,
-          },
-        },
-        ...customRendererProps,
-      },
-      customHTMLElementModels: {
-        table: tableModel,
-        iframe: iframeModel,
-        video: videoModel,
-        ...customHtmlElementModels,
-      },
+      renderersProps,
+      customHTMLElementModels,
       WebView,
-      domVisitors: { onElement, ...customDomVisitors },
-    };
-
-    return (
-      <View style={style.container}>
-        <Html {...htmlProps} {...otherProps} />
-      </View>
-    );
-  }
-}
-
-SimpleHtml.propTypes = {
-  style: PropTypes.object.isRequired,
-  attachments: PropTypes.array,
-  body: PropTypes.string,
-  customCustomRenderers: PropTypes.object,
-  customDomVisitors: PropTypes.object,
-  customHandleLinkPress: PropTypes.func,
-  customHtmlElementModels: PropTypes.object,
-  customIgnoredStyles: PropTypes.arrayOf(PropTypes.string),
-  customRendererProps: PropTypes.object,
-  customTagStyles: PropTypes.object,
-  domVisitors: PropTypes.object,
-  unsupportedVideoFormatMessage: PropTypes.string,
-};
+      domVisitors,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
-SimpleHtml.defaultProps = {
-  attachments: undefined,
-  body: undefined,
-  customHandleLinkPress: undefined,
-  customTagStyles: {},
-  unsupportedVideoFormatMessage: undefined,
-  domVisitors: { onElement },
-  customDomVisitors: {},
-  customCustomRenderers: {},
-  customHtmlElementModels: {},
-  customIgnoredStyles: [],
-  customRendererProps: {},
+  return (
+    <View style={style.container}>
+      <Html {...htmlProps} {...otherProps} />
+    </View>
+  );
 };
 
-export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);
+export default React.memo(connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml));

package/html/services/HTMLElementModels.js

@@ -5,3 +5,9 @@ export const videoModel = HTMLElementModel.fromCustomModel({
   tagName: 'video',
   isOpaque: true,
 });
+
+export const attachmentModel = HTMLElementModel.fromCustomModel({
+  contentModel: HTMLContentModel.block,
+  tagName: 'attachment',
+  isOpaque: true,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -15,9 +15,9 @@
     "@native-html/table-plugin": "5.3.1",
     "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
-    "@shoutem/animation": "1.0.0-rc.1",
+    "@shoutem/animation": "1.0.0",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "1.0.0-rc.3",
+    "@shoutem/theme": "1.0.0",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -41,7 +41,7 @@
     "react-native-toast-message": "2.1.5",
     "react-native-vimeo-iframe": "^1.2.1",
     "react-native-web-refresh-control": "1.1.2",
-    "react-native-webview": "11.23.0",
+    "react-native-webview": "13.16.0",
     "react-native-youtube-iframe": "2.2.2",
     "react-native-actions-sheet": "0.9.3",
     "stream": "0.0.2",

package/theme.js

@@ -2407,8 +2407,11 @@ export default () => {
         paddingHorizontal: 20,
         paddingVertical: 16,
         borderBottomWidth: 1,
-        borderColor: 'rgba(130, 130, 130, 0.1)',
         alignItems: 'center',
+        backgroundColor: resolveVariable('primaryButtonBackgroundColor'),
+        borderColor: resolveVariable('primaryButtonBorderColor'),
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 13,
       },
       text: {
         fontSize: 15,