diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 96fd95cc5224..de7aafa20c03 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -44,6 +44,9 @@ 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 9d15be907014..3088a13a425b 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -19,11 +19,19 @@ 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 { @@ -31,14 +39,25 @@ class ThumbnailImage extends PureComponent { super(props); this.updateImageSize = this.updateImageSize.bind(this); - + const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight); this.state = { - thumbnailWidth: 200, - thumbnailHeight: 200, + thumbnailWidth, + thumbnailHeight, }; } - updateImageSize({width, height}) { + /** + * 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 {}; + } + // 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 @@ -54,8 +73,17 @@ class ThumbnailImage extends PureComponent { } else { thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio); } + return {thumbnailWidth: thumbnailScreenWidth, thumbnailHeight: Math.max(40, thumbnailScreenHeight)}; + } - this.setState({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}); } render() { diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 8cfcfe9aac73..e70becf96f45 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, ImageBackground, View} from 'react-native'; +import {ActivityIndicator, View} from 'react-native'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import reportActionFragmentPropTypes from './reportActionFragmentPropTypes'; @@ -72,28 +72,18 @@ 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) + ? ( + `} /> + ) : ( + - )} - + + ) ); }