115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import copy from "copy-to-clipboard";
|
|
import { observer } from "mobx-react";
|
|
import { CopyIcon, EditIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMenuState } from "reakit/Menu";
|
|
import { toast } from "sonner";
|
|
import EventBoundary from "@shared/components/EventBoundary";
|
|
import Comment from "~/models/Comment";
|
|
import ContextMenu from "~/components/ContextMenu";
|
|
import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
|
|
import Template from "~/components/ContextMenu/Template";
|
|
import { actionToMenuItem } from "~/actions";
|
|
import {
|
|
deleteCommentFactory,
|
|
resolveCommentFactory,
|
|
unresolveCommentFactory,
|
|
} from "~/actions/definitions/comments";
|
|
import useActionContext from "~/hooks/useActionContext";
|
|
import usePolicy from "~/hooks/usePolicy";
|
|
import useStores from "~/hooks/useStores";
|
|
import { commentPath, urlify } from "~/utils/routeHelpers";
|
|
|
|
type Props = {
|
|
/** The comment to associate with the menu */
|
|
comment: Comment;
|
|
/** CSS class name */
|
|
className?: string;
|
|
/** Callback when the "Edit" is selected in the menu */
|
|
onEdit: () => void;
|
|
/** Callback when the comment has been deleted */
|
|
onDelete: () => void;
|
|
/** Callback when the comment has been updated */
|
|
onUpdate: (attrs: { resolved: boolean }) => void;
|
|
};
|
|
|
|
function CommentMenu({
|
|
comment,
|
|
onEdit,
|
|
onDelete,
|
|
onUpdate,
|
|
className,
|
|
}: Props) {
|
|
const menu = useMenuState({
|
|
modal: true,
|
|
});
|
|
const { documents } = useStores();
|
|
const { t } = useTranslation();
|
|
const can = usePolicy(comment);
|
|
const context = useActionContext({ isContextMenu: true });
|
|
const document = documents.get(comment.documentId);
|
|
|
|
const handleCopyLink = React.useCallback(() => {
|
|
if (document) {
|
|
copy(urlify(commentPath(document, comment)));
|
|
toast.message(t("Link copied"));
|
|
}
|
|
}, [t, document, comment]);
|
|
|
|
return (
|
|
<>
|
|
<EventBoundary>
|
|
<OverflowMenuButton
|
|
aria-label={t("Show menu")}
|
|
className={className}
|
|
{...menu}
|
|
/>
|
|
</EventBoundary>
|
|
<ContextMenu {...menu} aria-label={t("Comment options")}>
|
|
<Template
|
|
{...menu}
|
|
items={[
|
|
{
|
|
type: "button",
|
|
title: `${t("Edit")}…`,
|
|
icon: <EditIcon />,
|
|
onClick: onEdit,
|
|
visible: can.update,
|
|
},
|
|
actionToMenuItem(
|
|
resolveCommentFactory({
|
|
comment,
|
|
onResolve: () => onUpdate({ resolved: true }),
|
|
}),
|
|
context
|
|
),
|
|
actionToMenuItem(
|
|
unresolveCommentFactory({
|
|
comment,
|
|
onUnresolve: () => onUpdate({ resolved: false }),
|
|
}),
|
|
context
|
|
),
|
|
{
|
|
type: "button",
|
|
icon: <CopyIcon />,
|
|
title: t("Copy link"),
|
|
onClick: handleCopyLink,
|
|
},
|
|
{
|
|
type: "separator",
|
|
},
|
|
actionToMenuItem(
|
|
deleteCommentFactory({ comment, onDelete }),
|
|
context
|
|
),
|
|
]}
|
|
/>
|
|
</ContextMenu>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(CommentMenu);
|