From 2d99c962df492b498819b3d0d64e53a4f3fcede5 Mon Sep 17 00:00:00 2001
From: Stephen Burgess <stephenburgess8@gmail.com>
Date: Mon, 24 Apr 2017 13:19:33 -0500
Subject: Only show upload modal when drag event contains files (#2409)

* fix(upload): Only show upload modal when drag even contains files

* fix(firefox): Close drag window ondragend also

Do not only end drag styles on drag leave, but also on drag end. Fixes firefox bug. #687

* fix(drag-modal): Remove drag modal trigger cruft

* fix(upload-modal): Allow close with escape button
---
 app/assets/javascripts/components/features/ui/index.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts/components/features/ui/index.jsx')

diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index c92b9751b..b402639ce 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/app/assets/javascripts/components/features/ui/index.jsx
@@ -28,6 +28,8 @@ class UI extends React.PureComponent {
     this.handleDragOver = this.handleDragOver.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
     this.handleDragLeave = this.handleDragLeave.bind(this);
+    this.handleDragEnd = this.handleDragLeave.bind(this)
+    this.closeUploadModal = this.closeUploadModal.bind(this)
     this.setRef = this.setRef.bind(this);
   }
 
@@ -47,7 +49,7 @@ class UI extends React.PureComponent {
       this.dragTargets.push(e.target);
     }
 
-    if (e.dataTransfer && e.dataTransfer.items.length > 0) {
+    if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
       this.setState({ draggingOver: true });
     }
   }
@@ -88,12 +90,17 @@ class UI extends React.PureComponent {
     this.setState({ draggingOver: false });
   }
 
+  closeUploadModal() {
+    this.setState({ draggingOver: false });
+  }
+
   componentWillMount () {
     window.addEventListener('resize', this.handleResize, { passive: true });
     document.addEventListener('dragenter', this.handleDragEnter, false);
     document.addEventListener('dragover', this.handleDragOver, false);
     document.addEventListener('drop', this.handleDrop, false);
     document.addEventListener('dragleave', this.handleDragLeave, false);
+    document.addEventListener('dragend', this.handleDragEnd, false);
 
     this.props.dispatch(refreshTimeline('home'));
     this.props.dispatch(refreshNotifications());
@@ -105,6 +112,7 @@ class UI extends React.PureComponent {
     document.removeEventListener('dragover', this.handleDragOver);
     document.removeEventListener('drop', this.handleDrop);
     document.removeEventListener('dragleave', this.handleDragLeave);
+    document.removeEventListener('dragend', this.handleDragEnd);
   }
 
   setRef (c) {
@@ -143,7 +151,7 @@ class UI extends React.PureComponent {
         <NotificationsContainer />
         <LoadingBarContainer className="loading-bar" />
         <ModalContainer />
-        <UploadArea active={draggingOver} />
+        <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
       </div>
     );
   }
-- 
cgit 

