Change UI view for Attachments in Chat

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import {Pressable, StyleSheet} from 'react-native';
 import lodashGet from 'lodash/get';
 import Text from '../../Text';
+import Icon from '../../Icon';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import {showContextMenu} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import {CONTEXT_MENU_TYPES} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
+import {Download} from '../../Icon/Expensicons';
+import AttachmentView from '../../AttachmentView';
+import fileDownload from '../../../libs/fileDownload';
 
 
 /*
@@ -17,34 +21,54 @@ const BaseAnchorForCommentsOnly = ({
     target,
     children,
     style,
+    text,
     ...props
 }) => {
     let linkRef;
     return (
-        <PressableWithSecondaryInteraction
-            onSecondaryInteraction={
-                (event) => {
-                    showContextMenu(
-                        CONTEXT_MENU_TYPES.LINK,
-                        event,
-                        href,
-                        lodashGet(linkRef, 'current'),
-                    );
-                }
-            }
-        >
-            <Text
-                ref={el => linkRef = el}
-                style={StyleSheet.flatten(style)}
-                accessibilityRole="link"
-                href={href}
-                hrefAttrs={{rel, target}}
+
+        props.shouldDownloadFile
+            ? (
+                <Pressable onPress={() => {
+                    fileDownload(href);
+                }}
+                >
+                    <AttachmentView
+                        sourceURL={href}
+                        file={{name: text}}
+                        rightElement={(
+                            <Icon src={Download} />
+                        )}
+                    />
+                </Pressable>
+            )
+            : (
+                <PressableWithSecondaryInteraction
+                    onSecondaryInteraction={
+                            (event) => {
+                                showContextMenu(
+                                    CONTEXT_MENU_TYPES.LINK,
+                                    event,
+                                    href,
+                                    lodashGet(linkRef, 'current'),
+                                );
+                            }
+                        }
+                >
+                    <Text
+                        ref={el => linkRef = el}
+                        style={StyleSheet.flatten(style)}
+                        accessibilityRole="link"
+                        href={href}
+                        hrefAttrs={{rel, target}}
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-            >
-                {children}
-            </Text>
-        </PressableWithSecondaryInteraction>
+                        {...props}
+                    >
+                        {children}
+                    </Text>
+                </PressableWithSecondaryInteraction>
+            )
+
     );
 };
 

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import lodashGet from 'lodash/get';
-import {Linking, StyleSheet} from 'react-native';
+import {Linking, StyleSheet, Pressable} from 'react-native';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import fileDownload from '../../../libs/fileDownload';
 import Text from '../../Text';
 import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
 import {showContextMenu} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import {CONTEXT_MENU_TYPES} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
+import Icon from '../../Icon';
+import {Download} from '../../Icon/Expensicons';
+import AttachmentView from '../../AttachmentView';
 
 /*
  * This is a default anchor component for regular links.
@@ -16,12 +19,29 @@ const BaseAnchorForCommentsOnly = ({
     children,
     style,
     shouldDownloadFile,
+    text,
     ...props
 }) => {
     let linkRef;
     return (
-        <PressableWithSecondaryInteraction
-            onSecondaryInteraction={
+        shouldDownloadFile
+            ? (
+                <Pressable onPress={() => {
+                    fileDownload(href);
+                }}
+                >
+                    <AttachmentView
+                        sourceURL={href}
+                        file={{name: text}}
+                        rightElement={(
+                            <Icon src={Download} />
+                        )}
+                    />
+                </Pressable>
+            )
+            : (
+                <PressableWithSecondaryInteraction
+                    onSecondaryInteraction={
                 (event) => {
                     showContextMenu(
                         CONTEXT_MENU_TYPES.LINK,
@@ -31,17 +51,18 @@ const BaseAnchorForCommentsOnly = ({
                     );
                 }
             }
-            onPress={() => (shouldDownloadFile ? fileDownload(href) : Linking.openURL(href))}
-        >
-            <Text
-                ref={el => linkRef = el}
-                style={StyleSheet.flatten(style)}
+                    onPress={() => Linking.openURL(href)}
+                >
+                    <Text
+                        ref={el => linkRef = el}
+                        style={StyleSheet.flatten(style)}
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-            >
-                {children}
-            </Text>
-        </PressableWithSecondaryInteraction>
+                        {...props}
+                    >
+                        {children}
+                    </Text>
+                </PressableWithSecondaryInteraction>
+            )
     );
 };
 

src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js

@@ -24,6 +24,8 @@ const propTypes = {
     /** Any additional styles to apply */
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
+
+    text: PropTypes.string,
 };
 
 const defaultProps = {
@@ -33,6 +35,7 @@ const defaultProps = {
     shouldDownloadFile: false,
     children: null,
     style: {},
+    text: '',
 };
 
 export {propTypes, defaultProps};

src/components/AttachmentView.js

@@ -20,13 +20,16 @@ const propTypes = {
         name: PropTypes.string,
     }),
 
+    rightElement: PropTypes.element,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     file: {
         name: '',
     },
+    rightElement: undefined,
 };
 
 const AttachmentView = (props) => {
@@ -58,6 +61,11 @@ const AttachmentView = (props) => {
                 <Icon src={Paperclip} />
             </View>
             <Text style={[styles.textStrong]}>{props.file && props.file.name}</Text>
+            {props.rightElement && (
+                <View style={styles.ml2}>
+                    {props.rightElement}
+                </View>
+            )}
         </View>
     );
 };

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -10,6 +10,7 @@ import {
     splitBoxModelStyle,
 } from 'react-native-render-html';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import Config from '../../CONFIG';
 import styles, {webViewStyles, getFontFamilyMonospace} from '../../styles/styles';
 import fontFamily from '../../styles/fontFamily';
@@ -67,6 +68,8 @@ function AnchorRenderer({tnode, key, style}) {
 
     // An auth token is needed to download Expensify chat attachments
     const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
+    const fileName = isAttachment ? lodashGet(tnode, 'domNode.children[0].data') : null;
+
     return (
         <AnchorForCommentsOnly
             href={htmlAttribs.href}
@@ -81,6 +84,7 @@ function AnchorRenderer({tnode, key, style}) {
             rel={htmlAttribs.rel || 'noopener noreferrer'}
             style={style}
             key={key}
+            text={fileName}
         >
             <TNodeChildrenRenderer tnode={tnode} />
         </AnchorForCommentsOnly>