/
index.js
122 lines (112 loc) · 2.94 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const { h, Fragment } = require('preact')
const prettierBytes = require('@transloadit/prettier-bytes')
const MetaErrorMessage = require('../MetaErrorMessage')
const truncateString = require('@uppy/utils/lib/truncateString')
const renderFileName = (props) => {
const { author, name } = props.file.meta
function getMaxNameLength () {
if (props.containerWidth <= 352) {
return 35
}
if (props.containerWidth <= 576) {
return 60
}
// When `author` is present, we want to make sure
// the file name fits on one line so we can place
// the author on the second line.
return author ? 20 : 30
}
return (
<div className="uppy-Dashboard-Item-name" title={name}>
{truncateString(name, getMaxNameLength())}
</div>
)
}
const renderAuthor = (props) => {
const { author } = props.file.meta
const { providerName } = props.file.remote
const dot = `\u00B7`
if (!author) {
return null
}
return (
<div className="uppy-Dashboard-Item-author">
<a
href={`${author.url}?utm_source=Companion&utm_medium=referral`}
target="_blank"
rel="noopener noreferrer"
>
{truncateString(author.name, 13)}
</a>
{providerName ? (
<Fragment>
{` ${dot} `}
{providerName}
</Fragment>
) : null}
</div>
)
}
const renderFileSize = (props) => props.file.size && (
<div className="uppy-Dashboard-Item-statusSize">
{prettierBytes(props.file.size)}
</div>
)
const ReSelectButton = (props) => props.file.isGhost && (
<span>
{' \u2022 '}
<button
className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-reSelect"
type="button"
onClick={props.toggleAddFilesPanel}
>
{props.i18n('reSelect')}
</button>
</span>
)
const ErrorButton = ({ file, onClick }) => {
if (file.error) {
return (
<button
className="uppy-u-reset uppy-Dashboard-Item-errorDetails"
aria-label={file.error}
data-microtip-position="bottom"
data-microtip-size="medium"
onClick={onClick}
type="button"
>
?
</button>
)
}
return null
}
module.exports = function FileInfo (props) {
const { file } = props
return (
<div
className="uppy-Dashboard-Item-fileInfo"
data-uppy-file-source={file.source}
>
<div className="uppy-Dashboard-Item-fileName">
{renderFileName(props)}
<ErrorButton
file={props.file}
// eslint-disable-next-line no-alert
onClick={() => alert(props.file.error)} // TODO: move to a custom alert implementation
/>
</div>
<div className="uppy-Dashboard-Item-status">
{renderAuthor(props)}
{renderFileSize(props)}
{ReSelectButton(props)}
</div>
<MetaErrorMessage
file={props.file}
i18n={props.i18n}
toggleFileCard={props.toggleFileCard}
metaFields={props.metaFields}
/>
</div>
)
}