// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import * as TextFormatting from 'utils/text_formatting.jsx'; import {localizeMessage} from 'utils/utils.jsx'; import * as PostActions from 'actions/post_actions.jsx'; import $ from 'jquery'; import React from 'react'; import PropTypes from 'prop-types'; export default class PostAttachment extends React.PureComponent { static propTypes = { /** * The post id */ postId: PropTypes.string.isRequired, /** * The attachment to render */ attachment: PropTypes.object.isRequired } constructor(props) { super(props); this.handleActionButtonClick = this.handleActionButtonClick.bind(this); this.getActionView = this.getActionView.bind(this); this.getFieldsTable = this.getFieldsTable.bind(this); this.getInitState = this.getInitState.bind(this); this.shouldCollapse = this.shouldCollapse.bind(this); this.toggleCollapseState = this.toggleCollapseState.bind(this); } componentDidMount() { $(this.refs.attachment).on('click', '.attachment-link-more', this.toggleCollapseState); } componentWillUnmount() { $(this.refs.attachment).off('click', '.attachment-link-more', this.toggleCollapseState); } componentWillMount() { this.setState(this.getInitState()); } getInitState() { const shouldCollapse = this.shouldCollapse(); const text = TextFormatting.formatText(this.props.attachment.text || ''); const uncollapsedText = text + (shouldCollapse ? `
` : ''); const collapsedText = shouldCollapse ? this.getCollapsedText() : text; return { shouldCollapse, collapsedText, uncollapsedText, text: shouldCollapse ? collapsedText : uncollapsedText, collapsed: shouldCollapse }; } toggleCollapseState(e) { e.preventDefault(); this.setState((prevState) => { return { text: prevState.collapsed ? prevState.uncollapsedText : prevState.collapsedText, collapsed: !prevState.collapsed }; }); } shouldCollapse() { const text = this.props.attachment.text || ''; return (text.match(/\n/g) || []).length >= 5 || text.length > 700; } getCollapsedText() { let text = this.props.attachment.text || ''; if ((text.match(/\n/g) || []).length >= 5) { text = text.split('\n').splice(0, 5).join('\n'); } if (text.length > 300) { text = text.substr(0, 300); } return TextFormatting.formatText(text) + ``; } getActionView() { const actions = this.props.attachment.actions; if (!actions || !actions.length) { return ''; } const buttons = []; actions.forEach((action) => { if (!action.id || !action.name) { return; } buttons.push( ); }); return (