Improve message context menu code

This commit is contained in:
2025-09-28 16:38:51 +03:00
Unverified
parent dcc466ec14
commit 2f31b15dea
@@ -109,26 +109,7 @@ export function MessageContextMenu({
}; };
}, [isOpen, isClosing]); }, [isOpen, isClosing]);
const handleAction = (action: string) => { function handleClose() {
switch (action) {
case "reply":
onReply(message);
handleClose();
break;
case "edit":
if (isAuthor) onEdit(message);
break;
case "delete":
if (isAuthor) {
onDelete(message);
handleClose();
}
break;
}
onOpenChange(false);
};
const handleClose = () => {
setIsClosing(true); setIsClosing(true);
// Set appropriate closing animation based on opening animation // Set appropriate closing animation based on opening animation
const closingAnimation = animationClass.replace('entering', 'closing'); const closingAnimation = animationClass.replace('entering', 'closing');
@@ -140,7 +121,44 @@ export function MessageContextMenu({
setIsClosing(false); setIsClosing(false);
setAnimationClass('entering'); // Reset for next opening setAnimationClass('entering'); // Reset for next opening
}, 200); // Match the animation duration from _animations.scss }, 200); // Match the animation duration from _animations.scss
}; }
interface Action {
label: string;
icon: string;
onClick: () => void;
show: boolean;
}
const actions: Action[] = [
{
label: "Reply",
icon: "reply",
onClick: () => {
onReply(message);
handleClose();
},
show: true
},
{
label: "Edit",
icon: "edit",
onClick: () => {
onEdit(message);
handleClose();
},
show: isAuthor
},
{
label: "Delete",
icon: "delete",
onClick: () => {
onDelete(message);
handleClose();
},
show: isAuthor
},
];
return isOpen && ( return isOpen && (
<div <div
@@ -153,22 +171,18 @@ export function MessageContextMenu({
zIndex: 1000 zIndex: 1000
}} }}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
<div className="context-menu-item" onClick={() => handleAction("reply")}> {actions.map((action, i) => (
<span className="material-symbols">reply</span> action.show && (
Ответить <div
className="context-menu-item"
onClick={action.onClick}
key={i}
>
<span className="material-symbols">{action.icon}</span>
{action.label}
</div> </div>
{isAuthor && ( )
<> ))}
<div className="context-menu-item" onClick={() => handleAction("edit")}>
<span className="material-symbols">edit</span>
Редактировать
</div>
<div className="context-menu-item" onClick={() => handleAction("delete")}>
<span className="material-symbols">delete</span>
Удалить
</div>
</>
)}
</div> </div>
) )
} }