8cc1ed3c55
* UploadArea should only preventDefault for Escape This will make accessibility for some things less effortful, since we won't have to define a prior event handler to do whatever should be happening by default. * Remove workaround for fixed bug in SettingToggle SettingToggle was toggling itself in response to keydown of space, and then the keyup was doing it again
53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Motion from 'react-motion/lib/Motion';
|
|
import spring from 'react-motion/lib/spring';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
export default class UploadArea extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
active: PropTypes.bool,
|
|
onClose: PropTypes.func,
|
|
};
|
|
|
|
handleKeyUp = (e) => {
|
|
const keyCode = e.keyCode;
|
|
if (this.props.active) {
|
|
switch(keyCode) {
|
|
case 27:
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.props.onClose();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
window.addEventListener('keyup', this.handleKeyUp, false);
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
window.removeEventListener('keyup', this.handleKeyUp);
|
|
}
|
|
|
|
render () {
|
|
const { active } = this.props;
|
|
|
|
return (
|
|
<Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
|
|
{({ backgroundOpacity, backgroundScale }) =>
|
|
<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
|
|
<div className='upload-area__drop'>
|
|
<div className='upload-area__background' style={{ transform: `translateZ(0) scale(${backgroundScale})` }} />
|
|
<div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</Motion>
|
|
);
|
|
}
|
|
|
|
}
|