import {ReactElement, useRef} from 'react'; import {AnimatePresence, m} from 'framer-motion'; import {driveState, useDriveStore} from '../drive-store'; import {IconButton} from '@common/ui/buttons/icon-button'; import {CloseIcon} from '@common/icons/material/Close'; import {useFileUploadStore} from '@common/uploads/uploader/file-upload-provider'; import {Trans} from '@common/i18n/trans'; import {UploadQueueItem} from './upload-queue-item'; import {useVirtualizer} from '@tanstack/react-virtual'; export function UploadQueue() { const isOpen = useDriveStore(s => s.uploadQueueIsOpen); return ( {isOpen && (
)} ); } export function Header() { const inProgressUploadsCount = useFileUploadStore(s => s.activeUploadsCount); const completedUploadsCount = useFileUploadStore( s => s.completedUploadsCount ); const clearInactive = useFileUploadStore(s => s.clearInactive); let message: ReactElement; if (inProgressUploadsCount) { message = ( ); } else if (completedUploadsCount) { message = ( ); } else { message = ; } // only allow closing upload queue if there are no active uploads return (
{message} {inProgressUploadsCount === 0 ? ( { driveState().setUploadQueueIsOpen(false); // wait for upload queue panel animation to complete, then clear inactive uploads setTimeout(() => { clearInactive(); }, 200); }} > ) : undefined}
); } function UploadList() { const uploads = useFileUploadStore(s => s.fileUploads); const uploadsArray = [...uploads.values()]; const ref = useRef(null); const virtualizer = useVirtualizer({ count: uploads.size, getScrollElement: () => ref.current, estimateSize: () => 60, overscan: 4, }); return (
{virtualizer.getVirtualItems().map(virtualItem => { const upload = uploadsArray[virtualItem.index]; return ( ); })}
); }