perf(renderer): defer task context menu translations
This commit is contained in:
parent
68d07f56ad
commit
36f69f5ae4
1 changed files with 86 additions and 52 deletions
|
|
@ -24,6 +24,83 @@ export interface TaskContextMenuProps {
|
|||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
type TaskContextMenuContentProps = Pick<
|
||||
TaskContextMenuProps,
|
||||
| 'isPinned'
|
||||
| 'isArchived'
|
||||
| 'onTogglePin'
|
||||
| 'onToggleArchive'
|
||||
| 'onMarkUnread'
|
||||
| 'onRename'
|
||||
| 'onDelete'
|
||||
>;
|
||||
|
||||
const TaskContextMenuLazyContent = ({
|
||||
isPinned,
|
||||
isArchived,
|
||||
onTogglePin,
|
||||
onToggleArchive,
|
||||
onMarkUnread,
|
||||
onRename,
|
||||
onDelete,
|
||||
}: TaskContextMenuContentProps): React.JSX.Element => {
|
||||
const { t } = useAppTranslation('common');
|
||||
|
||||
return (
|
||||
<ContextMenuContent onCloseAutoFocus={(e) => e.preventDefault()}>
|
||||
<ContextMenuItem onSelect={onTogglePin}>
|
||||
{isPinned ? (
|
||||
<>
|
||||
<PinOff className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.unpin')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pin className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.pin')}</span>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuItem onSelect={onRename}>
|
||||
<Pencil className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.rename')}</span>
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuItem onSelect={onMarkUnread}>
|
||||
<Mail className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.markUnread')}</span>
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuSeparator />
|
||||
|
||||
<ContextMenuItem onSelect={onToggleArchive}>
|
||||
{isArchived ? (
|
||||
<>
|
||||
<ArchiveRestore className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.unarchive')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Archive className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.archive')}</span>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuItem>
|
||||
|
||||
{onDelete && (
|
||||
<>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem onSelect={onDelete} className="text-red-400 focus:text-red-400">
|
||||
<Trash2 className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.deleteTask')}</span>
|
||||
</ContextMenuItem>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuContent>
|
||||
);
|
||||
};
|
||||
|
||||
export const TaskContextMenu = ({
|
||||
task: _task,
|
||||
isPinned,
|
||||
|
|
@ -35,7 +112,6 @@ export const TaskContextMenu = ({
|
|||
onDelete,
|
||||
children,
|
||||
}: TaskContextMenuProps): React.JSX.Element => {
|
||||
const { t } = useAppTranslation('common');
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -44,57 +120,15 @@ export const TaskContextMenu = ({
|
|||
<div className="w-full">{children}</div>
|
||||
</ContextMenuTrigger>
|
||||
{open ? (
|
||||
<ContextMenuContent onCloseAutoFocus={(e) => e.preventDefault()}>
|
||||
<ContextMenuItem onSelect={onTogglePin}>
|
||||
{isPinned ? (
|
||||
<>
|
||||
<PinOff className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.unpin')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pin className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.pin')}</span>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuItem onSelect={onRename}>
|
||||
<Pencil className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.rename')}</span>
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuItem onSelect={onMarkUnread}>
|
||||
<Mail className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.markUnread')}</span>
|
||||
</ContextMenuItem>
|
||||
|
||||
<ContextMenuSeparator />
|
||||
|
||||
<ContextMenuItem onSelect={onToggleArchive}>
|
||||
{isArchived ? (
|
||||
<>
|
||||
<ArchiveRestore className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.unarchive')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Archive className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.archive')}</span>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuItem>
|
||||
|
||||
{onDelete && (
|
||||
<>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem onSelect={onDelete} className="text-red-400 focus:text-red-400">
|
||||
<Trash2 className="size-3.5 shrink-0" />
|
||||
<span>{t('taskContextMenu.deleteTask')}</span>
|
||||
</ContextMenuItem>
|
||||
</>
|
||||
)}
|
||||
</ContextMenuContent>
|
||||
<TaskContextMenuLazyContent
|
||||
isPinned={isPinned}
|
||||
isArchived={isArchived}
|
||||
onTogglePin={onTogglePin}
|
||||
onToggleArchive={onToggleArchive}
|
||||
onMarkUnread={onMarkUnread}
|
||||
onRename={onRename}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
) : null}
|
||||
</ContextMenu>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue