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

449 lines
15 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
import Sticky from 'react-stickynode'
import {
CX,
POPOVER_PROFILE_OPTIONS,
PLACEHOLDER_MISSING_HEADER_SRC,
MODAL_EDIT_PROFILE,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import {
addShortcut,
removeShortcut,
} from '../actions/shortcuts'
import { openModal } from '../actions/modal'
import { openPopover } from '../actions/popover'
import { me } from '../initial_state'
import AccountActionButton from './account_action_button'
import Avatar from './avatar'
import Button from './button'
import DisplayName from './display_name'
import Image from './image'
import TabBar from './tab_bar'
import Pills from './pills'
import Text from './text'
import Responsive from '../features/ui/util/responsive_component';
import ProfileHeaderXSPlaceholder from './placeholder/profile_header_xs_placeholder'
class ProfileHeader extends ImmutablePureComponent {
state = {
stickied: false,
}
handleOnEditProfile = () => {
this.props.onEditProfile()
}
handleOpenMore = () => {
const { openProfileOptionsPopover, account } = this.props
openProfileOptionsPopover({
account,
targetRef: this.openMoreNode,
position: 'left',
})
}
handleToggleShortcut = () => {
const { account, isShortcut } = this.props
const accountId = !!account ? account.get('id') : null
if (!accountId) return
if (isShortcut) {
this.props.onRemoveShortcut(accountId)
} else {
this.props.onAddShortcut(accountId)
}
}
onStickyStateChange = (status) => {
if (status.status === Sticky.STATUS_FIXED) {
this.setState({ stickied: true })
} else {
this.setState({ stickied: false })
}
}
setOpenMoreNodeRef = (n) => {
this.openMoreNode = n
}
render() {
const {
account,
children,
intl,
isShortcut,
isXS
} = this.props
const { stickied } = this.state
if (isXS && !account) {
return (
<div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.z1, _s.w100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.d, _s.w100PC].join(' ')}>
<ProfileHeaderXSPlaceholder />
</div>
</div>
</div>
)
}
const tabs = !account ? null : [
{
to: `/${account.get('acct')}`,
title: intl.formatMessage(messages.timeline),
},
{
to: `/${account.get('acct')}/comments`,
title: intl.formatMessage(messages.comments),
},
{
to: `/${account.get('acct')}/photos`,
title: intl.formatMessage(messages.photos),
},
{
to: `/${account.get('acct')}/videos`,
title: intl.formatMessage(messages.videos),
},
]
const isMyProfile = !account ? false : account.get('id') === me
if (isMyProfile) {
tabs.push({
to: `/${account.get('acct')}/bookmarks`,
title: intl.formatMessage(messages.bookmarks),
})
}
const headerSrc = !!account ? account.get('header') : undefined
const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
const avatarSize = headerMissing ? 75 : 150
const top = headerMissing ? -46 : -380
const avatarContainerClasses = CX({
d: 1,
circle: 1,
mtNeg75PX: !headerMissing,
boxShadowProfileAvatar: !headerMissing,
})
const stickyBarContainerClasses = CX({
d: 1,
flexRow: 1,
px15: 1,
aiCenter: 1,
displayNone: !stickied,
})
const tabBarContainerClasses = CX({
d: 1,
displayNone: stickied,
})
const mobileAvatarContainerClasses = CX({
d: 1,
circle: 1,
boxShadowProfileAvatar: 1,
mtNeg50PX: !headerMissing,
})
const mobileDescriptionContainerClasses = CX({
d: 1,
w100PC: 1,
px15: 1,
mt5: !!me,
mb10: 1,
pt15: !!me,
pb10: 1,
})
return (
<div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.d, _s.w100PC].join(' ')}>
{
!headerMissing &&
<div className={[_s.d, _s.h200PX, _s.px10, _s.w100PC, _s.mt10, _s.overflowHidden].join(' ')}>
<Image
alt={intl.formatMessage(messages.headerPhoto)}
className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.h100PC].join(' ')}
src={headerSrc}
expandOnClick
/>
</div>
}
{
headerMissing &&
<div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
}
<div className={[_s.d, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
<div className={mobileAvatarContainerClasses}>
<Avatar size={100} account={account} noHover expandOnClick />
</div>
<div className={[_s.d, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
<DisplayName
account={account}
isMultiline
isLarge
isCentered
noHover
/>
</div>
</div>
<div className={[_s.d, _s.bgPrimary, _s.aiCenter].join(' ')}>
{
account && account.get('id') === me &&
<div className={[_s.d,_s.py5].join(' ')}>
<Button
isOutline
backgroundColor='none'
color='brand'
className={[_s.jcCenter, _s.aiCenter].join(' ')}
onClick={this.handleOnEditProfile}
>
<Text color='inherit' weight='bold' size='medium' className={_s.px15}>
{intl.formatMessage(messages.editProfile)}
</Text>
</Button>
</div>
}
{
account && account.get('id') !== me && !!me &&
<div className={[_s.d, _s.flexRow, _s.py5].join(' ')}>
<Button
icon={isShortcut ? 'star' : 'star-outline'}
iconSize='18px'
color='brand'
backgroundColor='none'
className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr15].join(' ')}
onClick={this.handleToggleShortcut}
/>
<div className={[_s.d, _s.flexRow, _s.mr15].join(' ')}>
<AccountActionButton account={account} />
</div>
<div>
<Button
isOutline
icon='ellipsis'
iconSize='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.jcCenter, _s.aiCenter, _s.ml10, _s.px10].join(' ')}
onClick={this.handleOpenMore}
buttonRef={this.setOpenMoreNodeRef}
/>
</div>
</div>
}
<div className={mobileDescriptionContainerClasses}>
{children}
</div>
<div className={[_s.d, _s.mt10, _s.mb10, _s.pt5, _s.w100PC, _s.pr10].join(' ')}>
<Pills pills={tabs} />
</div>
</div>
</div>
</div>
</div>
</Responsive>
{ /** desktop */ }
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
<div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.d, _s.w1015PX].join(' ')}>
{
!headerMissing &&
<div className={[_s.d, _s.h350PX, _s.w100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
<Image
alt={intl.formatMessage(messages.headerPhoto)}
className={_s.h100PC}
src={headerSrc}
expandOnClick
/>
</div>
}
{
headerMissing &&
<div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
}
<div className={[_s.d, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
<div className={avatarContainerClasses}>
{
account &&
<Avatar size={avatarSize} account={account} noHover expandOnClick />
}
{
!account &&
<div
className={[_s.d, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
style={{
width: `${avatarSize}px`,
height: `${avatarSize}px`,
}}
/>
}
</div>
<div className={[_s.d, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
<DisplayName account={account} isMultiline isLarge noHover />
</div>
</div>
<div className={[_s.d, _s.flexRow, _s.bgPrimary, _s.h53PX].join(' ')}>
<div className={tabBarContainerClasses}>
<TabBar tabs={tabs} isLarge />
</div>
<div className={stickyBarContainerClasses}>
<Avatar size={36} account={account} noHover />
<div className={[_s.d, _s.ml10].join(' ')}>
<DisplayName account={account} noUsername noRelationship noHover isLarge />
</div>
</div>
{
account && account.get('id') === me &&
<div className={[_s.d, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
<Button
isOutline
backgroundColor='none'
color='brand'
className={[_s.jcCenter, _s.aiCenter].join(' ')}
onClick={this.handleOnEditProfile}
>
<Text color='inherit' weight='bold' size='medium' className={_s.px15}>
{intl.formatMessage(messages.editProfile)}
</Text>
</Button>
</div>
}
{
account && account.get('id') !== me &&
<div className={[_s.d, _s.flexRow, _s.mlAuto, _s.pb2, _s.pt7].join(' ')}>
{
!!me &&
<div className={[_s.d, _s.flexRow, _s.mr5, _s.aiCenter, _s.jcCenter].join(' ')}>
<Button
icon={isShortcut ? 'star' : 'star-outline'}
iconSize='18px'
color='brand'
backgroundColor='none'
className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr10].join(' ')}
onClick={this.handleToggleShortcut}
/>
<Button
isOutline
icon='ellipsis'
iconSize='18px'
iconClassName={_s.inheritFill}
color='brand'
backgroundColor='none'
className={[_s.jcCenter, _s.aiCenter, _s.mr15, _s.px10].join(' ')}
onClick={this.handleOpenMore}
buttonRef={this.setOpenMoreNodeRef}
/>
</div>
}
<div className={[_s.d, _s.flexRow, _s.pb2].join(' ')}>
<AccountActionButton account={account} />
</div>
</div>
}
</div>
</div>
</div>
</div>
</Sticky>
</Responsive>
</div>
)
}
}
const mapStateToProps = (state, { account }) => {
const accountId = account ? account.get('id') : null
const shortcuts = state.getIn(['shortcuts', 'items'])
const isShortcut = !!shortcuts.find((s) => {
return s.get('shortcut_id') == accountId && s.get('shortcut_type') === 'account'
})
return { isShortcut }
}
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Following' },
profile: { id: 'account.profile', defaultMessage: 'Profile' },
headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
timeline: { id: 'timeline', defaultMessage: 'Timeline' },
comments: { id: 'comments', defaultMessage: 'Comments' },
photos: { id: 'photos', defaultMessage: 'Photos' },
videos: { id: 'videos', defaultMessage: 'Videos' },
bookmarks: { id: 'bookmarks', defaultMessage: 'Bookmarks' },
accountFollowsYou: { id: 'account.follows_you', defaultMessage: 'Follows you' },
editProfile: { id: "account.edit_profile", defaultMessage: "Edit profile" },
})
const mapDispatchToProps = (dispatch) => ({
openProfileOptionsPopover(props) {
dispatch(openPopover(POPOVER_PROFILE_OPTIONS, props))
},
onEditProfile() {
dispatch(openModal(MODAL_EDIT_PROFILE))
},
onAddShortcut(accountId) {
dispatch(addShortcut('account', accountId))
},
onRemoveShortcut(accountId) {
dispatch(removeShortcut(null, 'account', accountId))
},
});
ProfileHeader.propTypes = {
account: ImmutablePropTypes.map,
children: PropTypes.any,
intl: PropTypes.object.isRequired,
onAddShortcut: PropTypes.func.isRequired,
onEditProfile: PropTypes.func.isRequired,
onRemoveShortcut: PropTypes.func.isRequired,
openProfileOptionsPopover: PropTypes.func.isRequired,
isShortcut: PropTypes.bool.isRequired,
isXS: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProfileHeader))