闭社主体 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.

104 lines
3.7 KiB

6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
  1. import ImmutablePropTypes from 'react-immutable-proptypes';
  2. import Avatar from './avatar';
  3. import RelativeTimestamp from './relative_timestamp';
  4. import PureRenderMixin from 'react-addons-pure-render-mixin';
  5. import DisplayName from './display_name';
  6. import MediaGallery from './media_gallery';
  7. import VideoPlayer from './video_player';
  8. import StatusContent from './status_content';
  9. import StatusActionBar from './status_action_bar';
  10. const Status = React.createClass({
  11. contextTypes: {
  12. router: React.PropTypes.object
  13. },
  14. propTypes: {
  15. status: ImmutablePropTypes.map.isRequired,
  16. wrapped: React.PropTypes.bool,
  17. onReply: React.PropTypes.func,
  18. onFavourite: React.PropTypes.func,
  19. onReblog: React.PropTypes.func,
  20. onDelete: React.PropTypes.func,
  21. me: React.PropTypes.number
  22. },
  23. mixins: [PureRenderMixin],
  24. handleClick () {
  25. const { status } = this.props;
  26. this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
  27. },
  28. handleAccountClick (id, e) {
  29. if (e.button === 0) {
  30. e.preventDefault();
  31. this.context.router.push(`/accounts/${id}`);
  32. }
  33. e.stopPropagation();
  34. },
  35. render () {
  36. var media = '';
  37. var { status, ...other } = this.props;
  38. console.log(status, this.props);
  39. if (status.get('reblog') !== null) {
  40. let displayName = status.getIn(['account', 'display_name']);
  41. if (displayName.length === 0) {
  42. displayName = status.getIn(['account', 'username']);
  43. }
  44. return (
  45. <div style={{ cursor: 'pointer' }} onClick={this.handleClick}>
  46. <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}>
  47. <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div>
  48. <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name'><strong style={{ color: '#616b86'}}>{displayName}</strong></a> reblogged
  49. </div>
  50. <Status {...other} wrapped={true} status={status.get('reblog')} />
  51. </div>
  52. );
  53. }
  54. if (status.get('media_attachments').size > 0) {
  55. if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
  56. media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />;
  57. } else {
  58. media = <MediaGallery media={status.get('media_attachments')} height={110} />;
  59. }
  60. }
  61. return (
  62. <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}>
  63. <div style={{ fontSize: '15px' }}>
  64. <div style={{ float: 'right', fontSize: '14px' }}>
  65. <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }} target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
  66. </div>
  67. <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}>
  68. <div style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
  69. <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
  70. </div>
  71. <DisplayName account={status.get('account')} />
  72. </a>
  73. </div>
  74. <StatusContent status={status} />
  75. {media}
  76. <StatusActionBar {...this.props} />
  77. </div>
  78. );
  79. }
  80. });
  81. export default Status;