65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
|
const html = require('choo/html');
|
||
|
|
const assets = require('../../../common/assets');
|
||
|
|
const bytes = require('../../utils').bytes;
|
||
|
|
const fileIcon = require('../fileIcon');
|
||
|
|
|
||
|
|
module.exports = function(file, state, emit) {
|
||
|
|
const transfer = state.transfer;
|
||
|
|
const transferState = transfer ? transfer.state : null;
|
||
|
|
const transferring = state.uploading || state.downloading;
|
||
|
|
const share = state.route.includes('share/');
|
||
|
|
const complete = share ? 'uploadedFile--completed' : '';
|
||
|
|
|
||
|
|
const cancelVisible =
|
||
|
|
transferring || state.route === '/' ? 'uploadedFile__cancel--visible' : '';
|
||
|
|
|
||
|
|
const stampClass =
|
||
|
|
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
|
||
|
|
|
||
|
|
function cancel(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const btn = document.querySelector('.uploadedFile__cancel');
|
||
|
|
btn.disabled = true;
|
||
|
|
if (transferring) {
|
||
|
|
emit('cancel');
|
||
|
|
} else if (state.route === '/') {
|
||
|
|
emit('removeUpload', { file });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//const percent = share ? 100 : Math.floor(progressRatio * 100);
|
||
|
|
/*
|
||
|
|
style="
|
||
|
|
background: linear-gradient(to right,
|
||
|
|
#e8f2fe 0%,
|
||
|
|
#e8f2fe ${percent}%,
|
||
|
|
#fff ${percent}%,
|
||
|
|
#fff 100%);"
|
||
|
|
*/
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<li class="uploadedFile ${complete}" id="${file.id}"
|
||
|
|
>
|
||
|
|
|
||
|
|
${fileIcon(file.name, file._hasPassword)}
|
||
|
|
|
||
|
|
<div class="uploadedFile__cancel ${cancelVisible}"
|
||
|
|
onclick=${cancel}>
|
||
|
|
<img
|
||
|
|
src="${assets.get('close-16.svg')}"
|
||
|
|
alt="cancel"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="uploadedFile__fileData">
|
||
|
|
<p class="uploadedFile__fileName">${file.name}</p>
|
||
|
|
<p class="uploadedFile__fileInfo">
|
||
|
|
<span>${bytes(file.size)}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img src="${assets.get('sent-done.svg')}"
|
||
|
|
class="uploadedFile__stamp ${stampClass}"/>
|
||
|
|
</li>
|
||
|
|
`;
|
||
|
|
};
|