app/javascript/mastodon/components/attachment_list.js

   1 import React from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import PropTypes from 'prop-types';
   4 import ImmutablePureComponent from 'react-immutable-pure-component';
   5 import Icon from 'mastodon/components/icon';
   6
   7 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
   8
   9 export default class AttachmentList extends ImmutablePureComponent {
  10
  11   static propTypes = {
  12     media: ImmutablePropTypes.list.isRequired,
  13     compact: PropTypes.bool,
  14   };
  15
  16   render () {
  17     const { media, compact } = this.props;
  18
  19     if (compact) {
  20       return (
  21         <div className='attachment-list compact'>
  22           <ul className='attachment-list__list'>
  23             {media.map(attachment => {
  24               const displayUrl = attachment.get('remote_url') || attachment.get('url');
  25
  26               return (
  27                 <li key={attachment.get('id')}>
  28                   <a href={displayUrl} target='_blank' rel='noopener noreferrer'><Icon id='link' /> {filename(displayUrl)}</a>
  29                 </li>
  30               );
  31             })}
  32           </ul>
  33         </div>
  34       );
  35     }
  36
  37     return (
  38       <div className='attachment-list'>
  39         <div className='attachment-list__icon'>
  40           <Icon id='link' />
  41         </div>
  42
  43         <ul className='attachment-list__list'>
  44           {media.map(attachment => {
  45             const displayUrl = attachment.get('remote_url') || attachment.get('url');
  46
  47             return (
  48               <li key={attachment.get('id')}>
  49                 <a href={displayUrl} target='_blank' rel='noopener noreferrer'>{filename(displayUrl)}</a>
  50               </li>
  51             );
  52           })}
  53         </ul>
  54       </div>
  55     );
  56   }
  57
  58 }