uppy
Version:
Almost as cute as a Puppy :dog:
172 lines (134 loc) • 10.7 kB
JavaScript
;
var _appendChild = require('yo-yoify/lib/appendChild'),
_svgNamespace = 'http://www.w3.org/2000/svg';
var throttle = require('lodash.throttle');
function progressDetails(props) {
var _span;
return _span = document.createElement('span'), _appendChild(_span, [props.totalProgress || 0, '%\u30FB', props.complete, ' / ', props.inProgress, '\u30FB', props.totalUploadedSize, ' / ', props.totalSize, '\u30FB\u2191 ', props.totalSpeed, '/s\u30FB', props.totalETA]), _span;
}
var throttledProgressDetails = throttle(progressDetails, 1000, { leading: true, trailing: true });
var STATE_ERROR = 'error';
var STATE_WAITING = 'waiting';
var STATE_PREPROCESSING = 'preprocessing';
var STATE_UPLOADING = 'uploading';
var STATE_POSTPROCESSING = 'postprocessing';
var STATE_COMPLETE = 'complete';
function getUploadingState(props, files) {
if (props.error) {
return STATE_ERROR;
}
// If ALL files have been completed, show the completed state.
if (props.isAllComplete) {
return STATE_COMPLETE;
}
var state = STATE_WAITING;
var fileIDs = Object.keys(files);
for (var i = 0; i < fileIDs.length; i++) {
var progress = files[fileIDs[i]].progress;
// If ANY files are being uploaded right now, show the uploading state.
if (progress.uploadStarted && !progress.uploadComplete) {
return 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 !== STATE_UPLOADING) {
state = 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 !== STATE_UPLOADING && state !== STATE_PREPROCESSING) {
state = STATE_POSTPROCESSING;
}
}
return state;
}
function calculateProcessingProgress(files) {
// Collect pre or postprocessing progress states.
var progresses = [];
Object.keys(files).forEach(function (fileID) {
var progress = files[fileID].progress;
if (progress.preprocess) {
progresses.push(progress.preprocess);
}
if (progress.postprocess) {
progresses.push(progress.postprocess);
}
}
// In the future we should probably do this differently. For now we'll take the
// mode and message from the first file…
);var _progresses$ = progresses[0],
mode = _progresses$.mode,
message = _progresses$.message;
var value = progresses.filter(isDeterminate).reduce(function (total, progress, index, all) {
return total + progress.value / all.length;
}, 0);
function isDeterminate(progress) {
return progress.mode === 'determinate';
}
return {
mode: mode,
message: message,
value: value
};
}
module.exports = function (props) {
var _progress, _div, _uppyStatusBar;
props = props || {};
var uploadState = getUploadingState(props, props.files || {});
var progressValue = props.totalProgress;
var progressMode = void 0;
var progressBarContent = void 0;
if (uploadState === STATE_PREPROCESSING || uploadState === STATE_POSTPROCESSING) {
var progress = calculateProcessingProgress(props.files);
progressMode = progress.mode;
if (progressMode === 'determinate') {
progressValue = progress.value * 100;
}
progressBarContent = ProgressBarProcessing(progress);
} else if (uploadState === STATE_COMPLETE) {
progressBarContent = ProgressBarComplete(props);
} else if (uploadState === STATE_UPLOADING) {
progressBarContent = ProgressBarUploading(props);
} else if (uploadState === STATE_ERROR) {
progressValue = undefined;
progressBarContent = ProgressBarError(props);
}
var width = typeof progressValue === 'number' ? progressValue : 100;
return _uppyStatusBar = document.createElement('div'), _uppyStatusBar.setAttribute('aria-hidden', '' + String(uploadState === STATE_WAITING) + ''), _uppyStatusBar.setAttribute('title', ''), _uppyStatusBar.setAttribute('class', 'UppyStatusBar is-' + String(uploadState) + ''), _appendChild(_uppyStatusBar, [' ', (_progress = document.createElement('progress'), _progress.setAttribute('style', 'display: none;'), _progress.setAttribute('min', '0'), _progress.setAttribute('max', '100'), _progress.setAttribute('value', '' + String(progressValue) + ''), _progress), ' ', (_div = document.createElement('div'), _div.setAttribute('style', 'width: ' + String(width) + '%'), _div.setAttribute('class', 'UppyStatusBar-progress ' + String(progressMode ? 'is-' + progressMode : '') + ''), _div), ' ', progressBarContent, ' ']), _uppyStatusBar;
};
var ProgressBarProcessing = function ProgressBarProcessing(props) {
var _uppyStatusBarContent;
return _uppyStatusBarContent = document.createElement('div'), _uppyStatusBarContent.setAttribute('class', 'UppyStatusBar-content'), _appendChild(_uppyStatusBarContent, [' ', props.mode === 'determinate' ? Math.round(props.value * 100) + '%\u30FB' : '', ' ', props.message, ' ']), _uppyStatusBarContent;
};
var ProgressBarUploading = function ProgressBarUploading(props) {
var _uppyStatusBarContent2, _span2, _span3;
return _uppyStatusBarContent2 = document.createElement('div'), _uppyStatusBarContent2.setAttribute('class', 'UppyStatusBar-content'), _appendChild(_uppyStatusBarContent2, [' ', props.isUploadStarted && !props.isAllComplete ? !props.isAllPaused ? (_span2 = document.createElement('span'), _span2.setAttribute('title', 'Uploading'), _appendChild(_span2, [pauseResumeButtons(props), ' Uploading... ', throttledProgressDetails(props)]), _span2) : (_span3 = document.createElement('span'), _span3.setAttribute('title', 'Paused'), _appendChild(_span3, [pauseResumeButtons(props), ' Paused\u30FB', props.totalProgress, '%']), _span3) : null, ' ']), _uppyStatusBarContent2;
};
var ProgressBarComplete = function ProgressBarComplete(_ref) {
var _path, _uppyStatusBarAction, _span4, _uppyStatusBarContent3;
var totalProgress = _ref.totalProgress;
return _uppyStatusBarContent3 = document.createElement('div'), _uppyStatusBarContent3.setAttribute('class', 'UppyStatusBar-content'), _appendChild(_uppyStatusBarContent3, [' ', (_span4 = document.createElement('span'), _span4.setAttribute('title', 'Complete'), _appendChild(_span4, [' ', (_uppyStatusBarAction = document.createElementNS(_svgNamespace, 'svg'), _uppyStatusBarAction.setAttribute('aria-hidden', 'true'), _uppyStatusBarAction.setAttribute('width', '18'), _uppyStatusBarAction.setAttribute('height', '17'), _uppyStatusBarAction.setAttribute('viewBox', '0 0 23 17'), _uppyStatusBarAction.setAttribute('class', 'UppyStatusBar-action UppyIcon'), _appendChild(_uppyStatusBarAction, [' ', (_path = document.createElementNS(_svgNamespace, 'path'), _path.setAttribute('d', 'M8.944 17L0 7.865l2.555-2.61 6.39 6.525L20.41 0 23 2.645z'), _path), ' ']), _uppyStatusBarAction), ' Upload complete\u30FB', totalProgress, '% ']), _span4), ' ']), _uppyStatusBarContent3;
};
var ProgressBarError = function ProgressBarError(_ref2) {
var _span5, _uppyStatusBarContent4;
var error = _ref2.error;
return _uppyStatusBarContent4 = document.createElement('div'), _uppyStatusBarContent4.setAttribute('class', 'UppyStatusBar-content'), _appendChild(_uppyStatusBarContent4, [' ', (_span5 = document.createElement('span'), _appendChild(_span5, [' ', error.message, ' ']), _span5), ' ']), _uppyStatusBarContent4;
};
var pauseResumeButtons = function pauseResumeButtons(props) {
var _uppyStatusBarAction2, _path2, _uppyIcon, _path3, _uppyIcon2, _path4, _uppyIcon3;
var title = props.resumableUploads ? props.isAllPaused ? 'resume upload' : 'pause upload' : 'cancel upload';
return _uppyStatusBarAction2 = document.createElement('button'), _uppyStatusBarAction2.setAttribute('title', '' + String(title) + ''), _uppyStatusBarAction2.setAttribute('type', 'button'), _uppyStatusBarAction2.onclick = function () {
return togglePauseResume(props);
}, _uppyStatusBarAction2.setAttribute('class', 'UppyStatusBar-action'), _appendChild(_uppyStatusBarAction2, [' ', props.resumableUploads ? props.isAllPaused ? (_uppyIcon = document.createElementNS(_svgNamespace, 'svg'), _uppyIcon.setAttribute('aria-hidden', 'true'), _uppyIcon.setAttribute('width', '15'), _uppyIcon.setAttribute('height', '17'), _uppyIcon.setAttribute('viewBox', '0 0 11 13'), _uppyIcon.setAttribute('class', 'UppyIcon'), _appendChild(_uppyIcon, [' ', (_path2 = document.createElementNS(_svgNamespace, 'path'), _path2.setAttribute('d', 'M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z'), _path2), ' ']), _uppyIcon) : (_uppyIcon2 = document.createElementNS(_svgNamespace, 'svg'), _uppyIcon2.setAttribute('aria-hidden', 'true'), _uppyIcon2.setAttribute('width', '16'), _uppyIcon2.setAttribute('height', '17'), _uppyIcon2.setAttribute('viewBox', '0 0 12 13'), _uppyIcon2.setAttribute('class', 'UppyIcon'), _appendChild(_uppyIcon2, [' ', (_path3 = document.createElementNS(_svgNamespace, 'path'), _path3.setAttribute('d', 'M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z'), _path3), ' ']), _uppyIcon2) : (_uppyIcon3 = document.createElementNS(_svgNamespace, 'svg'), _uppyIcon3.setAttribute('aria-hidden', 'true'), _uppyIcon3.setAttribute('width', '16px'), _uppyIcon3.setAttribute('height', '16px'), _uppyIcon3.setAttribute('viewBox', '0 0 19 19'), _uppyIcon3.setAttribute('class', 'UppyIcon'), _appendChild(_uppyIcon3, [' ', (_path4 = document.createElementNS(_svgNamespace, 'path'), _path4.setAttribute('d', 'M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z'), _path4), ' ']), _uppyIcon3), ' ']), _uppyStatusBarAction2;
};
var togglePauseResume = function togglePauseResume(props) {
if (props.isAllComplete) return;
if (!props.resumableUploads) {
return props.cancelAll();
}
if (props.isAllPaused) {
return props.resumeAll();
}
return props.pauseAll();
};
//# sourceMappingURL=StatusBar.js.map