Add Modal Previews when Uploading Attachments + Copy/Paste files

package.json

@@ -40,7 +40,7 @@
     "electron-log": "^4.2.4",
     "electron-serve": "^1.0.0",
     "electron-updater": "^4.3.4",
-    "expensify-common": "git+https://git@github.com:Expensify/expensify-common.git#971b9535fb188589ba85e2987de9ad9d648d5eb1",
+    "expensify-common": "git+https://git@github.com:Expensify/expensify-common.git#d42b24c739aefbb0424291c0b2e9e817ed322ac6",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
     "lodash.get": "^4.4.2",

src/components/AttachmentModal/AttachmentModalBase.js

@@ -0,0 +1,181 @@
+import React, {Component} from 'react';
+import Modal from 'react-native-modal';
+import PropTypes from 'prop-types';
+import {
+    View, Dimensions, TouchableOpacity, Text,
+} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import AttachmentView from '../AttachmentView';
+import styles, {colors} from '../../styles/StyleSheet';
+import ModalView from '../ModalView';
+import ModalHeader from '../ModalHeader';
+import ONYXKEYS from '../../ONYXKEYS';
+import addAuthTokenToURL from '../../libs/addAuthTokenToURL';
+
+/**
+ * Modal render prop component that exposes modal launching triggers that can be used
+ * to display a full size image or PDF modally with optional confirmation button.
+ */
+
+const propTypes = {
+    // Should modal go full screen
+    pinToEdges: PropTypes.bool,
+
+    // Title of the modal header
+    title: PropTypes.string,
+
+    // Optional source URL for the image shown inside the .
+    // If not passed in via props must be specified when modal is opened.
+    sourceURL: PropTypes.string,
+
+    // Optional callback to fire when we want to preview an image and approve it for use.
+    onConfirm: PropTypes.func,
+
+    // A function as a child to pass modal launching methods to
+    children: PropTypes.func.isRequired,
+
+    // Do the urls require an authToken?
+    isAuthTokenRequired: PropTypes.bool.isRequired,
+
+    // Current user session
+    session: PropTypes.shape({
+        authToken: PropTypes.string.isRequired,
+    }).isRequired,
+};
+
+const defaultProps = {
+    pinToEdges: false,
+    title: '',
+    sourceURL: null,
+    onConfirm: null,
+};
+
+class AttachmentModalBase extends Component {
+    constructor(props) {
+        super(props);
+
+        this.updateImageDimensions = this.updateImageDimensions.bind(this);
+
+        // If pinToEdges is false, the default modal width and height will take up about 80% of the screen
+        this.modalWidth = Dimensions.get('window').width * 0.8;
+        this.modalHeight = Dimensions.get('window').height * 0.8;
+
+        // The image inside the modal shouldn't span the entire width of the modal
+        // unless it is full screen so the default is 20% smaller than the width of the modal
+        this.modalImageWidth = Dimensions.get('window').width * 0.6;
+
+        this.state = {
+            isModalOpen: false,
+            imageWidth: 300,
+            imageHeight: 300,
+            file: null,
+            sourceURL: props.sourceURL,
+        };
+    }
+
+    /**
+     * Update image dimensions once the size is fetched
+     */
+    updateImageDimensions({width, height}) {
+        // Unlike the image width, we do allow the image to span the full modal height
+        const modalHeight = this.props.pinToEdges
+            ? Dimensions.get('window').height
+            : this.modalHeight - (styles.modalHeaderBar.height || 0);
+        const modalWidth = this.props.pinToEdges ? Dimensions.get('window').width : this.modalImageWidth;
+        let imageHeight = height;
+        let imageWidth = width;
+
+        // Resize image to fit within the modal, if necessary
+        if (width > modalWidth || height > modalHeight) {
+            const scaleFactor = Math.max(width / modalWidth, height / modalHeight);
+            imageHeight = height / scaleFactor;
+            imageWidth = width / scaleFactor;
+        }
+
+        this.setState({imageWidth, imageHeight});
+    }
+
+    render() {
+        const sourceURL = addAuthTokenToURL({
+            url: this.state.sourceURL,
+            authToken: this.props.session.authToken,
+            required: this.props.isAuthTokenRequired,
+        });
+
+        return (
+            <>
+                <Modal
+                    onRequestClose={() => this.setState({isModalOpen: false})}
+                    visible={this.state.isModalOpen}
+                    transparent
+                    style={styles.m0}
+                >
+                    <ModalView
+                        pinToEdges={this.props.pinToEdges}
+                        modalWidth={this.modalWidth}
+                        modalHeight={this.modalHeight}
+                        onCloseButtonPress={() => this.setState({isModalOpen: false})}
+                    >
+                        <ModalHeader
+                            title={this.props.title}
+                            onCloseButtonPress={() => this.setState({isModalOpen: false})}
+                        />
+                        <View style={styles.imageModalImageCenterContainer}>
+                            {this.state.sourceURL && (
+                                <AttachmentView
+                                    sourceURL={sourceURL}
+                                    height={this.state.imageHeight}
+                                    width={this.state.imageWidth}
+                                    onImagePrefetched={this.updateImageDimensions}
+                                    file={this.state.file}
+                                />
+                            )}
+                        </View>
+                        {/* If we have an onConfirm method show a confirmation button */}
+                        {this.props.onConfirm && (
+                            <TouchableOpacity
+                                style={[styles.button, styles.buttonSuccess, styles.buttonConfirm]}
+                                underlayColor={colors.componentBG}
+                                onPress={() => {
+                                    this.props.onConfirm(this.state.file);
+                                    this.setState({isModalOpen: false});
+                                }}
+                            >
+                                <Text
+                                    style={[
+                                        styles.buttonText,
+                                        styles.buttonSuccessText,
+                                        styles.buttonConfirmText,
+                                    ]}
+                                >
+                                    Upload
+                                </Text>
+                            </TouchableOpacity>
+                        )}
+                    </ModalView>
+                </Modal>
+                {this.props.children({
+                    displayFileInModal: ({file}) => {
+                        if (file instanceof File) {
+                            const source = URL.createObjectURL(file);
+                            this.setState({isModalOpen: true, sourceURL: source, file});
+                        } else {
+                            this.setState({isModalOpen: true, sourceURL: file.uri, file});
+                        }
+                    },
+                    show: () => {
+                        this.setState({isModalOpen: true});
+                    },
+                })}
+            </>
+        );
+    }
+}
+
+AttachmentModalBase.propTypes = propTypes;
+AttachmentModalBase.defaultProps = defaultProps;
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(AttachmentModalBase);

src/components/AttachmentModal/attachmentModalPropTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+export default {
+    // Title of Modal
+    title: PropTypes.string.isRequired,
+
+    // Optional image or PDF source URL
+    sourceURL: PropTypes.string,
+
+    // Function as a child
+    children: PropTypes.func.isRequired,
+
+    // Do the urls require an authToken?
+    isAuthTokenRequired: PropTypes.bool,
+};

src/components/AttachmentModal/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AttachmentModalBase from './AttachmentModalBase';
+import propTypes from './attachmentModalPropTypes';
+
+const defaultProps = {
+    sourceURL: null,
+    isAuthTokenRequired: false,
+};
+
+const AttachmentModal = props => (
+    <AttachmentModalBase
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </AttachmentModalBase>
+);
+
+AttachmentModal.propTypes = propTypes;
+AttachmentModal.defaultProps = defaultProps;
+AttachmentModal.displayName = 'AttachmentModal';
+
+export default AttachmentModal;

src/components/AttachmentModal/index.native.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AttachmentModalBase from './AttachmentModalBase';
+import propTypes from './attachmentModalPropTypes';
+
+const defaultProps = {
+    sourceURL: null,
+};
+
+const AttachmentModal = props => (
+    <AttachmentModalBase
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        pinToEdges
+    >
+        {props.children}
+    </AttachmentModalBase>
+);
+
+AttachmentModal.propTypes = propTypes;
+AttachmentModal.defaultProps = defaultProps;
+AttachmentModal.displayName = 'AttachmentModal';
+
+export default AttachmentModal;

src/components/AttachmentView.js

@@ -1,42 +1,73 @@
 import React from 'react';
+import {View, Image, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import styles from '../styles/StyleSheet';
 import PDFView from './PDFView';
 import ImageView from './ImageView';
+import iconFile from '../../assets/images/icon-file.png';
 
 const propTypes = {
     // URL to full-sized attachment
     sourceURL: PropTypes.string.isRequired,
 
     // Height of image
-    imageHeight: PropTypes.number,
+    height: PropTypes.number,
 
     // Width of image
-    imageWidth: PropTypes.number,
+    width: PropTypes.number,
+
+    file: PropTypes.shape({
+        name: PropTypes.string,
+    }),
+
+    // Callback to fire once image has been measured
+    onImagePrefetched: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
-    imageHeight: 200,
-    imageWidth: 200,
+    height: 200,
+    width: 200,
+    file: {
+        name: 'Unknown Filename',
+    },
 };
 
-const AttachmentView = props => (
-    <>
-        {Str.isPDF(props.sourceURL) ? (
+const AttachmentView = (props) => {
+    if (Str.isPDF(props.sourceURL)) {
+        return (
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
             />
-        ) : (
+        );
+    }
+
+    // For this check we use both sourceURL and file.name since temporary file sourceURL is a blob
+    // both PDFs and images will appear as images when pasted into the the text field
+    if (Str.isImage(props.sourceURL) || (props.file && Str.isImage(props.file.name))) {
+        return (
             <ImageView
-                imageWidth={props.imageWidth}
-                imageHeight={props.imageHeight}
-                sourceURL={props.sourceURL}
+                width={props.width}
+                height={props.height}
+                url={props.sourceURL}
+                onMeasure={props.onImagePrefetched}
             />
-        )}
-    </>
-);
+        );
+    }
+
+    return (
+        <View
+            style={styles.defaultAttachmentView}
+        >
+            <Image
+                source={iconFile}
+                style={styles.defaultAttachmentViewIcon}
+            />
+            <Text style={styles.textStrong}>{props.file && props.file.name}</Text>
+        </View>
+    );
+};
 
 AttachmentView.propTypes = propTypes;
 AttachmentView.defaultProps = defaultProps;