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

156 lines
4.3 KiB
JavaScript
Raw Normal View History

2020-05-01 06:50:27 +01:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
2020-05-07 06:55:24 +01:00
import {
MODAL_GROUP_CREATE,
MODAL_GROUP_MEMBERS,
MODAL_GROUP_REMOVED_ACCOUNTS,
} from '../../constants'
import {
addShortcut,
removeShortcut,
} from '../../actions/shortcuts'
2020-05-01 06:50:27 +01:00
import { openModal } from '../../actions/modal'
2020-05-07 06:55:24 +01:00
import { closePopover } from '../../actions/popover'
2020-04-28 06:33:58 +01:00
import PopoverLayout from './popover_layout'
2020-05-01 06:50:27 +01:00
import List from '../list'
const messages = defineMessages({
2020-05-07 06:55:24 +01:00
groupMembers: { id: 'group_members', defaultMessage: 'Group members' },
removedMembers: { id: 'group_removed_members', defaultMessage: 'Removed accounts' },
editGroup: { id: 'edit_group', defaultMessage: 'Edit group' },
add_to_shortcuts: { id: 'account.add_to_shortcuts', defaultMessage: 'Add to shortcuts' },
remove_from_shortcuts: { id: 'account.remove_from_shortcuts', defaultMessage: 'Remove from shortcuts' },
})
const mapStateToProps = (state, { group }) => {
const groupId = group ? group.get('id') : null
const shortcuts = state.getIn(['shortcuts', 'items'])
const isShortcut = !!shortcuts.find((s) => {
return s.get('shortcut_id') == groupId && s.get('shortcut_type') === 'group'
})
return { isShortcut }
}
2020-05-01 06:50:27 +01:00
2020-05-07 06:55:24 +01:00
const mapDispatchToProps = (dispatch) => ({
onOpenEditGroup(groupId) {
2020-05-07 06:55:24 +01:00
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_CREATE, { groupId }))
2020-05-01 06:50:27 +01:00
},
2020-05-07 06:55:24 +01:00
onOpenRemovedMembers(groupId) {
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_REMOVED_ACCOUNTS, { groupId }))
},
onOpenGroupMembers(groupId) {
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
2020-05-01 06:50:27 +01:00
},
onClosePopover: () => dispatch(closePopover()),
onAddShortcut(groupId) {
dispatch(addShortcut('group', groupId))
},
onRemoveShortcut(groupId) {
dispatch(removeShortcut(null, 'group', groupId))
},
2020-05-01 06:50:27 +01:00
})
2020-05-01 06:50:27 +01:00
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
2020-05-01 06:50:27 +01:00
class GroupOptionsPopover extends ImmutablePureComponent {
static defaultProps = {
2020-05-07 06:55:24 +01:00
group: ImmutablePropTypes.map.isRequired,
isAdmin: PropTypes.bool,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
isShortcut: PropTypes.bool,
onAddShortcut: PropTypes.func.isRequired,
onRemoveShortcut: PropTypes.func.isRequired,
onClosePopover: PropTypes.func.isRequired,
2020-05-07 06:55:24 +01:00
onOpenEditGroup: PropTypes.func.isRequired,
onOpenGroupMembers: PropTypes.func.isRequired,
onOpenRemovedMembers: PropTypes.func.isRequired,
2020-05-01 06:50:27 +01:00
}
2020-05-07 06:55:24 +01:00
handleEditGroup = () => {
this.props.onOpenEditGroup(this.props.group.get('id'))
2020-05-01 06:50:27 +01:00
}
2020-05-07 06:55:24 +01:00
handleOnOpenRemovedMembers = () => {
this.props.onOpenRemovedMembers(this.props.group.get('id'))
}
handleOnOpenGroupMembers = () => {
this.props.onOpenGroupMembers(this.props.group.get('id'))
2020-05-01 06:50:27 +01:00
}
2020-04-28 06:33:58 +01:00
handleOnClosePopover = () => {
this.props.onClosePopover()
}
handleOnToggleShortcut = () => {
this.handleOnClosePopover()
if (this.props.isShortcut) {
this.props.onRemoveShortcut(this.props.group.get('id'))
} else {
this.props.onAddShortcut(this.props.group.get('id'))
}
}
2020-04-28 06:33:58 +01:00
render() {
const {
intl,
isAdmin,
isShortcut,
isXS,
} = this.props
2020-05-01 06:50:27 +01:00
const listItems = [
{
hideArrow: true,
2020-05-07 06:55:24 +01:00
icon: 'group',
title: intl.formatMessage(messages.groupMembers),
onClick: this.handleOnOpenGroupMembers,
isHidden: !isAdmin,
2020-05-07 06:55:24 +01:00
},
{
hideArrow: true,
icon: 'block',
title: intl.formatMessage(messages.removedMembers),
onClick: this.handleOnOpenRemovedMembers,
isHidden: !isAdmin,
2020-05-01 06:50:27 +01:00
},
{
hideArrow: true,
icon: 'pencil',
2020-05-07 06:55:24 +01:00
title: intl.formatMessage(messages.editGroup),
onClick: this.handleEditGroup,
isHidden: !isAdmin,
},
{
hideArrow: true,
icon: 'star',
title: intl.formatMessage(isShortcut ? messages.remove_from_shortcuts : messages.add_to_shortcuts),
onClick: this.handleOnToggleShortcut,
},
2020-05-01 06:50:27 +01:00
]
2020-04-28 06:33:58 +01:00
return (
<PopoverLayout
width={240}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
2020-05-01 06:50:27 +01:00
<List
2020-05-07 06:55:24 +01:00
scrollKey='group_options'
2020-05-01 06:50:27 +01:00
items={listItems}
size={isXS ? 'large' : 'small'}
2020-05-01 06:50:27 +01:00
/>
2020-04-28 06:33:58 +01:00
</PopoverLayout>
)
}
2020-05-01 06:50:27 +01:00
2020-04-28 06:33:58 +01:00
}