gab-social/app/javascript/gabsocial/components/popover/user_info_popover.js

90 lines
3.1 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-03-11 23:56:18 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-04-23 07:13:29 +01:00
import { NavLink } from 'react-router-dom'
import { FormattedMessage } from 'react-intl'
import { makeGetAccount } from '../../selectors'
import { shortNumberFormat } from '../../utils/numbers'
import { me } from '../../initial_state'
2020-02-28 15:20:47 +00:00
import PopoverLayout from './popover_layout'
2020-04-23 07:13:29 +01:00
import AccountActionButton from '../account_action_button'
2020-03-11 23:56:18 +00:00
import Avatar from '../avatar'
import DisplayName from '../display_name'
import Text from '../text'
2020-02-28 15:20:47 +00:00
class UserInfoPopover extends ImmutablePureComponent {
2020-02-28 15:20:47 +00:00
render() {
const { account, isXS } = this.props
2020-03-11 23:56:18 +00:00
if (isXS || !me) return null
2020-03-11 23:56:18 +00:00
const content = !account ? null : { __html: account.get('note_emojified') }
2020-04-23 07:13:29 +01:00
const to = !account ? '' : `/${account.get('acct')}`
2020-03-11 23:56:18 +00:00
2020-02-28 15:20:47 +00:00
return (
2020-04-23 07:13:29 +01:00
<PopoverLayout width={280}>
<div className={[_s.d, _s.w100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
2020-03-11 23:56:18 +00:00
<div className={[_s.d, _s.flexRow].join(' ')}>
2020-04-23 07:13:29 +01:00
<NavLink
to={to}
className={[_s.d, _s.noUnderline, _s.flexGrow1].join(' ')}
2020-04-23 07:13:29 +01:00
>
2020-04-24 04:17:27 +01:00
<Avatar account={account} size={42} noHover />
<DisplayName account={account} isMultiline noHover />
2020-04-23 07:13:29 +01:00
</NavLink>
<div className={[_s.d, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
2020-04-23 07:13:29 +01:00
<AccountActionButton account={account} />
2020-03-11 23:56:18 +00:00
</div>
</div>
<div className={[_s.d, _s.mt10].join(' ')}>
2020-03-11 23:56:18 +00:00
<div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
</div>
<div className={[_s.d, _s.flexRow, _s.mt10].join(' ')}>
<NavLink
to={`${to}/followers`}
className={[_s.d, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
>
<Text weight='extraBold' color='primary'>
{shortNumberFormat(account.get('followers_count'))}&nbsp;
</Text>
<Text color='secondary'>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
</Text>
</NavLink>
<NavLink
to={`${to}/following`}
className={[_s.d, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
>
<Text weight='extraBold' color='primary'>
{shortNumberFormat(account.get('following_count'))}&nbsp;
</Text>
<Text color='secondary'>
<FormattedMessage id='account.follows' defaultMessage='Following' />
</Text>
</NavLink>
</div>
2020-03-11 23:56:18 +00:00
</div>
2020-02-28 15:20:47 +00:00
</PopoverLayout>
)
}
}
const mapStateToProps = (state, props) => ({
account: makeGetAccount()(state, props.accountId),
})
UserInfoPopover.propTypes = {
account: ImmutablePropTypes.map,
accountId: PropTypes.string.isRequired,
isXS: PropTypes.bool,
}
export default connect(mapStateToProps)(UserInfoPopover)