From 2d99c962df492b498819b3d0d64e53a4f3fcede5 Mon Sep 17 00:00:00 2001 From: Stephen Burgess Date: Mon, 24 Apr 2017 13:19:33 -0500 Subject: [PATCH] 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 --- .../features/ui/components/upload_area.jsx | 31 ++++++++++++++++++- .../components/features/ui/index.jsx | 12 +++++-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/components/features/ui/components/upload_area.jsx b/app/assets/javascripts/components/features/ui/components/upload_area.jsx index 38c2ad904d..3a933398ba 100644 --- a/app/assets/javascripts/components/features/ui/components/upload_area.jsx +++ b/app/assets/javascripts/components/features/ui/components/upload_area.jsx @@ -4,6 +4,34 @@ import { FormattedMessage } from 'react-intl'; class UploadArea extends React.PureComponent { + constructor (props, context) { + super(props, context); + + this.handleKeyUp = this.handleKeyUp.bind(this); + } + + handleKeyUp (e) { + e.preventDefault(); + e.stopPropagation(); + + const keyCode = e.keyCode + if (this.props.active) { + switch(keyCode) { + case 27: + this.props.onClose(); + break; + } + } + } + + componentDidMount () { + window.addEventListener('keyup', this.handleKeyUp, false); + } + + componentWillUnmount () { + window.removeEventListener('keyup', this.handleKeyUp); + } + render () { const { active } = this.props; @@ -24,7 +52,8 @@ class UploadArea extends React.PureComponent { } UploadArea.propTypes = { - active: PropTypes.bool + active: PropTypes.bool, + onClose: PropTypes.func }; export default UploadArea; diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index c92b9751b4..b402639ce6 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 { - + ); }