闭社主体 forked from https://github.com/tootsuite/mastodon
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.

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