uppy/packages/@uppy/dashboard/src/FileList.js
2018-06-14 16:31:19 +02:00

60 lines
2.4 KiB
JavaScript

const FileItem = require('./FileItem')
const ActionBrowseTagline = require('./ActionBrowseTagline')
// const { dashboardBgIcon } = require('./icons')
const classNames = require('classnames')
const { h } = require('preact')
const poweredByUppy = (props) => {
return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
</svg><span class="uppy-Dashboard-poweredByUppy">Uppy</span></a>
}
module.exports = (props) => {
const noFiles = props.totalFileCount === 0
const dashboardFilesClass = classNames(
'uppy-Dashboard-files',
{ 'uppy-Dashboard-files--noFiles': noFiles }
)
return <ul class={dashboardFilesClass}>
{noFiles &&
<div class="uppy-Dashboard-bgIcon">
<div class="uppy-Dashboard-dropFilesTitle">
<ActionBrowseTagline
acquirers={props.acquirers}
handleInputChange={props.handleInputChange}
i18n={props.i18n}
i18nArray={props.i18nArray}
allowedFileTypes={props.allowedFileTypes}
maxNumberOfFiles={props.maxNumberOfFiles}
/>
</div>
{ props.note && <div class="uppy-Dashboard-note">{props.note}</div> }
{ props.proudlyDisplayPoweredByUppy && poweredByUppy(props) }
</div>
}
{Object.keys(props.files).map((fileID) => (
<FileItem
acquirers={props.acquirers}
file={props.files[fileID]}
toggleFileCard={props.toggleFileCard}
showProgressDetails={props.showProgressDetails}
info={props.info}
log={props.log}
i18n={props.i18n}
removeFile={props.removeFile}
pauseUpload={props.pauseUpload}
cancelUpload={props.cancelUpload}
retryUpload={props.retryUpload}
hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
hideRetryButton={props.hideRetryButton}
resumableUploads={props.resumableUploads}
bundled={props.bundled}
isWide={props.isWide}
showLinkToFileUploadResult={props.showLinkToFileUploadResult}
metaFields={props.metaFields}
/>
))}
</ul>
}