71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import * as React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import spring from 'react-motion/lib/spring';
|
|
|
|
import { Icon, Stack, Text } from 'soapbox/components/ui';
|
|
|
|
import Motion from '../../ui/util/optional_motion';
|
|
|
|
const UploadArea = ({ active, onClose }) => {
|
|
const handleKeyUp = (e) => {
|
|
const keyCode = e.keyCode;
|
|
|
|
if (active) {
|
|
switch(keyCode) {
|
|
case 27:
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onClose();
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
window.addEventListener('keyup', handleKeyUp, false);
|
|
|
|
return () => window.removeEventListener('keyup', handleKeyUp);
|
|
}, []);
|
|
|
|
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={classNames({
|
|
'flex items-center justify-center bg-gray-700 bg-opacity-90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
|
|
'visible': active,
|
|
'invisible': !active,
|
|
})}
|
|
style={{ opacity: backgroundOpacity }}
|
|
>
|
|
<div className='w-80 h-40 flex relative p-2'>
|
|
<div className='absolute inset-0' style={{ transform: `scale(${backgroundScale})` }} />
|
|
|
|
<Stack space={3} justifyContent='center' alignItems='center'>
|
|
<Icon
|
|
src={require('@tabler/icons/icons/cloud-upload.svg')}
|
|
className='w-12 h-12 text-white text-opacity-90'
|
|
/>
|
|
|
|
<Text size='xl' theme='white'>
|
|
<FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' />
|
|
</Text>
|
|
</Stack>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Motion>
|
|
);
|
|
};
|
|
|
|
UploadArea.propTypes = {
|
|
active: PropTypes.bool,
|
|
onClose: PropTypes.func,
|
|
};
|
|
|
|
export default UploadArea;
|