diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/file_preview.jsx | 49 |
1 files changed, 30 insertions, 19 deletions
diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 0606c1b31..93ee53515 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -1,17 +1,28 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ReactDOM from 'react-dom'; -import * as Utils from 'utils/utils.jsx'; -import {getFileThumbnailUrl} from 'mattermost-redux/utils/file_utils'; - import PropTypes from 'prop-types'; - import React from 'react'; import loadingGif from 'images/load.gif'; +import Constants from 'utils/constants.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import {getFileThumbnailUrl} from 'mattermost-redux/utils/file_utils'; + export default class FilePreview extends React.Component { + static propTypes = { + onRemove: PropTypes.func.isRequired, + fileInfos: PropTypes.arrayOf(PropTypes.object).isRequired, + uploadsInProgress: PropTypes.array + }; + + static defaultProps = { + fileInfos: [], + uploadsInProgress: [] + }; + constructor(props) { super(props); @@ -20,7 +31,7 @@ export default class FilePreview extends React.Component { componentDidUpdate() { if (this.props.uploadsInProgress.length > 0) { - ReactDOM.findDOMNode(this.refs[this.props.uploadsInProgress[0]]).scrollIntoView(); + this.refs[this.props.uploadsInProgress[0]].scrollIntoView(); } } @@ -36,10 +47,20 @@ export default class FilePreview extends React.Component { let className = 'file-preview'; let previewImage; if (type === 'image' || type === 'svg') { + let imageClassName = 'post-image'; + + if (info.width < Constants.THUMBNAIL_WIDTH && info.height < Constants.THUMBNAIL_HEIGHT) { + imageClassName += ' small'; + } else { + imageClassName += ' normal'; + } + previewImage = ( - <img - className='file-preview__image' - src={getFileThumbnailUrl(info.id)} + <div + className={imageClassName} + style={{ + backgroundImage: `url(${getFileThumbnailUrl(info.id)})` + }} /> ); } else { @@ -95,13 +116,3 @@ export default class FilePreview extends React.Component { ); } } - -FilePreview.defaultProps = { - fileInfos: [], - uploadsInProgress: [] -}; -FilePreview.propTypes = { - onRemove: PropTypes.func.isRequired, - fileInfos: PropTypes.arrayOf(PropTypes.object).isRequired, - uploadsInProgress: PropTypes.array -}; |