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:
parent
e59f5c8e13
commit
2d99c962df
2 changed files with 40 additions and 3 deletions
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue