You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.6 KiB

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