@uppy/dashboard
Version:
Universal UI plugin for Uppy.
128 lines • 4.03 kB
JavaScript
import { h } from 'preact';
const uploadStates = {
STATE_ERROR: 'error',
STATE_WAITING: 'waiting',
STATE_PREPROCESSING: 'preprocessing',
STATE_UPLOADING: 'uploading',
STATE_POSTPROCESSING: 'postprocessing',
STATE_COMPLETE: 'complete',
STATE_PAUSED: 'paused'
};
function getUploadingState(isAllErrored, isAllComplete, isAllPaused, files) {
if (files === void 0) {
files = {};
}
if (isAllErrored) {
return uploadStates.STATE_ERROR;
}
if (isAllComplete) {
return uploadStates.STATE_COMPLETE;
}
if (isAllPaused) {
return uploadStates.STATE_PAUSED;
}
let state = uploadStates.STATE_WAITING;
const fileIDs = Object.keys(files);
for (let i = 0; i < fileIDs.length; i++) {
const {
progress
} = files[fileIDs[i]];
// If ANY files are being uploaded right now, show the uploading state.
if (progress.uploadStarted && !progress.uploadComplete) {
return uploadStates.STATE_UPLOADING;
}
// If files are being preprocessed AND postprocessed at this time, we show the
// preprocess state. If any files are being uploaded we show uploading.
if (progress.preprocess && state !== uploadStates.STATE_UPLOADING) {
state = uploadStates.STATE_PREPROCESSING;
}
// If NO files are being preprocessed or uploaded right now, but some files are
// being postprocessed, show the postprocess state.
if (progress.postprocess && state !== uploadStates.STATE_UPLOADING && state !== uploadStates.STATE_PREPROCESSING) {
state = uploadStates.STATE_POSTPROCESSING;
}
}
return state;
}
function UploadStatus(_ref) {
let {
files,
i18n,
isAllComplete,
isAllErrored,
isAllPaused,
inProgressNotPausedFiles,
newFiles,
processingFiles
} = _ref;
const uploadingState = getUploadingState(isAllErrored, isAllComplete, isAllPaused, files);
switch (uploadingState) {
case 'uploading':
return i18n('uploadingXFiles', {
smart_count: inProgressNotPausedFiles.length
});
case 'preprocessing':
case 'postprocessing':
return i18n('processingXFiles', {
smart_count: processingFiles.length
});
case 'paused':
return i18n('uploadPaused');
case 'waiting':
return i18n('xFilesSelected', {
smart_count: newFiles.length
});
case 'complete':
return i18n('uploadComplete');
case 'error':
return i18n('error');
default:
}
}
function PanelTopBar(props) {
const {
i18n,
isAllComplete,
hideCancelButton,
maxNumberOfFiles,
toggleAddFilesPanel,
uppy
} = props;
let {
allowNewUpload
} = props;
// TODO maybe this should be done in ../Dashboard.jsx, then just pass that down as `allowNewUpload`
if (allowNewUpload && maxNumberOfFiles) {
// eslint-disable-next-line react/destructuring-assignment
allowNewUpload = props.totalFileCount < props.maxNumberOfFiles;
}
return h("div", {
className: "uppy-DashboardContent-bar"
}, !isAllComplete && !hideCancelButton ? h("button", {
className: "uppy-DashboardContent-back",
type: "button",
onClick: () => uppy.cancelAll()
}, i18n('cancel')) : h("div", null), h("div", {
className: "uppy-DashboardContent-title",
role: "heading",
"aria-level": "1"
}, h(UploadStatus, props)), allowNewUpload ? h("button", {
className: "uppy-DashboardContent-addMore",
type: "button",
"aria-label": i18n('addMoreFiles'),
title: i18n('addMoreFiles'),
onClick: () => toggleAddFilesPanel(true)
}, h("svg", {
"aria-hidden": "true",
focusable: "false",
className: "uppy-c-icon",
width: "15",
height: "15",
viewBox: "0 0 15 15"
}, h("path", {
d: "M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z"
})), h("span", {
className: "uppy-DashboardContent-addMoreCaption"
}, i18n('addMore'))) : h("div", null));
}
export default PanelTopBar;