121 lines
3.7 KiB
JavaScript
121 lines
3.7 KiB
JavaScript
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||
|
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||
|
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
|
||
|
|
import classNames from 'classnames/bind'
|
||
|
|
import { openPopover, closePopover } from '../actions/popover'
|
||
|
|
import { initReport } from '../actions/reports'
|
||
|
|
import { openModal } from '../actions/modal'
|
||
|
|
import { unfollowModal, me } from '../initial_state'
|
||
|
|
import Avatar from './avatar'
|
||
|
|
import Button from './button'
|
||
|
|
import Block from './block'
|
||
|
|
import Icon from './icon'
|
||
|
|
import Image from './image'
|
||
|
|
import TabBar from './tab_bar'
|
||
|
|
import Text from './text'
|
||
|
|
|
||
|
|
const cx = classNames.bind(_s)
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
follow: { id: 'follow', defaultMessage: 'Follow' },
|
||
|
|
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
|
||
|
|
requested: { id: 'requested', defaultMessage: 'Requested' },
|
||
|
|
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
|
||
|
|
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||
|
|
follows: { id: 'account.follows', defaultMessage: 'Follows' },
|
||
|
|
profile: { id: 'account.profile', defaultMessage: 'Profile' },
|
||
|
|
})
|
||
|
|
|
||
|
|
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||
|
|
|
||
|
|
openProfileOptionsPopover(props) {
|
||
|
|
console.log('props:', props)
|
||
|
|
dispatch(openPopover('PROFILE_OPTIONS', props))
|
||
|
|
},
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
export default
|
||
|
|
@connect(null, mapDispatchToProps)
|
||
|
|
@injectIntl
|
||
|
|
class GroupHeader extends ImmutablePureComponent {
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
intl: PropTypes.object.isRequired,
|
||
|
|
group: ImmutablePropTypes.map,
|
||
|
|
relationships: ImmutablePropTypes.map,
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { intl, relationships, group } = this.props
|
||
|
|
|
||
|
|
const tabs = !group ? null : [
|
||
|
|
{
|
||
|
|
to: `/groups/${group.get('id')}`,
|
||
|
|
title: 'Latest',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
to: `/groups/${group.get('id')}/pinned`,
|
||
|
|
title: 'Pinned',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
to: `/groups/${group.get('id')}/popular`,
|
||
|
|
title: 'Popular',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const coverSrc = !!group ? group.get('cover') : undefined
|
||
|
|
const title = !!group ? group.get('title') : undefined
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
|
||
|
|
<Block>
|
||
|
|
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||
|
|
|
||
|
|
{
|
||
|
|
!!coverSrc &&
|
||
|
|
<Image className={_s.height350PX} src={coverSrc} alt={title} />
|
||
|
|
}
|
||
|
|
|
||
|
|
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
|
||
|
|
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
|
||
|
|
<TabBar tabs={tabs} />
|
||
|
|
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.marginLeftAuto].join(' ')}>
|
||
|
|
<Button
|
||
|
|
color='primary'
|
||
|
|
backgroundColor='tertiary'
|
||
|
|
radiusSmall
|
||
|
|
className={_s.mr5}
|
||
|
|
>
|
||
|
|
<Text color='inherit' size='small'>
|
||
|
|
Leave/Join
|
||
|
|
</Text>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
color='primary'
|
||
|
|
backgroundColor='tertiary'
|
||
|
|
radiusSmall
|
||
|
|
className={_s.mr5}
|
||
|
|
>
|
||
|
|
<Text color='inherit' size='small'>
|
||
|
|
Share
|
||
|
|
</Text>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
radiusSmall
|
||
|
|
color='primary'
|
||
|
|
backgroundColor='tertiary'
|
||
|
|
className={_s.mr5}
|
||
|
|
icon='ellipsis'
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Block>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|