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 { FormattedMessage } from 'react-intl';
   6 import classNames from 'classnames';
   7 import Icon from 'mastodon/components/icon';
   8
   9 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
  10
  11 export default class AttachmentList extends ImmutablePureComponent {
  12
  13   static propTypes = {
  14     media: ImmutablePropTypes.list.isRequired,
  15     compact: PropTypes.bool,
  16   };
  17
  18   render () {
  19     const { media, compact } = this.props;
  20
  21     return (
  22       <div className={classNames('attachment-list', { compact })}>
  23         {!compact && (
  24           <div className='attachment-list__icon'>
  25             <Icon id='link' />
  26           </div>
  27         )}
  28
  29         <ul className='attachment-list__list'>
  30           {media.map(attachment => {
  31             const displayUrl = attachment.get('remote_url') || attachment.get('url');
  32
  33             return (
  34               <li key={attachment.get('id')}>
  35                 <a href={displayUrl} target='_blank' rel='noopener noreferrer'>
  36                   {compact && <Icon id='link' />}
  37                   {compact && ' ' }
  38                   {displayUrl ? filename(displayUrl) : <FormattedMessage id='attachments_list.unprocessed' defaultMessage='(unprocessed)' />}
  39                 </a>
  40               </li>
  41             );
  42           })}
  43         </ul>
  44       </div>
  45     );
  46   }
  47
  48 }