Update the chat UI to reflect drag-and-drop

src/components/Composer/index.js

@@ -110,6 +110,7 @@ const IMAGE_EXTENSIONS = {
 };
 
 const COPY_DROP_EFFECT = 'copy';
+const NONE_DROP_EFFECT = 'none';
 
 /**
  * Enable Markdown parsing.
@@ -130,8 +131,20 @@ class Composer extends React.Component {
                 end: initialValue.length,
             },
         };
-        this.dragNDropListener = this.dragNDropListener.bind(this);
         this.paste = this.paste.bind(this);
+
+        this.dropZone = document.getElementById(CONST.REPORT.DROP_NATIVE_ID);
+        this.dropZoneRect = this.dropZone.getBoundingClientRect();
+        this.dragNDropListener = this.dragNDropListener.bind(this);
+        this.dropZoneDragHandler = this.dropZoneDragHandler.bind(this);
+        this.dropZoneDragListener = this.dropZoneDragListener.bind(this);
+
+        /*
+        Last detected drag state on the dropzone -> we start with dragleave since user is not dragging initially.
+        This state is updated when drop zone is left/entered entirely(not taking the children in the account) or entire window is left
+        */
+        this.dropZoneDragState = 'dragleave';
+
         this.handlePaste = this.handlePaste.bind(this);
         this.handlePastedHTML = this.handlePastedHTML.bind(this);
         this.handleWheel = this.handleWheel.bind(this);
@@ -197,46 +210,72 @@ class Composer extends React.Component {
     }
 
     /**
-     * Handles all types of drag-N-drop events on the composer
-     *
-     * @param {Object} e native Event
+     * @param {Object} event native Event
      */
-    dragNDropListener(e) {
-        let isOriginComposer = false;
-        const handler = () => {
-            // Setting dropEffect for dragover is required for '+' icon on certain platforms/browsers (eg. Safari)
-            switch (e.type) {
-                case 'dragover':
-                    e.preventDefault();
-                    e.dataTransfer.dropEffect = COPY_DROP_EFFECT;
-                    this.props.onDragOver(e, isOriginComposer);
-                    break;
-                case 'dragenter':
-                    e.dataTransfer.dropEffect = COPY_DROP_EFFECT;
-                    this.props.onDragEnter(e, isOriginComposer);
-                    break;
-                case 'dragleave':
-                    this.props.onDragLeave(e, isOriginComposer);
-                    break;
-                case 'drop':
-                    this.props.onDrop(e, isOriginComposer);
-                    break;
-                default: break;
-            }
-        };
-
-        // We first check if drop target is composer so that it can be highlighted
-        if (this.textInput.contains(e.target)) {
-            isOriginComposer = true;
-            handler();
-            return;
+    dropZoneDragHandler(event) {
+        // Setting dropEffect for dragover is required for '+' icon on certain platforms/browsers (eg. Safari)
+        switch (event.type) {
+            case 'dragover':
+                // Continuous event -> can hurt performance, be careful when subscribing
+                // eslint-disable-next-line no-param-reassign
+                event.dataTransfer.dropEffect = COPY_DROP_EFFECT;
+                this.dropZoneDragState = 'dragover';
+                this.props.onDragOver(event);
+                break;
+            case 'dragenter':
+                // Avoid reporting onDragEnter for children views -> not performant
+                if (this.dropZoneDragState === 'dragleave') {
+                // eslint-disable-next-line no-param-reassign
+                    event.dataTransfer.dropEffect = COPY_DROP_EFFECT;
+                    this.dropZoneDragState = 'dragenter';
+                    this.props.onDragEnter(event);
+                }
+                break;
+            case 'dragleave':
+                if (this.dropZoneDragState === 'dragenter' || this.dropZoneDragState === 'dragover') {
+                    if (
+                        event.clientY < this.dropZoneRect.top
+                        || event.clientY >= this.dropZoneRect.bottom
+                        || event.clientX < this.dropZoneRect.left
+                        || event.clientX >= this.dropZoneRect.right
+                    ) {
+                        this.dropZoneDragState = 'dragleave';
+                        this.props.onDragLeave(event);
+                    }
+                }
+                break;
+            case 'drop':
+                this.dropZoneDragState = 'dragleave';
+                this.props.onDrop(event);
+                break;
+            default: break;
         }
+    }
 
-        if (document.getElementById(CONST.REPORT.DROP_NATIVE_ID).contains(e.target)) {
-            handler();
+    /**
+     * Handles all types of drag-N-drop events on the drop zone associated with composer
+     *
+     * @param {Object} event native Event
+     */
+    dropZoneDragListener(event) {
+        event.preventDefault();
+        if (this.dropZone.contains(event.target)) {
+            this.dropZoneDragHandler(event);
+        } else {
+            // eslint-disable-next-line no-param-reassign
+            event.dataTransfer.dropEffect = NONE_DROP_EFFECT;
         }
     }
 
+    /**
+     * Handles all types of drag-N-drop events on the composer and associated drop zone if it exists
+     *
+     * @param {Object} event native Event
+     */
+    dragNDropListener(event) {
+        this.dropZoneDragListener(event);
+    }
+
     /**
      * Set pasted text to clipboard
      * @param {String} text

src/languages/en.js

@@ -163,6 +163,7 @@ export default {
     },
     reportActionCompose: {
         addAction: 'Actions',
+        dropToUpload: 'Drop to upload',
         sendAttachment: 'Send attachment',
         addAttachment: 'Add attachment',
         writeSomething: 'Write something...',

src/languages/es.js

@@ -163,6 +163,7 @@ export default {
     },
     reportActionCompose: {
         addAction: 'Acción',
+        dropToUpload: 'Suelta el archivo aquí para compartirlo',
         sendAttachment: 'Enviar adjunto',
         addAttachment: 'Agregar archivo adjunto',
         writeSomething: 'Escribe algo...',

src/pages/home/report/ReportActionCompose.js

@@ -47,6 +47,7 @@ import ExceededCommentLength from '../../../components/ExceededCommentLength';
 import withNavigationFocus from '../../../components/withNavigationFocus';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
 import reportPropTypes from '../../reportPropTypes';
+import ReportDropUI from './ReportDropUI';
 
 const propTypes = {
     /** Beta features list */
@@ -618,21 +619,12 @@ class ReportActionCompose extends React.Component {
                                         placeholderTextColor={themeColors.placeholderText}
                                         onChangeText={comment => this.updateComment(comment, true)}
                                         onKeyPress={this.triggerHotkeyActions}
-                                        onDragEnter={(e, isOriginComposer) => {
-                                            if (!isOriginComposer) {
-                                                return;
-                                            }
-
+                                        onDragEnter={() => {
                                             this.setState({isDraggingOver: true});
                                         }}
-                                        onDragOver={(e, isOriginComposer) => {
-                                            if (!isOriginComposer) {
-                                                return;
-                                            }
-
-                                            this.setState({isDraggingOver: true});
+                                        onDragLeave={() => {
+                                            this.setState({isDraggingOver: false});
                                         }}
-                                        onDragLeave={() => this.setState({isDraggingOver: false})}
                                         onDrop={(e) => {
                                             e.preventDefault();
 
@@ -703,6 +695,7 @@ class ReportActionCompose extends React.Component {
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>
+                {this.state.isDraggingOver && <ReportDropUI />}
             </View>
         );
     }

src/pages/home/report/ReportDropUI.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {createPortal} from 'react-dom';
+import {View} from 'react-native';
+import CONST from '../../../CONST';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import DragAndDropIcon from '../../../../assets/images/drag-and-drop.svg';
+import styles from '../../../styles/styles';
+import Text from '../../../components/Text';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const DropZone = ({children}) => createPortal(
+    children,
+    document.getElementById(CONST.REPORT.DROP_NATIVE_ID),
+);
+
+const ReportDropUI = props => (
+    <DropZone>
+        <View style={[styles.dragAndDropOverlay, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <View style={[styles.mb3]}>
+                    <DragAndDropIcon width={100} height={100} />
+                </View>
+                <Text style={[styles.h1]}>
+                    {props.translate('reportActionCompose.dropToUpload')}
+                </Text>
+            </View>
+        </View>
+    </DropZone>
+);
+
+ReportDropUI.displayName = 'ReportDropUI';
+ReportDropUI.propTypes = propTypes;
+
+export default withLocalize(ReportDropUI);

src/styles/styles.js

@@ -2699,6 +2699,19 @@ const styles = {
         alignSelf: 'center',
     },
 
+    dragAndDropOverlay: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: themeColors.dragAndDropBackground,
+        opacity: 0.96,
+        zIndex: 2,
+    },
+
     textPill: {
         ellipsizeMode: 'end',
         backgroundColor: colors.gray2,

src/styles/themes/default.js

@@ -48,4 +48,5 @@ export default {
     placeholderText: colors.gray3,
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.gray1,
+    dragAndDropBackground: colors.white,
 };