diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index de7aafa20c03..96fd95cc5224 100644 --- 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 ( { previewSourceURL={previewSource} style={styles.webViewStyles.tagStyles.img} isAuthTokenRequired={isAttachment} - imageWidth={imageWidth} - imageHeight={imageHeight} /> )} diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js index 3088a13a425b..9d15be907014 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -19,19 +19,11 @@ 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 { @@ -39,25 +31,14 @@ class ThumbnailImage extends PureComponent { 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 index e70becf96f45..8cfcfe9aac73 100644 --- 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) - ? ( - `} /> - ) : ( - + + {Str.isImage(props.attachmentInfo.name) + ? ( + + + + ) : ( - - ) + )} + ); }