forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
file_info_preview.tsx
74 lines (64 loc) · 2.27 KB
/
file_info_preview.tsx
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
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import * as Utils from 'utils/utils.jsx';
type Props = {
fileInfo: {
name: string;
extension: string;
size: number;
};
fileUrl: string;
canDownloadFiles: boolean;
};
export default class FileInfoPreview extends React.PureComponent<Props> {
render() {
const fileInfo = this.props.fileInfo;
const fileUrl = this.props.fileUrl;
// non-image files include a section providing details about the file
const infoParts = [];
if (fileInfo.extension !== '') {
infoParts.push(Utils.localizeMessage('file_info_preview.type', 'File type ') + fileInfo.extension.toUpperCase());
}
if (fileInfo.size) {
infoParts.push(Utils.localizeMessage('file_info_preview.size', 'Size ') + Utils.fileSizeToString(fileInfo.size));
}
const infoString = infoParts.join(', ');
let preview = null;
if (this.props.canDownloadFiles) {
preview = (
<a
className='file-details__preview'
href={fileUrl}
target='_blank'
rel='noopener noreferrer'
>
<span className='file-details__preview-helper'/>
<img
alt={'file preview'}
src={Utils.getFileIconPath(fileInfo)}
/>
</a>
);
} else {
preview = (
<span className='file-details__preview'>
<span className='file-details__preview-helper'/>
<img
alt={'file preview'}
src={Utils.getFileIconPath(fileInfo)}
/>
</span>
);
}
return (
<div className='file-details__container'>
{preview}
<div className='file-details'>
<div className='file-details__name'>{fileInfo.name}</div>
<div className='file-details__info'>{infoString}</div>
</div>
</div>
);
}
}