diff options
Diffstat (limited to 'webapp/components/file_attachment_list')
-rw-r--r-- | webapp/components/file_attachment_list/file_attachment_list.jsx | 104 | ||||
-rw-r--r-- | webapp/components/file_attachment_list/index.js | 39 |
2 files changed, 143 insertions, 0 deletions
diff --git a/webapp/components/file_attachment_list/file_attachment_list.jsx b/webapp/components/file_attachment_list/file_attachment_list.jsx new file mode 100644 index 000000000..31b1ac424 --- /dev/null +++ b/webapp/components/file_attachment_list/file_attachment_list.jsx @@ -0,0 +1,104 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import ViewImageModal from 'components/view_image.jsx'; +import FileAttachment from 'components/file_attachment.jsx'; +import Constants from 'utils/constants.jsx'; + +import PropTypes from 'prop-types'; + +import React from 'react'; + +export default class FileAttachmentList extends React.Component { + static propTypes = { + + /* + * The post the files are attached to + */ + post: PropTypes.object.isRequired, + + /* + * The number of files attached to the post + */ + fileCount: PropTypes.number.isRequired, + + /* + * Array of metadata for each file attached to the post + */ + fileInfos: PropTypes.arrayOf(PropTypes.object), + + /* + * Set to render compactly + */ + compactDisplay: PropTypes.bool, + + actions: PropTypes.shape({ + + /* + * Function to get file metadata for a post + */ + getMissingFilesForPost: PropTypes.func.isRequired + }).isRequired + } + + constructor(props) { + super(props); + + this.handleImageClick = this.handleImageClick.bind(this); + + this.state = {showPreviewModal: false, startImgIndex: 0}; + } + + componentDidMount() { + if (this.props.post.file_ids || this.props.post.filenames) { + this.props.actions.getMissingFilesForPost(this.props.post.id); + } + } + + handleImageClick(indexClicked) { + this.setState({showPreviewModal: true, startImgIndex: indexClicked}); + } + + render() { + const postFiles = []; + if (this.props.fileInfos && this.props.fileInfos.length > 0) { + for (let i = 0; i < Math.min(this.props.fileInfos.length, Constants.MAX_DISPLAY_FILES); i++) { + const fileInfo = this.props.fileInfos[i]; + + postFiles.push( + <FileAttachment + key={fileInfo.id} + fileInfo={this.props.fileInfos[i]} + index={i} + handleImageClick={this.handleImageClick} + compactDisplay={this.props.compactDisplay} + /> + ); + } + } else if (this.props.fileCount > 0) { + for (let i = 0; i < Math.min(this.props.fileCount, Constants.MAX_DISPLAY_FILES); i++) { + // Add a placeholder to avoid pop-in once we get the file infos for this post + postFiles.push( + <div + key={`fileCount-${i}`} + className='post-image__column post-image__column--placeholder' + /> + ); + } + } + + return ( + <div> + <div className='post-image__columns clearfix'> + {postFiles} + </div> + <ViewImageModal + show={this.state.showPreviewModal} + onModalDismissed={() => this.setState({showPreviewModal: false})} + startId={this.state.startImgIndex} + fileInfos={this.props.fileInfos} + /> + </div> + ); + } +} diff --git a/webapp/components/file_attachment_list/index.js b/webapp/components/file_attachment_list/index.js new file mode 100644 index 000000000..4081e4220 --- /dev/null +++ b/webapp/components/file_attachment_list/index.js @@ -0,0 +1,39 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {getMissingFilesForPost} from 'mattermost-redux/actions/files'; +import {makeGetFilesForPost} from 'mattermost-redux/selectors/entities/files'; + +import FileAttachmentList from './file_attachment_list.jsx'; + +function makeMapStateToProps() { + const selectFilesForPost = makeGetFilesForPost(); + return function mapStateToProps(state, ownProps) { + const fileInfos = selectFilesForPost(state, ownProps.post); + + let fileCount = 0; + if (ownProps.post.file_ids) { + fileCount = ownProps.post.file_ids.length; + } else if (this.props.post.filenames) { + fileCount = ownProps.post.filenames.length; + } + + return { + ...ownProps, + fileInfos, + fileCount + }; + }; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({ + getMissingFilesForPost + }, dispatch) + }; +} + +export default connect(makeMapStateToProps, mapDispatchToProps)(FileAttachmentList); |