@uppy/dashboard
Version:
Universal UI plugin for Uppy.
58 lines (57 loc) • 3.38 kB
JavaScript
import { jsx as _jsx } from "preact/jsx-runtime";
// @ts-ignore untyped
import VirtualList from '@uppy/utils/lib/VirtualList';
import { h } from 'preact';
import { useMemo } from 'preact/hooks';
import FileItem from './FileItem/index.js';
function chunks(list, size) {
const chunked = [];
let currentChunk = [];
list.forEach((item) => {
if (currentChunk.length < size) {
currentChunk.push(item);
}
else {
chunked.push(currentChunk);
currentChunk = [item];
}
});
if (currentChunk.length)
chunked.push(currentChunk);
return chunked;
}
export default function FileList({ id, i18n, uppy, files, resumableUploads, hideRetryButton, hidePauseResumeButton, hideCancelButton, showLinkToFileUploadResult, showRemoveButtonAfterComplete, metaFields, isSingleFile, toggleFileCard, handleRequestThumbnail, handleCancelThumbnail, recoveredState, individualCancellation, itemsPerRow, openFileEditor, canEditFile, toggleAddFilesPanel, containerWidth, containerHeight, }) {
// It's not great that this is hardcoded!
// It's ESPECIALLY not great that this is checking against `itemsPerRow`!
const rowHeight = itemsPerRow === 1
? // Mobile
71
: // 190px height + 2 * 5px margin
200;
// Sort files by file.isGhost, ghost files first, only if recoveredState is present
const rows = useMemo(() => {
const sortByGhostComesFirst = (file1, file2) => Number(files[file2].isGhost) - Number(files[file1].isGhost);
const fileIds = Object.keys(files);
if (recoveredState)
fileIds.sort(sortByGhostComesFirst);
return chunks(fileIds, itemsPerRow);
}, [files, itemsPerRow, recoveredState]);
const renderRow = (row) => (_jsx("div", { class: "uppy-Dashboard-filesInner",
// The `role="presentation` attribute ensures that the list items are properly
// associated with the `VirtualList` element.
role: "presentation", children: row.map((fileID) => (_jsx(FileItem, { uppy: uppy,
// FIXME This is confusing, it's actually the Dashboard's plugin ID
id: id,
// TODO move this to context
i18n: i18n,
// features
resumableUploads: resumableUploads, individualCancellation: individualCancellation,
// visual options
hideRetryButton: hideRetryButton, hidePauseResumeButton: hidePauseResumeButton, hideCancelButton: hideCancelButton, showLinkToFileUploadResult: showLinkToFileUploadResult, showRemoveButtonAfterComplete: showRemoveButtonAfterComplete, metaFields: metaFields, recoveredState: recoveredState, isSingleFile: isSingleFile, containerWidth: containerWidth, containerHeight: containerHeight,
// callbacks
toggleFileCard: toggleFileCard, handleRequestThumbnail: handleRequestThumbnail, handleCancelThumbnail: handleCancelThumbnail, role: "listitem", openFileEditor: openFileEditor, canEditFile: canEditFile, toggleAddFilesPanel: toggleAddFilesPanel, file: files[fileID] }, fileID))) }, row[0]));
if (isSingleFile) {
return _jsx("div", { class: "uppy-Dashboard-files", children: renderRow(rows[0]) });
}
return (_jsx(VirtualList, { class: "uppy-Dashboard-files", role: "list", data: rows, renderRow: renderRow, rowHeight: rowHeight }));
}