fix: Long filename handling in Preview

src/components/AttachmentModal.js

@@ -16,6 +16,7 @@ import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ConfirmModal from './ConfirmModal';
+import TextWithEllipsis from './TextWithEllipsis';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -89,6 +90,18 @@ class AttachmentModal extends PureComponent {
         return modalType;
     }
 
+    /**
+     * Returns the filename split into fileName and fileExtension
+     * @returns {Object}
+     */
+    splitExtensionFromFileName() {
+        const fullFileName = this.props.originalFileName ? this.props.originalFileName.trim() : lodashGet(this.state, 'file.name', '').trim();
+        const splittedFileName = fullFileName.split('.');
+        const fileExtension = splittedFileName.pop();
+        const fileName = splittedFileName.join('.');
+        return {fileName, fileExtension};
+    }
+
     /**
      * Execute the onConfirm callback and close the modal.
      */
@@ -129,6 +142,8 @@ class AttachmentModal extends PureComponent {
         const attachmentViewStyles = this.props.isSmallScreenWidth
             ? [styles.imageModalImageCenterContainer]
             : [styles.imageModalImageCenterContainer, styles.p5];
+
+        const {fileName, fileExtension} = this.splitExtensionFromFileName();
         return (
             <>
                 <Modal
@@ -148,7 +163,14 @@ class AttachmentModal extends PureComponent {
                         shouldShowDownloadButton={!this.props.isUploadingAttachment}
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
-                        subtitle={this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '')}
+                        subtitle={(
+                            <TextWithEllipsis
+                                leadingText={fileName}
+                                trailingText={fileExtension ? `.${fileExtension}` : ''}
+                                wrapperStyle={[styles.w100]}
+                                textStyle={styles.mutedTextLabel}
+                            />
+                        )}
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (

src/components/Header.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import styles from '../styles/styles';
 import Text from './Text';
 import EnvironmentBadge from './EnvironmentBadge';
@@ -10,7 +11,7 @@ const propTypes = {
     title: PropTypes.string.isRequired,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
     /** Should we show the environment badge (dev/stg)?  */
     shouldShowEnvironmentBadge: PropTypes.bool,
@@ -22,12 +23,14 @@ const defaultProps = {
 };
 const Header = props => (
     <View style={[styles.flex1, styles.flexRow]}>
-        <View>
+        <View style={styles.mw100}>
             <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
                 {props.title}
             </Text>
             {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
-            {props.subtitle ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : <></> }
+            {_.isString(props.subtitle)
+                ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text>
+                : props.subtitle}
         </View>
         {props.shouldShowEnvironmentBadge && (
             <EnvironmentBadge />

src/components/HeaderWithCloseButton.js

@@ -18,7 +18,7 @@ const propTypes = {
     title: PropTypes.string,
 
     /** Subtitle of the header */
-    subtitle: PropTypes.string,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
     /** Method to trigger when pressing download button of the header */
     onDownloadButtonPress: PropTypes.func,

src/components/TextWithEllipsis/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
+import * as StyleUtils from '../../styles/StyleUtils';
+
+const propTypes = {
+    /** Leading text before the ellipsis */
+    leadingText: PropTypes.string.isRequired,
+
+    /** Text after the ellipsis */
+    trailingText: PropTypes.string.isRequired,
+
+    /** Styles for leading and trailing text */
+    textStyle: stylePropTypes,
+
+    /** Styles for leading text View */
+    leadingTextParentStyle: stylePropTypes,
+
+    /** Styles for parent View */
+    wrapperStyle: stylePropTypes,
+};
+
+const defaultProps = {
+    textStyle: {},
+    leadingTextParentStyle: {},
+    wrapperStyle: {},
+};
+
+const TextWithEllipsis = props => (
+    <View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
+        <View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
+            <Text style={[...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
+                {props.leadingText}
+            </Text>
+        </View>
+        <View style={styles.flexShrink0}>
+            <Text style={props.textStyle}>
+                {props.trailingText}
+            </Text>
+        </View>
+    </View>
+);
+
+TextWithEllipsis.propTypes = propTypes;
+TextWithEllipsis.defaultProps = defaultProps;
+TextWithEllipsis.displayName = 'TextWithEllipsis';
+
+export default TextWithEllipsis;

src/pages/home/report/ReportTypingIndicator.js

@@ -9,6 +9,7 @@ import styles from '../../../styles/styles';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Text from '../../../components/Text';
+import TextWithEllipsis from '../../../components/TextWithEllipsis';
 
 const propTypes = {
     /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */
@@ -52,21 +53,13 @@ class ReportTypingIndicator extends React.Component {
                 return <View style={[styles.chatItemComposeSecondaryRow]} />;
             case 1:
                 return (
-                    <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow]}>
-                        <View style={[styles.chatItemComposeSecondaryRowOffset, styles.flexShrink1]}>
-                            <Text
-                                style={[styles.chatItemComposeSecondaryRowSubText]}
-                                numberOfLines={1}
-                            >
-                                {PersonalDetails.getDisplayName(this.state.usersTyping[0])}
-                            </Text>
-                        </View>
-                        <View style={[styles.flexShrink0]}>
-                            <Text style={[styles.chatItemComposeSecondaryRowSubText]}>
-                                {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
-                            </Text>
-                        </View>
-                    </View>
+                    <TextWithEllipsis
+                        leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
+                        trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
+                        textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                        wrapperStyle={styles.chatItemComposeSecondaryRow}
+                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+                    />
                 );
             default:
                 return (

src/styles/StyleUtils.js

@@ -375,6 +375,15 @@ function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped) {
     };
 }
 
+/**
+ * Parse styleParam and return Styles array
+ * @param {Object|Object[]} styleParam
+ * @returns {Object[]}
+ */
+function parseStyleAsArray(styleParam) {
+    return _.isArray(styleParam) ? styleParam : [styleParam];
+}
+
 export {
     getSafeAreaPadding,
     getSafeAreaMargins,
@@ -397,4 +406,5 @@ export {
     getLoginPagePromoStyle,
     getReportActionItemStyle,
     getMiniReportActionContextMenuWrapperStyle,
+    parseStyleAsArray,
 };