fc8c20149f
* Comment model * Framework, model, policy, presenter, api endpoint etc * Iteration, first pass of UI * fixes, refactors * Comment commands * comment socket support * typing indicators * comment component, styling * wip * right sidebar resize * fix: CMD+Enter submit * Add usePersistedState fix: Main page scrolling on comment highlight * drafts * Typing indicator * refactor * policies * Click thread to highlight Improve comment timestamps * padding * Comment menu v1 * Change comments to use editor * Basic comment editing * fix: Hide commenting button when disabled at team level * Enable opening sidebar without mark * Move selected comment to location state * Add comment delete confirmation * Add comment count to document meta * fix: Comment sidebar togglable Add copy link to comment * stash * Restore History changes * Refactor right sidebar to allow for comment animation * Update to new router best practices * stash * Various improvements * stash * Handle click outside * Fix incorrect placeholder in input fix: Input box appearing on other sessions erroneously * stash * fix: Don't leave orphaned child comments * styling * stash * Enable comment toggling again * Edit styling, merge conflicts * fix: Cannot navigate from insights to comments * Remove draft comment mark on click outside * Fix: Empty comment sidebar, tsc * Remove public toggle * fix: All comments are recessed fix: Comments should not be printed * fix: Associated mark should be removed on comment delete * Revert unused changes * Empty state, basic RTL support * Create dont toggle comment mark * Make it feel more snappy * Highlight active comment in text * fix animation * RTL support * Add reply CTA * Translations
83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import copy from "copy-to-clipboard";
|
|
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMenuState } from "reakit/Menu";
|
|
import Comment from "~/models/Comment";
|
|
import CommentDeleteDialog from "~/components/CommentDeleteDialog";
|
|
import ContextMenu from "~/components/ContextMenu";
|
|
import MenuItem from "~/components/ContextMenu/MenuItem";
|
|
import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
|
|
import Separator from "~/components/ContextMenu/Separator";
|
|
import usePolicy from "~/hooks/usePolicy";
|
|
import useStores from "~/hooks/useStores";
|
|
import useToasts from "~/hooks/useToasts";
|
|
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;
|
|
};
|
|
|
|
function CommentMenu({ comment, onEdit, onDelete, className }: Props) {
|
|
const menu = useMenuState({
|
|
modal: true,
|
|
});
|
|
const { showToast } = useToasts();
|
|
const { documents, dialogs } = useStores();
|
|
const { t } = useTranslation();
|
|
const can = usePolicy(comment.id);
|
|
const document = documents.get(comment.documentId);
|
|
|
|
const handleDelete = React.useCallback(() => {
|
|
dialogs.openModal({
|
|
title: t("Delete comment"),
|
|
isCentered: true,
|
|
content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
|
|
});
|
|
}, [dialogs, comment, onDelete, t]);
|
|
|
|
const handleCopyLink = React.useCallback(() => {
|
|
if (document) {
|
|
copy(urlify(commentPath(document, comment)));
|
|
showToast(t("Link copied"));
|
|
}
|
|
}, [t, document, comment, showToast]);
|
|
|
|
return (
|
|
<>
|
|
<OverflowMenuButton
|
|
aria-label={t("Show menu")}
|
|
className={className}
|
|
{...menu}
|
|
/>
|
|
<ContextMenu {...menu} aria-label={t("Comment options")}>
|
|
{can.update && (
|
|
<MenuItem {...menu} onClick={onEdit}>
|
|
{t("Edit")}
|
|
</MenuItem>
|
|
)}
|
|
<MenuItem {...menu} onClick={handleCopyLink}>
|
|
{t("Copy link")}
|
|
</MenuItem>
|
|
{can.delete && (
|
|
<>
|
|
<Separator />
|
|
<MenuItem {...menu} onClick={handleDelete} dangerous>
|
|
{t("Delete")}
|
|
</MenuItem>
|
|
</>
|
|
)}
|
|
</ContextMenu>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(CommentMenu);
|