diff options
Diffstat (limited to 'webapp/components/file_info_preview.jsx')
-rw-r--r-- | webapp/components/file_info_preview.jsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/webapp/components/file_info_preview.jsx b/webapp/components/file_info_preview.jsx new file mode 100644 index 000000000..a0ec282c4 --- /dev/null +++ b/webapp/components/file_info_preview.jsx @@ -0,0 +1,57 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from 'utils/utils.jsx'; + +import {defineMessages} from 'react-intl'; +import React from 'react'; + +const holders = defineMessages({ + type: { + id: 'file_info_preview.type', + defaultMessage: 'File type ' + }, + size: { + id: 'file_info_preview.size', + defaultMessage: 'Size ' + } +}); + +export default function FileInfoPreview({filename, fileUrl, fileInfo, formatMessage}) { + // non-image files include a section providing details about the file + const infoParts = []; + + if (fileInfo.extension !== '') { + infoParts.push(formatMessage(holders.type) + fileInfo.extension.toUpperCase()); + } + + infoParts.push(formatMessage(holders.size) + Utils.fileSizeToString(fileInfo.size)); + + const infoString = infoParts.join(', '); + + const name = decodeURIComponent(Utils.getFileName(filename)); + + return ( + <div className='file-details__container'> + <a + className={'file-details__preview'} + href={fileUrl} + target='_blank' + > + <span className='file-details__preview-helper'/> + <img src={Utils.getPreviewImagePath(filename)}/> + </a> + <div className='file-details'> + <div className='file-details__name'>{name}</div> + <div className='file-details__info'>{infoString}</div> + </div> + </div> + ); +} + +FileInfoPreview.propTypes = { + filename: React.PropTypes.string.isRequired, + fileUrl: React.PropTypes.string.isRequired, + fileInfo: React.PropTypes.object.isRequired, + formatMessage: React.PropTypes.func.isRequired +}; |