// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import * as TextFormatting from 'utils/text_formatting.jsx'; import {intlShape, injectIntl, defineMessages} from 'react-intl'; const holders = defineMessages({ collapse: { id: 'post_attachment.collapse', defaultMessage: '▲ collapse text' }, more: { id: 'post_attachment.more', defaultMessage: '▼ read more' } }); import React from 'react'; class PostAttachment extends React.Component { constructor(props) { super(props); 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 ? `${this.props.intl.formatMessage(holders.collapse)}` : ''); const collapsedText = shouldCollapse ? this.getCollapsedText() : text; return { shouldCollapse, collapsedText, uncollapsedText, text: shouldCollapse ? collapsedText : uncollapsedText, collapsed: shouldCollapse }; } toggleCollapseState(e) { e.preventDefault(); let state = this.state; state.text = state.collapsed ? state.uncollapsedText : state.collapsedText; state.collapsed = !state.collapsed; this.setState(state); } 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'); } else if (text.length > 700) { text = text.substr(0, 700); } return TextFormatting.formatText(text) + `${this.props.intl.formatMessage(holders.more)}`; } getFieldsTable() { const fields = this.props.attachment.fields; if (!fields || !fields.length) { return ''; } let fieldTables = []; let headerCols = []; let bodyCols = []; let rowPos = 0; let lastWasLong = false; let nrTables = 0; fields.forEach((field, i) => { if (rowPos === 2 || !(field.short === true) || lastWasLong) { fieldTables.push(