diff options
Diffstat (limited to 'webapp/components/file_info_preview.jsx')
-rw-r--r-- | webapp/components/file_info_preview.jsx | 88 |
1 files changed, 44 insertions, 44 deletions
diff --git a/webapp/components/file_info_preview.jsx b/webapp/components/file_info_preview.jsx index b3d16b6a6..51825ce5b 100644 --- a/webapp/components/file_info_preview.jsx +++ b/webapp/components/file_info_preview.jsx @@ -1,59 +1,59 @@ // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import React from 'react'; + import * as Utils from 'utils/utils.jsx'; -import {defineMessages} from 'react-intl'; -import React from 'react'; -import {Link} from 'react-router/es6'; - -const holders = defineMessages({ - type: { - id: 'file_info_preview.type', - defaultMessage: 'File type ' - }, - size: { - id: 'file_info_preview.size', - defaultMessage: 'Size ' - } -}); +export default class FileInfoPreview extends React.Component { + shouldComponentUpdate(nextProps) { + if (nextProps.fileUrl !== this.props.fileUrl) { + return true; + } -export default function FileInfoPreview({filename, fileUrl, fileInfo, formatMessage}) { - // non-image files include a section providing details about the file - const infoParts = []; + if (!Utils.areObjectsEqual(nextProps.fileInfo, this.props.fileInfo)) { + return true; + } - if (fileInfo.extension !== '') { - infoParts.push(formatMessage(holders.type) + fileInfo.extension.toUpperCase()); + return false; } - 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'> - <Link - className={'file-details__preview'} - to={fileUrl} - target='_blank' - rel='noopener noreferrer' - > - <span className='file-details__preview-helper'/> - <img src={Utils.getPreviewImagePath(filename)}/> - </Link> - <div className='file-details'> - <div className='file-details__name'>{name}</div> - <div className='file-details__info'>{infoString}</div> + 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()); + } + + infoParts.push(Utils.localizeMessage('file_info_preview.size', 'Size ') + Utils.fileSizeToString(fileInfo.size)); + + const infoString = infoParts.join(', '); + + return ( + <div className='file-details__container'> + <a + className={'file-details__preview'} + to={fileUrl} + target='_blank' + rel='noopener noreferrer' + > + <span className='file-details__preview-helper'/> + <img src={Utils.getFileIconPath(fileInfo)}/> + </a> + <div className='file-details'> + <div className='file-details__name'>{fileInfo.name}</div> + <div className='file-details__info'>{infoString}</div> + </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 + fileUrl: React.PropTypes.string.isRequired }; |