gab-social/app/javascript/gabsocial/components/status_prepend.js

113 lines
3.8 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Icon from './icon'
import Text from './text'
class StatusPrepend extends ImmutablePureComponent {
render() {
const {
intl,
status,
isFeatured,
isPromoted,
isComment,
} = this.props
if (!status) return null
const isRepost = (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object')
if (!isFeatured && !isPromoted && !isRepost && !isComment) return null
let iconId
if (isFeatured) iconId = 'pin'
else if (isPromoted) iconId = 'star'
else if (isRepost) iconId = 'repost'
else if (isComment) iconId = 'comment'
return (
<div className={[_s.d, _s.w100PC, _s.aiStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.py5, _s.px15].join(' ')}>
<Icon id={iconId} size='12px' className={[_s.cSecondary, _s.mr5].join(' ')} />
{
isRepost && !isComment &&
<div className={[_s.d, _s.flexRow].join(' ')}>
<Text size='small' color='secondary'>
<FormattedMessage
id='status.reposted_by'
defaultMessage='{name} reposted'
values={{
name: (
<NavLink
className={[_s.noUnderline, _s.underline_onHover].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`}
>
<Text size='small' color='secondary'>
<bdi>
<span dangerouslySetInnerHTML={{ __html: status.getIn(['account', 'display_name_html']) }} />
</bdi>
</Text>
</NavLink>
)
}}
/>
</Text>
</div>
}
{
!isRepost && !isComment &&
<Text color='secondary' size='small'>
{intl.formatMessage(isFeatured ? messages.pinned : messages.promoted)}
</Text>
}
{
isComment &&
<Text color='secondary' size='small'>
<FormattedMessage
id='status.commented_on_this'
defaultMessage='{name} commented on this gab'
values={{
name: (
<NavLink
className={[_s.noUnderline, _s.underline_onHover].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`}
>
<Text size='small' color='secondary'>
<bdi>
<span dangerouslySetInnerHTML={{ __html: status.getIn(['account', 'display_name_html']) }} />
</bdi>
</Text>
</NavLink>
)
}}
/>
</Text>
}
</div>
</div>
)
}
}
const messages = defineMessages({
filtered: { id: 'status.filtered', defaultMessage: 'Filtered' },
promoted: { id: 'status.promoted', defaultMessage: 'Promoted gab' },
pinned: { id: 'status.pinned', defaultMessage: 'Pinned gab' },
reposted: { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
})
StatusPrepend.propTypes = {
intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map,
isComment: PropTypes.bool,
isFeatured: PropTypes.bool,
isPromoted: PropTypes.bool,
}
export default injectIntl(StatusPrepend)