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

178 lines
6.6 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-04-02 04:17:21 +01:00
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,
2020-04-22 06:00:11 +01:00
isFeatured,
isPromoted,
2020-05-05 06:16:01 +01:00
isComment,
isPinnedInGroup,
onOpenProModal,
2020-04-02 04:17:21 +01:00
} = this.props
if (!status) return null
const isRepost = (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object')
const showRepostedComment = !!status.getIn(['reblog', 'in_reply_to_account_id'], null) && isRepost
const reblogUrl = status.getIn(['reblog', 'url'], null)
if (!isFeatured && !isPinnedInGroup && !isPromoted && !isRepost && !isComment) return null
2020-05-05 06:16:01 +01:00
let iconId
if (isFeatured || isPinnedInGroup) iconId = 'pin'
2020-05-05 06:16:01 +01:00
else if (isPromoted) iconId = 'star'
else if (isRepost) iconId = 'repost'
else if (isComment) iconId = 'comment'
2020-04-02 04:17:21 +01:00
return (
<div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.d, _s.flexNormal, _s.flexRow, _s.aiCenter, _s.py5, _s.px15, _s.overflowHidden].join(' ')}>
<Icon id={iconId} size='12px' className={[_s.cSecondary, _s.mr5].join(' ')} />
2020-04-02 04:17:21 +01:00
{
isRepost && !isComment && !showRepostedComment &&
<div className={[_s.d, _s.flexRow].join(' ')}>
2020-04-02 04:17:21 +01:00
<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 && showRepostedComment &&
<div className={[_s.d, _s.flexRow].join(' ')}>
<Text size='small' color='secondary'>
<FormattedMessage
id='status.reposted_comment_by'
defaultMessage='{name} reposted a {comment} on {this_post}'
values={{
name: (
<NavLink
className={[_s.noUnderline, _s.underline_onHover].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`}
>
<Text size='small' color='secondary' weight='medium'>
<bdi>
<span dangerouslySetInnerHTML={{ __html: status.getIn(['account', 'display_name_html']) }} />
</bdi>
</Text>
</NavLink>
),
comment: (
<a
className={[_s.noUnderline, _s.underline_onHover].join(' ')}
href={reblogUrl}
>
<Text size='small' color='secondary' weight='medium'>
comment
</Text>
</a>
),
this_post: (
<a
className={[_s.noUnderline, _s.underline_onHover].join(' ')}
href={reblogUrl}
>
<Text size='small' color='secondary' weight='medium'>
a post
</Text>
</a>
)
}}
/>
</Text>
</div>
}
2020-04-02 04:17:21 +01:00
{
2020-05-05 06:16:01 +01:00
!isRepost && !isComment &&
2020-04-02 04:17:21 +01:00
<Text color='secondary' size='small'>
{intl.formatMessage(isFeatured ? messages.pinned : isPinnedInGroup ? messages.pinnedByGroup : messages.promoted)}
2020-04-02 04:17:21 +01:00
</Text>
}
2020-05-05 06:16:01 +01:00
{
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' weight='medium'>
2020-05-05 06:16:01 +01:00
<bdi>
<span dangerouslySetInnerHTML={{ __html: status.getIn(['account', 'display_name_html']) }} />
</bdi>
</Text>
</NavLink>
)
}}
/>
</Text>
}
2020-04-02 04:17:21 +01:00
</div>
{
isPromoted &&
<div className={[_s.d, _s.h100PC, _s.pr10, _s.py2, _s.aiCenter, _s.jcCenter].join(' ')}>
<button
className={[_s.d, _s.cursorPointer, _s.outlineNone, _s.bgTertiary, _s.circle, _s.py2, _s.px5].join(' ')}
onClick={onOpenProModal}
>
<Text color='tertiary' size='extraSmall' isBadge>
?
</Text>
</button>
</div>
}
2020-04-02 04:17:21 +01:00
</div>
)
}
}
const messages = defineMessages({
filtered: { id: 'status.filtered', defaultMessage: 'Filtered' },
promoted: { id: 'status.promoted', defaultMessage: 'Promoted gab' },
pinned: { id: 'status.pinned', defaultMessage: 'Pinned gab' },
pinnedByGroup: { id: 'status.pinned_by_group', defaultMessage: 'Pinned to group' },
reposted: { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
})
StatusPrepend.propTypes = {
intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map,
isComment: PropTypes.bool,
isFeatured: PropTypes.bool,
isPinnedInGroup: PropTypes.bool,
isPromoted: PropTypes.bool,
onOpenProModal: PropTypes.func.isRequired,
}
export default injectIntl(StatusPrepend)