// 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 $ from 'jquery'; import React from 'react'; import PropTypes from 'prop-types'; export default class PostAttachment extends React.PureComponent { static propTypes = { /** * The attachment to render */ attachment: PropTypes.object.isRequired } 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 ? `
${localizeMessage('post_attachment.collapse', 'Show less...')}
` : ''); const collapsedText = shouldCollapse ? this.getCollapsedText() : text; return { shouldCollapse, collapsedText, uncollapsedText, text: shouldCollapse ? collapsedText : uncollapsedText, collapsed: shouldCollapse }; } toggleCollapseState(e) { e.preventDefault(); this.setState({ text: this.state.collapsed ? this.state.uncollapsedText : this.state.collapsedText, collapsed: !this.state.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'); } else if (text.length > 700) { text = text.substr(0, 700); } return TextFormatting.formatText(text) + `
${localizeMessage('post_attachment.more', 'Show more...')}
`; } getFieldsTable() { const fields = this.props.attachment.fields; if (!fields || !fields.length) { return ''; } const 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( {headerCols} {bodyCols}
); headerCols = []; bodyCols = []; rowPos = 0; nrTables += 1; lastWasLong = false; } headerCols.push( {field.title} ); bodyCols.push( ); rowPos += 1; lastWasLong = !(field.short === true); }); if (headerCols.length > 0) { // Flush last fields fieldTables.push( {headerCols} {bodyCols}
); } return (
{fieldTables}
); } render() { const data = this.props.attachment; let preText; if (data.pretext) { preText = (
); } let author = []; if (data.author_name || data.author_icon) { if (data.author_icon) { author.push( ); } if (data.author_name) { author.push( {data.author_name} ); } } if (data.author_link) { author = ( {author} ); } let title; if (data.title) { if (data.title_link) { title = (

{data.title}

); } else { title = (

{data.title}

); } } let text; if (data.text) { text = (
); } let image; if (data.image_url) { image = ( ); } let thumb; if (data.thumb_url) { thumb = (
); } const fields = this.getFieldsTable(); let useBorderStyle; if (data.color && data.color[0] === '#') { useBorderStyle = {borderLeftColor: data.color}; } return (
{preText}
{author} {title}
{text} {image} {fields}
{thumb}
); } }