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

233 lines
7.8 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-05-02 07:25:55 +01:00
import { injectIntl, defineMessages } from 'react-intl'
2020-02-21 00:57:29 +00:00
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import moment from 'moment-mini'
2020-03-25 03:08:43 +00:00
import { openPopover } from '../actions/popover'
import { openModal } from '../actions/modal'
2020-04-22 06:00:11 +01:00
import { me } from '../initial_state'
import { CX } from '../constants'
2020-02-21 00:57:29 +00:00
import RelativeTimestamp from './relative_timestamp'
import DisplayName from './display_name'
import Text from './text'
import DotTextSeperator from './dot_text_seperator'
import Icon from './icon'
import Button from './button'
import Avatar from './avatar'
2020-03-25 03:08:43 +00:00
class StatusHeader extends ImmutablePureComponent {
2020-02-21 00:57:29 +00:00
2020-03-26 03:11:32 +00:00
handleOpenStatusOptionsPopover = () => {
this.props.onOpenStatusOptionsPopover(this.statusOptionsButton, this.props.status)
2020-02-21 00:57:29 +00:00
}
2020-03-26 03:11:32 +00:00
handleOpenStatusEdits = () => {
2020-03-27 22:57:03 +00:00
this.props.onOpenStatusRevisionsPopover(this.props.status)
2020-02-21 00:57:29 +00:00
}
2020-03-25 03:08:43 +00:00
setStatusOptionsButton = n => {
this.statusOptionsButton = n
2020-02-21 00:57:29 +00:00
}
render() {
2020-05-02 07:25:55 +01:00
const {
intl,
reduced,
status,
} = this.props
2020-02-21 00:57:29 +00:00
2020-04-24 04:17:27 +01:00
const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
2020-02-21 00:57:29 +00:00
const containerClasses = CX({
d: 1,
2020-04-02 04:17:21 +01:00
px15: 1,
py10: !reduced,
pb10: reduced,
})
const avatarSize = reduced ? 20 : 46
2020-05-02 07:25:55 +01:00
const visibility = status.get('visibility')
let visibilityIcon
let visibilityText
if (visibility === 'private') {
visibilityIcon = 'lock-filled'
visibilityText = intl.formatMessage(messages.private_long)
} else if (visibility === 'unlisted') {
visibilityIcon = 'unlock-filled'
visibilityText = `${intl.formatMessage(messages.unlisted_short)} - ${intl.formatMessage(messages.unlisted_long)}`
} else if (visibility === 'private_group') {
visibilityIcon = 'group'
visibilityText = intl.formatMessage(messages.private_group)
2020-05-02 07:25:55 +01:00
} else {
visibilityIcon = 'globe'
visibilityText = `${intl.formatMessage(messages.public_short)} - ${intl.formatMessage(messages.public_long)}`
}
2020-04-02 04:17:21 +01:00
const expirationDate = status.get('expires_at')
let timeUntilExpiration
if (!!expirationDate) {
timeUntilExpiration = moment(expirationDate).fromNow()
}
2020-02-21 00:57:29 +00:00
return (
2020-04-02 04:17:21 +01:00
<div className={containerClasses}>
<div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
2020-02-21 00:57:29 +00:00
2020-04-02 04:17:21 +01:00
{
!reduced &&
<NavLink
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
className={[_s.d, _s.mr10].join(' ')}
2020-04-02 04:17:21 +01:00
>
<Avatar account={status.get('account')} size={avatarSize} />
</NavLink>
}
2020-02-21 00:57:29 +00:00
<div className={[_s.d, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
2020-02-21 00:57:29 +00:00
<div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
2020-02-21 00:57:29 +00:00
<NavLink
className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
2020-02-21 00:57:29 +00:00
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
>
2020-04-24 04:17:27 +01:00
<DisplayName account={status.get('account')} noRelationship />
2020-02-21 00:57:29 +00:00
</NavLink>
2020-04-02 04:17:21 +01:00
{
2020-04-22 06:00:11 +01:00
!reduced && !!me &&
2020-04-02 04:17:21 +01:00
<Button
2020-04-23 07:13:29 +01:00
isText
2020-04-02 04:17:21 +01:00
backgroundColor='none'
color='none'
icon='ellipsis'
2020-04-23 07:13:29 +01:00
iconSize='20px'
iconClassName={_s.cSecondary}
2020-04-24 04:17:27 +01:00
className={_s.mlAuto}
2020-04-02 04:17:21 +01:00
onClick={this.handleOpenStatusOptionsPopover}
buttonRef={this.setStatusOptionsButton}
/>
}
2020-02-21 00:57:29 +00:00
</div>
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.lineHeight15].join(' ')}>
2020-02-21 00:57:29 +00:00
<Button
2020-04-23 07:13:29 +01:00
isText
2020-02-21 00:57:29 +00:00
underlineOnHover
backgroundColor='none'
color='none'
to={statusUrl}
>
<Text size='small' color='secondary'>
<RelativeTimestamp timestamp={status.get('created_at')} />
</Text>
</Button>
<DotTextSeperator />
2020-05-02 07:25:55 +01:00
<span title={visibilityText} className={[_s.d, _s.displayInline, _s.ml5].join(' ')}>
<Icon id={visibilityIcon} size='12px' className={[_s.d, _s.cSecondary].join(' ')} />
2020-05-02 07:25:55 +01:00
</span>
2020-02-21 00:57:29 +00:00
{
!!status.get('expires_at') &&
<React.Fragment>
<DotTextSeperator />
<span title={intl.formatMessage(messages.expirationMessage, {
time: timeUntilExpiration,
})} className={[_s.d, _s.displayInline, _s.ml5].join(' ')}>
<Icon id='stopwatch' size='13px' className={[_s.d, _s.cSecondary].join(' ')} />
</span>
</React.Fragment>
}
2020-02-21 00:57:29 +00:00
{
!!status.get('group') &&
<React.Fragment>
2020-02-21 00:57:29 +00:00
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-02-21 00:57:29 +00:00
underlineOnHover
backgroundColor='none'
color='none'
to={`/groups/${status.getIn(['group', 'id'])}`}
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-02-21 00:57:29 +00:00
>
<Text size='small' color='secondary'>
{status.getIn(['group', 'title'])}
</Text>
</Button>
</React.Fragment>
2020-02-21 00:57:29 +00:00
}
{
status.get('revised_at') !== null &&
<React.Fragment>
2020-02-21 00:57:29 +00:00
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-02-21 00:57:29 +00:00
underlineOnHover
backgroundColor='none'
color='none'
onClick={this.handleOpenStatusEdits}
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-02-21 00:57:29 +00:00
>
<Text size='small' color='secondary'>
2020-05-04 19:44:37 +01:00
{intl.formatMessage(messages.edited)}
2020-02-21 00:57:29 +00:00
</Text>
</Button>
</React.Fragment>
2020-02-21 00:57:29 +00:00
}
</div>
</div>
</div>
</div>
)
}
}
const messages = defineMessages({
edited: { id: 'status.edited', defaultMessage: 'Edited' },
expirationMessage: { id: 'status.expiration_message', defaultMessage: 'This status expires {time}' },
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for your followers only' },
private_group: { id: 'privacy.private.group', defaultMessage: 'Private group post that is visible for only members of this group' },
})
const mapDispatchToProps = (dispatch) => ({
onOpenStatusRevisionsPopover(status) {
dispatch(openModal('STATUS_REVISIONS', {
status,
}))
},
onOpenStatusOptionsPopover(targetRef, status) {
dispatch(openPopover('STATUS_OPTIONS', {
targetRef,
status,
position: 'left-start',
}))
},
})
StatusHeader.propTypes = {
intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map,
onOpenStatusRevisionsPopover: PropTypes.func.isRequired,
onOpenStatusOptionsPopover: PropTypes.func.isRequired,
reduced: PropTypes.bool,
}
export default injectIntl(connect(null, mapDispatchToProps)(StatusHeader))