From 97dca5940cbfa2d43cc7b114d437b9d661afb450 Mon Sep 17 00:00:00 2001
From: Akshaya Salvi <akshayasalvi12@gmail.com>
Date: Sun, 14 Nov 2021 22:44:36 +0530
Subject: [PATCH 1/4] Added ellipses for long attachment names

---
 src/components/AttachmentView.js | 28 +++++++++++++++++++++++++++-
 src/styles/styles.js             |  1 +
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 1e6eab70fc93..231fd04d6c9e 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -2,6 +2,7 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
 import PDFView from './PDFView';
 import ImageView from './ImageView';
@@ -55,6 +56,31 @@ const AttachmentView = (props) => {
         );
     }
 
+    const splitFileNameAndExtension = (name) => {
+        if (!name) {
+            return '';
+        }
+        const splitNames = name.split('.');
+        const extension = `.${splitNames.pop()}`;
+        const baseName = splitNames.join('.');
+        return {extension, baseName};
+    };
+
+    const renderFileName = () => {
+        const fileName = lodashGet(props, 'file.name', '');
+        const {baseName, extension} = splitFileNameAndExtension(fileName);
+        return (
+            <View style={[styles.flexRow, styles.flex1]}>
+                <View style={[styles.flexShrink1]}>
+                    <Text style={[styles.textStrong]} numberOfLines={1}>{baseName}</Text>
+                </View>
+                <View style={[styles.flexShrink0]}>
+                    <Text style={[styles.textStrong]}>{extension}</Text>
+                </View>
+            </View>
+        );
+    };
+
     return (
         <View
             style={styles.defaultAttachmentView}
@@ -62,7 +88,7 @@ const AttachmentView = (props) => {
             <View style={styles.mr2}>
                 <Icon src={Paperclip} />
             </View>
-            <Text style={[styles.textStrong, styles.flexShrink1]}>{props.file && props.file.name}</Text>
+            {renderFileName()}
             {props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4bdc26019b56..e4d78164d396 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1471,6 +1471,7 @@ const styles = {
         flexDirection: 'row',
         padding: 20,
         alignItems: 'center',
+        maxWidth: '100%',
     },
 
     notFoundSafeArea: {

From 0f984bb617bcbf06758fe21e9e772d18af117999 Mon Sep 17 00:00:00 2001
From: Akshaya Salvi <akshayasalvi12@gmail.com>
Date: Mon, 29 Nov 2021 23:54:52 +0530
Subject: [PATCH 2/4] Rollback ellipses changes and wrapped text in the block

---
 src/components/AttachmentView.js        | 34 +++----------------------
 src/styles/utilities/wordBreak/index.js |  3 +++
 2 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 85f488bc3cd2..b32f294bdb6c 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -2,12 +2,11 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
 import PDFView from './PDFView';
 import ImageView from './ImageView';
 import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
+import {Paperclip, Download} from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import Text from './Text';
@@ -56,43 +55,18 @@ const AttachmentView = (props) => {
         );
     }
 
-    const splitFileNameAndExtension = (name) => {
-        if (!name) {
-            return '';
-        }
-        const splitNames = name.split('.');
-        const extension = `.${splitNames.pop()}`;
-        const baseName = splitNames.join('.');
-        return {extension, baseName};
-    };
-
-    const renderFileName = () => {
-        const fileName = lodashGet(props, 'file.name', '');
-        const {baseName, extension} = splitFileNameAndExtension(fileName);
-        return (
-            <View style={[styles.flexRow, styles.flex1]}>
-                <View style={[styles.flexShrink1]}>
-                    <Text style={[styles.textStrong]} numberOfLines={1}>{baseName}</Text>
-                </View>
-                <View style={[styles.flexShrink0]}>
-                    <Text style={[styles.textStrong]}>{extension}</Text>
-                </View>
-            </View>
-        );
-    };
-
     return (
         <View
             style={styles.defaultAttachmentView}
         >
             <View style={styles.mr2}>
-                <Icon src={Expensicons.Paperclip} />
+                <Icon src={Paperclip} />
             </View>
-            {renderFileName()}
+            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.mw100]}>{props.file && props.file.name}</Text>
             {props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>
-                        <Icon src={Expensicons.Download} />
+                        <Icon src={Download} />
                     </Tooltip>
                 </View>
             )}
diff --git a/src/styles/utilities/wordBreak/index.js b/src/styles/utilities/wordBreak/index.js
index 1d606965b845..dde8d1484999 100644
--- a/src/styles/utilities/wordBreak/index.js
+++ b/src/styles/utilities/wordBreak/index.js
@@ -2,4 +2,7 @@ export default {
     breakWord: {
         wordBreak: 'break-word',
     },
+    breakAll: {
+        wordBreak: 'break-all',
+    },
 };

From 39e2b18ddec9f6d86c5360f8d2437b0bf5bdae5a Mon Sep 17 00:00:00 2001
From: Akshaya Salvi <akshayasalvi12@gmail.com>
Date: Mon, 29 Nov 2021 23:56:47 +0530
Subject: [PATCH 3/4] Lint fixes and removed extra styling

---
 src/components/AttachmentView.js | 6 +++---
 src/styles/styles.js             | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index b32f294bdb6c..af895efcc71f 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -6,7 +6,7 @@ import styles from '../styles/styles';
 import PDFView from './PDFView';
 import ImageView from './ImageView';
 import Icon from './Icon';
-import {Paperclip, Download} from './Icon/Expensicons';
+import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import Text from './Text';
@@ -60,13 +60,13 @@ const AttachmentView = (props) => {
             style={styles.defaultAttachmentView}
         >
             <View style={styles.mr2}>
-                <Icon src={Paperclip} />
+                <Icon src={Expensicons.Paperclip} />
             </View>
             <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.mw100]}>{props.file && props.file.name}</Text>
             {props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>
-                        <Icon src={Download} />
+                        <Icon src={Expensicons.Download} />
                     </Tooltip>
                 </View>
             )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index fdb3d294bf53..c7ec40e0ee57 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1565,7 +1565,6 @@ const styles = {
         flexDirection: 'row',
         padding: 20,
         alignItems: 'center',
-        maxWidth: '100%',
     },
 
     notFoundSafeArea: {

From 8ab60be9c939f55a9c91978fb136468ebef1d82f Mon Sep 17 00:00:00 2001
From: Akshaya Salvi <akshayasalvi12@gmail.com>
Date: Tue, 30 Nov 2021 00:00:06 +0530
Subject: [PATCH 4/4] Added flexWrap as well

---
 src/components/AttachmentView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index af895efcc71f..46a793602781 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -62,7 +62,7 @@ const AttachmentView = (props) => {
             <View style={styles.mr2}>
                 <Icon src={Expensicons.Paperclip} />
             </View>
-            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.mw100]}>{props.file && props.file.name}</Text>
+            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</Text>
             {props.shouldShowDownloadIcon && (
                 <View style={styles.ml2}>
                     <Tooltip text={props.translate('common.download')}>