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 (
);
})}
);
}