From e860e799557370da227de27b60e398c984e83812 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 8 Jun 2022 02:22:15 +0500 Subject: [PATCH 1/4] fix: regression issue --- .../HTMLRenderers/ImageRenderer.js | 13 +++++++++++++ src/pages/home/report/ReportActionItemFragment.js | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index de7aafa20c03..0147071f846c 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -46,6 +46,19 @@ const ImageRenderer = (props) => { 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; + const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true'; + + if (imagePreviewModalDisabled) { + return ( + + ); + } return ( { return ( Str.isImage(props.attachmentInfo.name) ? ( - `} /> + `} /> ) : ( Date: Wed, 8 Jun 2022 02:33:19 +0500 Subject: [PATCH 2/4] re-added differ by line breaks changes --- src/pages/home/report/ReportActionItemFragment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index c770294bd6b2..afab5787fb75 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -90,9 +90,9 @@ const ReportActionItemFragment = (props) => { // If the only difference between fragment.text and fragment.html is
tags // we replace them with line breaks and render it as text, not as html. // This is done to render emojis with line breaks between them as text. - const differByLineBreaksOnly = props.fragment.html.replaceAll('
', ' ') === props.fragment.text; + const differByLineBreaksOnly = Str.replaceAll(props.fragment.html, '
', ' ') === props.fragment.text; if (differByLineBreaksOnly) { - const textWithLineBreaks = props.fragment.html.replaceAll('
', '\n'); + const textWithLineBreaks = Str.replaceAll(props.fragment.html, '
', '\n'); // eslint-disable-next-line no-param-reassign props.fragment = {...props.fragment, text: textWithLineBreaks, html: textWithLineBreaks}; } From 4b4db2365cd444d5c1f75ab7489f34b4bf60bcc5 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 8 Jun 2022 02:37:36 +0500 Subject: [PATCH 3/4] updated thumnail image component --- src/components/ThumbnailImage.js | 38 +++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) 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() { From 3439796754d31accfdd4b116afe0eba598278f1b Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 8 Jun 2022 03:26:41 +0500 Subject: [PATCH 4/4] use ternary instead of return --- .../HTMLRenderers/ImageRenderer.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 0147071f846c..f3e9009a72ca 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -48,19 +48,15 @@ const ImageRenderer = (props) => { const imageHeight = htmlAttribs['data-expensify-height'] ? parseInt(htmlAttribs['data-expensify-height'], 10) : undefined; const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true'; - if (imagePreviewModalDisabled) { - return ( - - ); - } - - return ( + return imagePreviewModalDisabled ? ( + + ) : (