// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import Constants from 'utils/constants.jsx'; import FileStore from 'stores/file_store.jsx'; import * as Utils from 'utils/utils.jsx'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; import PropTypes from 'prop-types'; import React from 'react'; export default class FileAttachment extends React.Component { constructor(props) { super(props); this.loadFiles = this.loadFiles.bind(this); this.onAttachmentClick = this.onAttachmentClick.bind(this); this.state = { loaded: Utils.getFileType(props.fileInfo.extension) !== 'image' }; } componentDidMount() { this.loadFiles(); } componentWillReceiveProps(nextProps) { if (nextProps.fileInfo.id !== this.props.fileInfo.id) { this.setState({ loaded: Utils.getFileType(nextProps.fileInfo.extension) !== 'image' }); } } componentDidUpdate(prevProps) { if (!this.state.loaded && this.props.fileInfo.id !== prevProps.fileInfo.id) { this.loadFiles(); } } loadFiles() { const fileInfo = this.props.fileInfo; const fileType = Utils.getFileType(fileInfo.extension); if (fileType === 'image') { const thumbnailUrl = FileStore.getFileThumbnailUrl(fileInfo.id); const img = new Image(); img.onload = () => { this.setState({loaded: true}); }; img.load(thumbnailUrl); } } onAttachmentClick(e) { e.preventDefault(); this.props.handleImageClick(this.props.index); } render() { const fileInfo = this.props.fileInfo; const fileName = fileInfo.name; const fileUrl = FileStore.getFileUrl(fileInfo.id); let thumbnail; if (this.state.loaded) { const type = Utils.getFileType(fileInfo.extension); if (type === 'image') { let className = 'post-image'; if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) { className += ' small'; } else { className += ' normal'; } thumbnail = (
); } else { thumbnail = ; } } else { thumbnail = ; } let trimmedFilename; if (fileName.length > 35) { trimmedFilename = fileName.substring(0, Math.min(35, fileName.length)) + '...'; } else { trimmedFilename = fileName; } let filenameOverlay; if (this.props.compactDisplay) { filenameOverlay = (