2017-04-11 05:28:52 +03:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-04-21 21:05:35 +03:00
import PropTypes from 'prop-types' ;
2017-04-11 22:24:17 +03:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-04-11 05:28:52 +03:00
import IconButton from '../../../components/icon_button' ;
import Button from '../../../components/button' ;
2017-04-11 22:24:17 +03:00
import StatusContent from '../../../components/status_content' ;
import Avatar from '../../../components/avatar' ;
import RelativeTimestamp from '../../../components/relative_timestamp' ;
import DisplayName from '../../../components/display_name' ;
2017-04-11 05:28:52 +03:00
const messages = defineMessages ( {
reblog : { id : 'status.reblog' , defaultMessage : 'Boost' }
} ) ;
2017-04-21 21:05:35 +03:00
class BoostModal extends React . PureComponent {
2017-04-11 05:28:52 +03:00
2017-04-21 21:05:35 +03:00
constructor ( props , context ) {
super ( props , context ) ;
this . handleReblog = this . handleReblog . bind ( this ) ;
this . handleAccountClick = this . handleAccountClick . bind ( this ) ;
}
2017-04-11 05:28:52 +03:00
handleReblog ( ) {
this . props . onReblog ( this . props . status ) ;
this . props . onClose ( ) ;
2017-04-21 21:05:35 +03:00
}
2017-04-11 05:28:52 +03:00
2017-04-11 22:24:17 +03:00
handleAccountClick ( e ) {
if ( e . button === 0 ) {
e . preventDefault ( ) ;
this . props . onClose ( ) ;
this . context . router . push ( ` /accounts/ ${ this . props . status . getIn ( [ 'account' , 'id' ] ) } ` ) ;
}
2017-04-21 21:05:35 +03:00
}
2017-04-11 05:28:52 +03:00
render ( ) {
const { status , intl , onClose } = this . props ;
return (
< div className = 'modal-root__modal boost-modal' >
2017-04-11 22:24:17 +03:00
< div className = 'boost-modal__container' >
< div className = 'status light' >
2017-04-23 05:26:55 +03:00
< div className = 'boost-modal__status-header' >
< div className = 'boost-modal__status-time' >
2017-04-11 22:24:17 +03:00
< a href = { status . get ( 'url' ) } className = 'status__relative-time' target = '_blank' rel = 'noopener' > < RelativeTimestamp timestamp = { status . get ( 'created_at' ) } / > < / a >
< / div >
2017-04-23 05:26:55 +03:00
< a onClick = { this . handleAccountClick } href = { status . getIn ( [ 'account' , 'url' ] ) } className = 'status__display-name' >
< div className = 'status__avatar' >
2017-04-11 22:24:17 +03:00
< Avatar src = { status . getIn ( [ 'account' , 'avatar' ] ) } staticSrc = { status . getIn ( [ 'account' , 'avatar_static' ] ) } size = { 48 } / >
< / div >
< DisplayName account = { status . get ( 'account' ) } / >
< / a >
< / div >
< StatusContent status = { status } / >
< / div >
2017-04-11 05:28:52 +03:00
< / div >
2017-04-11 22:24:17 +03:00
< div className = 'boost-modal__action-bar' >
2017-04-13 03:15:45 +03:00
< div > < FormattedMessage id = 'boost_modal.combo' defaultMessage = 'You can press {combo} to skip this next time' values = { { combo : < span > Shift + < i className = 'fa fa-retweet' / > < / span > } } / > < / div >
2017-04-11 22:24:17 +03:00
< Button text = { intl . formatMessage ( messages . reblog ) } onClick = { this . handleReblog } / >
2017-04-11 05:28:52 +03:00
< / div >
< / div >
) ;
}
2017-04-21 21:05:35 +03:00
}
BoostModal . contextTypes = {
router : PropTypes . object
} ;
BoostModal . propTypes = {
status : ImmutablePropTypes . map . isRequired ,
onReblog : PropTypes . func . isRequired ,
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired
} ;
2017-04-11 05:28:52 +03:00
export default injectIntl ( BoostModal ) ;