diff options
| author | Andy Lo-A-Foe <andy.loafoe@aemian.com> | 2016-04-06 14:23:26 +0200 |
|---|---|---|
| committer | Christopher Speller <crspeller@gmail.com> | 2016-04-06 08:23:26 -0400 |
| commit | 1a1fd39cf8e42c143fe9057b50aad5e074b91947 (patch) | |
| tree | a610b5f411f3c4a0efd713e13e6fce935ceb7afc /webapp | |
| parent | 1954c449931344baca04b126c86b00f95677a570 (diff) | |
| download | chat-1a1fd39cf8e42c143fe9057b50aad5e074b91947.tar.gz chat-1a1fd39cf8e42c143fe9057b50aad5e074b91947.tar.bz2 chat-1a1fd39cf8e42c143fe9057b50aad5e074b91947.zip | |
PLT-2525: Render attachment fields similar to Slack
* Render attachment fields similar to Slack
* Add /loadtest json url command
This allows us to easily create test posts with
more props like Slack attachments
Diffstat (limited to 'webapp')
| -rw-r--r-- | webapp/components/post_attachment.jsx | 131 |
1 files changed, 69 insertions, 62 deletions
diff --git a/webapp/components/post_attachment.jsx b/webapp/components/post_attachment.jsx index 7c4125c27..1c3df6ea2 100644 --- a/webapp/components/post_attachment.jsx +++ b/webapp/components/post_attachment.jsx @@ -87,75 +87,82 @@ class PostAttachment extends React.Component { return ''; } - const compactTable = fields.filter((field) => field.short).length > 0; - let tHead; - let tBody; - - if (compactTable) { - let headerCols = []; - let bodyCols = []; - - fields.forEach((field, i) => { - headerCols.push( - <th - className='attachment___field-caption' - key={'attachment__field-caption-' + i} + 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( + <table + className='attachment___fields' + key={'attachment__table__' + nrTables} > - {field.title} - </th> + <thead> + <tr> + {headerCols} + </tr> + </thead> + <tbody> + <tr> + {bodyCols} + </tr> + </tbody> + </table> ); - bodyCols.push( - <td - className='attachment___field' - key={'attachment__field-' + i} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}} - > - </td> - ); - }); - - tHead = ( - <tr> - {headerCols} - </tr> + headerCols = []; + bodyCols = []; + rowPos = 0; + nrTables += 1; + lastWasLong = false; + } + headerCols.push( + <th + className='attachment___field-caption' + key={'attachment__field-caption-' + i + '__' + nrTables} + width='50%' + > + {field.title} + </th> ); - tBody = ( - <tr> - {bodyCols} - </tr> + bodyCols.push( + <td + className='attachment___field' + key={'attachment__field-' + i + '__' + nrTables} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}} + > + </td> ); - } else { - tBody = []; - - fields.forEach((field, i) => { - tBody.push( - <tr key={'attachment__field-' + i}> - <td - className='attachment___field-caption' - > - {field.title} - </td> - <td - className='attachment___field' - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}} - > - </td> - </tr> + rowPos += 1; + lastWasLong = !(field.short === true); + }); + if (headerCols.length > 0) { // Flush last fields + fieldTables.push( + <table + className='attachment___fields' + key={'attachment__table__' + nrTables} + > + <thead> + <tr> + {headerCols} + </tr> + </thead> + <tbody> + <tr> + {bodyCols} + </tr> + </tbody> + </table> ); - }); } - return ( - <table - className='attachment___fields' - > - <thead> - {tHead} - </thead> - <tbody> - {tBody} - </tbody> - </table> + <div> + {fieldTables} + </div> ); } |