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.

40 lines
1.5 KiB

  1. import PureRenderMixin from 'react-addons-pure-render-mixin';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import Avatar from './avatar';
  4. import IconButton from './icon_button';
  5. const ReplyIndicator = React.createClass({
  6. propTypes: {
  7. status: ImmutablePropTypes.map.isRequired,
  8. onCancel: React.PropTypes.func.isRequired
  9. },
  10. mixins: [PureRenderMixin],
  11. handleClick () {
  12. this.props.onCancel();
  13. },
  14. render () {
  15. let content = { __html: this.props.status.get('content') };
  16. return (
  17. <div style={{ background: '#9baec8', padding: '10px' }}>
  18. <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
  19. <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div>
  20. <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
  21. <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
  22. <strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span>
  23. </a>
  24. </div>
  25. <div className='reply-indicator__content' dangerouslySetInnerHTML={content} />
  26. </div>
  27. );
  28. }
  29. });
  30. export default ReplyIndicator;