75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
// @flow
|
|
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMenuState } from "reakit/Menu";
|
|
import Group from "models/Group";
|
|
import GroupDelete from "scenes/GroupDelete";
|
|
import GroupEdit from "scenes/GroupEdit";
|
|
import ContextMenu from "components/ContextMenu";
|
|
import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
|
|
import Template from "components/ContextMenu/Template";
|
|
import Modal from "components/Modal";
|
|
import useStores from "hooks/useStores";
|
|
|
|
type Props = {|
|
|
group: Group,
|
|
onMembers: () => void,
|
|
|};
|
|
|
|
function GroupMenu({ group, onMembers }: Props) {
|
|
const { t } = useTranslation();
|
|
const { policies } = useStores();
|
|
const menu = useMenuState({ modal: true });
|
|
const [editModalOpen, setEditModalOpen] = React.useState(false);
|
|
const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
|
|
const can = policies.abilities(group.id);
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
title={t("Edit group")}
|
|
onRequestClose={() => setEditModalOpen(false)}
|
|
isOpen={editModalOpen}
|
|
>
|
|
<GroupEdit group={group} onSubmit={() => setEditModalOpen(false)} />
|
|
</Modal>
|
|
<Modal
|
|
title={t("Delete group")}
|
|
onRequestClose={() => setDeleteModalOpen(false)}
|
|
isOpen={deleteModalOpen}
|
|
>
|
|
<GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
|
|
</Modal>
|
|
<OverflowMenuButton aria-label={t("Show menu")} {...menu} />
|
|
<ContextMenu {...menu} aria-label={t("Group options")}>
|
|
<Template
|
|
{...menu}
|
|
items={[
|
|
{
|
|
title: `${t("Members")}…`,
|
|
onClick: onMembers,
|
|
visible: !!(group && can.read),
|
|
},
|
|
{
|
|
type: "separator",
|
|
},
|
|
{
|
|
title: `${t("Edit")}…`,
|
|
onClick: () => setEditModalOpen(true),
|
|
visible: !!(group && can.update),
|
|
},
|
|
{
|
|
title: `${t("Delete")}…`,
|
|
onClick: () => setDeleteModalOpen(true),
|
|
visible: !!(group && can.delete),
|
|
},
|
|
]}
|
|
/>
|
|
</ContextMenu>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(GroupMenu);
|