Remove UploadArea component
This commit is contained in:
parent
0904b6a2a0
commit
01b99d875b
|
@ -1,71 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { spring } from 'react-motion';
|
||||
|
||||
import { Icon, Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
import Motion from '../util/optional-motion';
|
||||
|
||||
interface IUploadArea {
|
||||
/** Whether the upload area is active. */
|
||||
active: boolean
|
||||
/** Callback when the upload area is closed. */
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
/** Component to display when a file is dragged over the UI. */
|
||||
const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
if (active) {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
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={clsx({
|
||||
'flex items-center justify-center bg-gray-700/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='relative flex h-40 w-80 p-2'>
|
||||
<div className='absolute inset-0' style={{ transform: `scale(${backgroundScale})` }} />
|
||||
|
||||
<Stack space={3} justifyContent='center' alignItems='center'>
|
||||
<Icon
|
||||
src={require('@tabler/icons/cloud-upload.svg')}
|
||||
className='h-12 w-12 text-white/90'
|
||||
/>
|
||||
|
||||
<Text size='xl' theme='white'>
|
||||
<FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' />
|
||||
</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadArea;
|
|
@ -374,10 +374,6 @@ export function SidebarMenu() {
|
|||
return import(/* webpackChunkName: "features/ui" */'../../../components/sidebar-menu');
|
||||
}
|
||||
|
||||
export function UploadArea() {
|
||||
return import(/* webpackChunkName: "features/compose" */'../components/upload-area');
|
||||
}
|
||||
|
||||
export function ModalContainer() {
|
||||
return import(/* webpackChunkName: "features/ui" */'../containers/modal-container');
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue