Merge pull request #25691 from Expensify/andrewli-fixstyling

[CP Staging] Remove global styling in BaseHTMLEngineProvider (cherry picked from commit c11abdc)
Expensify · Aug 22, 2023 · 93c6f30 · 93c6f30
1 parent 8e2c903
commit 93c6f30
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 20 deletions.
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -48,7 +48,7 @@ const customHTMLElementModels = {
     'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
 };
 
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText, styles.w100, styles.h100]};
+const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
 
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -43,23 +43,19 @@ function ImageRenderer(props) {
     const imageHeight = htmlAttribs['data-expensify-height'] ? parseInt(htmlAttribs['data-expensify-height'], 10) : undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
-    const shouldFitContainer = htmlAttribs['data-expensify-fit-container'] === 'true';
-    const sizingStyle = shouldFitContainer ? [styles.w100, styles.h100] : [];
-
     return imagePreviewModalDisabled ? (
         <ThumbnailImage
             previewSourceURL={previewSource}
-            style={shouldFitContainer ? [styles.w100, styles.h100] : styles.webViewStyles.tagStyles.img}
+            style={styles.webViewStyles.tagStyles.img}
             isAuthTokenRequired={isAttachmentOrReceipt}
             imageWidth={imageWidth}
             imageHeight={imageHeight}
-            shouldDynamicallyResize={!shouldFitContainer}
         />
     ) : (
         <ShowContextMenuContext.Consumer>
             {({anchor, report, action, checkIfContextMenuActive}) => (
                 <PressableWithoutFocus
-                    style={[styles.noOutline, ...sizingStyle]}
+                    style={[styles.noOutline]}
                     onPress={() => {
                         const route = ROUTES.getReportAttachmentRoute(report.reportID, source);
                         Navigation.navigate(route);
@@ -70,11 +66,10 @@ function ImageRenderer(props) {
                 >
                     <ThumbnailImage
                         previewSourceURL={previewSource}
-                        style={shouldFitContainer ? [styles.w100, styles.h100] : styles.webViewStyles.tagStyles.img}
+                        style={styles.webViewStyles.tagStyles.img}
                         isAuthTokenRequired={isAttachmentOrReceipt}
                         imageWidth={imageWidth}
                         imageHeight={imageHeight}
-                        shouldDynamicallyResize={!shouldFitContainer}
                     />
                 </PressableWithoutFocus>
             )}

diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -1,8 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
-import RenderHTML from '../RenderHTML';
 import Image from '../Image';
+import ThumbnailImage from '../ThumbnailImage';
+import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
+import ROUTES from '../../ROUTES';
+import CONST from '../../CONST';
+import {ShowContextMenuContext} from '../ShowContextMenuContext';
+import Navigation from '../../libs/Navigation/Navigation';
+import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     /** thumbnail URI for the image */
@@ -20,20 +27,47 @@ const defaultProps = {
     enablePreviewModal: false,
 };
 
+/**
+ * An image with an optional thumbnail that fills its parent container. If the thumbnail is passed,
+ * we try to resolve both the image and thumbnail from the API. Similar to ImageRenderer, we show
+ * and optional preview modal as well.
+ */
+
 function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
+    const {translate} = useLocalize();
+
     if (thumbnail) {
-        return (
-            <RenderHTML
-                html={`
-                    <img
-                        src="${thumbnail}"
-                        data-expensify-source="${image}"
-                        data-expensify-fit-container="true"
-                        data-expensify-preview-modal-disabled="${!enablePreviewModal}"
-                    />
-            `}
+        const imageSource = tryResolveUrlFromApiRoot(image);
+        const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail);
+        const thumbnailComponent = (
+            <ThumbnailImage
+                previewSourceURL={thumbnailSource}
+                style={[styles.w100, styles.h100]}
+                isAuthTokenRequired
+                shouldDynamicallyResize={false}
             />
         );
+
+        if (enablePreviewModal) {
+            return (
+                <ShowContextMenuContext.Consumer>
+                    {({report}) => (
+                        <PressableWithoutFocus
+                            style={[styles.noOutline, styles.w100, styles.h100]}
+                            onPress={() => {
+                                const route = ROUTES.getReportAttachmentRoute(report.reportID, imageSource);
+                                Navigation.navigate(route);
+                            }}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                            accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                        >
+                            {thumbnailComponent}
+                        </PressableWithoutFocus>
+                    )}
+                </ShowContextMenuContext.Consumer>
+            );
+        }
+        return thumbnailComponent;
     }
 
     return (