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');
|
return import(/* webpackChunkName: "features/ui" */'../../../components/sidebar-menu');
|
||||||
}
|
}
|
||||||
|
|
||||||
export function UploadArea() {
|
|
||||||
return import(/* webpackChunkName: "features/compose" */'../components/upload-area');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ModalContainer() {
|
export function ModalContainer() {
|
||||||
return import(/* webpackChunkName: "features/ui" */'../containers/modal-container');
|
return import(/* webpackChunkName: "features/ui" */'../containers/modal-container');
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue