Merge pull request #9345 from Expensify/OSBotify-cherry-pick-staging-…

…9343 🍒 Cherry pick PR #9343 to staging 🍒
Expensify · Jun 7, 2022 · 35ec65a · 35ec65a
2 parents 7802867 + 4e51cca
commit 35ec65a
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 52 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001017301
-        versionName "1.1.73-1"
+        versionCode 1001017302
+        versionName "1.1.73-2"
     }
     splits {
         abi {

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.73.1</string>
+	<string>1.1.73.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.73.1</string>
+	<string>1.1.73.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.73-1",
+  "version": "1.1.73-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -44,9 +44,6 @@ const ImageRenderer = (props) => {
         Config.EXPENSIFY.URL_API_ROOT,
     );
 
-    const imageWidth = htmlAttribs['data-expensify-width'] ? parseInt(htmlAttribs['data-expensify-width'], 10) : undefined;
-    const imageHeight = htmlAttribs['data-expensify-height'] ? parseInt(htmlAttribs['data-expensify-height'], 10) : undefined;
-
     return (
         <AttachmentModal
             allowDownload
@@ -63,8 +60,6 @@ const ImageRenderer = (props) => {
                         previewSourceURL={previewSource}
                         style={styles.webViewStyles.tagStyles.img}
                         isAuthTokenRequired={isAttachment}
-                        imageWidth={imageWidth}
-                        imageHeight={imageHeight}
                     />
                 </PressableWithoutFocus>
             )}

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
@@ -19,45 +19,26 @@ const propTypes = {
     /** Do the urls require an authToken? */
     isAuthTokenRequired: PropTypes.bool.isRequired,
 
-    /** Width of the thumbnail image */
-    imageWidth: PropTypes.number,
-
-    /** Height of the thumbnail image */
-    imageHeight: PropTypes.number,
-
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     style: {},
-    imageWidth: 200,
-    imageHeight: 200,
 };
 
 class ThumbnailImage extends PureComponent {
     constructor(props) {
         super(props);
 
         this.updateImageSize = this.updateImageSize.bind(this);
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight);
+
         this.state = {
-            thumbnailWidth,
-            thumbnailHeight,
+            thumbnailWidth: 200,
+            thumbnailHeight: 200,
         };
     }
 
-    /**
-     * Compute the thumbnails width and height given original image dimensions.
-     *
-     * @param {Number} width - Width of the original image.
-     * @param {Number} height - Height of the original image.
-     * @returns {Object} - Object containing thumbnails width and height.
-     */
-    calculateThumbnailImageSize(width, height) {
-        if (!width || !height) {
-            return {};
-        }
-
+    updateImageSize({width, height}) {
         // Width of the thumbnail works better as a constant than it does
         // a percentage of the screen width since it is relative to each screen
         // Note: Clamp minimum width 40px to support touch device
@@ -73,17 +54,8 @@ class ThumbnailImage extends PureComponent {
         } else {
             thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio);
         }
-        return {thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)};
-    }
 
-    /**
-     * Update the state with the computed thumbnail sizes.
-     *
-     * @param {{ width: number, height: number }} Params - width and height of the original image.
-     */
-    updateImageSize({width, height}) {
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);
-        this.setState({thumbnailWidth, thumbnailHeight});
+        this.setState({thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)});
     }
 
     render() {

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -1,5 +1,5 @@
 import React, {memo} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import {ActivityIndicator, ImageBackground, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import reportActionFragmentPropTypes from './reportActionFragmentPropTypes';
@@ -72,18 +72,28 @@ const ReportActionItemFragment = (props) => {
             // If this is an attachment placeholder, return the placeholder component
             if (props.isAttachment && props.loading) {
                 return (
-                    Str.isImage(props.attachmentInfo.name)
-                        ? (
-                            <RenderHTML html={`<comment><img src="${props.attachmentInfo.source}"/></comment>`} />
-                        ) : (
-                            <View style={[styles.chatItemAttachmentPlaceholder]}>
+                    <View style={[styles.chatItemAttachmentPlaceholder]}>
+                        {Str.isImage(props.attachmentInfo.name)
+                            ? (
+                                <ImageBackground
+                                    source={{uri: props.attachmentInfo.source}}
+                                    resizeMode="cover"
+                                    imageStyle={[styles.borderBottomRounded, styles.borderTopRounded]}
+                                    style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}
+                                >
+                                    <ActivityIndicator
+                                        size="large"
+                                        color={themeColors.uploadPreviewActivityIndicator}
+                                    />
+                                </ImageBackground>
+                            ) : (
                                 <ActivityIndicator
                                     size="large"
                                     color={themeColors.textSupporting}
                                     style={[styles.flex1]}
                                 />
-                            </View>
-                        )
+                            )}
+                    </View>
                 );
             }