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
This commit is contained in:
Stephen Burgess 2017-04-24 13:19:33 -05:00 committed by Eugen
parent e59f5c8e13
commit 2d99c962df
2 changed files with 40 additions and 3 deletions

View File

@ -4,6 +4,34 @@ import { FormattedMessage } from 'react-intl';
class UploadArea extends React.PureComponent { 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 () { render () {
const { active } = this.props; const { active } = this.props;
@ -24,7 +52,8 @@ class UploadArea extends React.PureComponent {
} }
UploadArea.propTypes = { UploadArea.propTypes = {
active: PropTypes.bool active: PropTypes.bool,
onClose: PropTypes.func
}; };
export default UploadArea; export default UploadArea;

View File

@ -28,6 +28,8 @@ class UI extends React.PureComponent {
this.handleDragOver = this.handleDragOver.bind(this); this.handleDragOver = this.handleDragOver.bind(this);
this.handleDrop = this.handleDrop.bind(this); this.handleDrop = this.handleDrop.bind(this);
this.handleDragLeave = this.handleDragLeave.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); this.setRef = this.setRef.bind(this);
} }
@ -47,7 +49,7 @@ class UI extends React.PureComponent {
this.dragTargets.push(e.target); 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 }); this.setState({ draggingOver: true });
} }
} }
@ -88,12 +90,17 @@ class UI extends React.PureComponent {
this.setState({ draggingOver: false }); this.setState({ draggingOver: false });
} }
closeUploadModal() {
this.setState({ draggingOver: false });
}
componentWillMount () { componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true }); window.addEventListener('resize', this.handleResize, { passive: true });
document.addEventListener('dragenter', this.handleDragEnter, false); document.addEventListener('dragenter', this.handleDragEnter, false);
document.addEventListener('dragover', this.handleDragOver, false); document.addEventListener('dragover', this.handleDragOver, false);
document.addEventListener('drop', this.handleDrop, false); document.addEventListener('drop', this.handleDrop, false);
document.addEventListener('dragleave', this.handleDragLeave, false); document.addEventListener('dragleave', this.handleDragLeave, false);
document.addEventListener('dragend', this.handleDragEnd, false);
this.props.dispatch(refreshTimeline('home')); this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications()); this.props.dispatch(refreshNotifications());
@ -105,6 +112,7 @@ class UI extends React.PureComponent {
document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('dragover', this.handleDragOver);
document.removeEventListener('drop', this.handleDrop); document.removeEventListener('drop', this.handleDrop);
document.removeEventListener('dragleave', this.handleDragLeave); document.removeEventListener('dragleave', this.handleDragLeave);
document.removeEventListener('dragend', this.handleDragEnd);
} }
setRef (c) { setRef (c) {
@ -143,7 +151,7 @@ class UI extends React.PureComponent {
<NotificationsContainer /> <NotificationsContainer />
<LoadingBarContainer className="loading-bar" /> <LoadingBarContainer className="loading-bar" />
<ModalContainer /> <ModalContainer />
<UploadArea active={draggingOver} /> <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
</div> </div>
); );
} }