/
PageItemSubmenu.tsx
95 lines (90 loc) · 3.06 KB
/
PageItemSubmenu.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor'
import { useCallback } from 'react'
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
import {
TldrawUiDropdownMenuContent,
TldrawUiDropdownMenuRoot,
TldrawUiDropdownMenuTrigger,
} from '../primitives/TldrawUiDropdownMenu'
import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
import { onMovePage } from './edit-pages-shared'
/** @public */
export interface PageItemSubmenuProps {
index: number
item: { id: string; name: string }
listSize: number
onRename?: () => void
}
/** @public */
export const PageItemSubmenu = track(function PageItemSubmenu({
index,
listSize,
item,
onRename,
}: PageItemSubmenuProps) {
const editor = useEditor()
const msg = useTranslation()
const pages = editor.getPages()
const onDuplicate = useCallback(() => {
editor.mark('creating page')
const newId = PageRecordType.createId()
editor.duplicatePage(item.id as TLPageId, newId)
}, [editor, item])
const onMoveUp = useCallback(() => {
onMovePage(editor, item.id as TLPageId, index, index - 1)
}, [editor, item, index])
const onMoveDown = useCallback(() => {
onMovePage(editor, item.id as TLPageId, index, index + 1)
}, [editor, item, index])
const onDelete = useCallback(() => {
editor.mark('deleting page')
editor.deletePage(item.id as TLPageId)
}, [editor, item])
return (
<TldrawUiDropdownMenuRoot id={`page item submenu ${index}`}>
<TldrawUiDropdownMenuTrigger>
<TldrawUiButton type="icon" title={msg('page-menu.submenu.title')}>
<TldrawUiButtonIcon icon="dots-vertical" />
</TldrawUiButton>
</TldrawUiDropdownMenuTrigger>
<TldrawUiDropdownMenuContent alignOffset={0} side="right" sideOffset={-4}>
<TldrawUiMenuContextProvider type="menu" sourceId="page-menu">
<TldrawUiMenuGroup id="modify">
{onRename && (
<TldrawUiMenuItem id="rename" label="page-menu.submenu.rename" onSelect={onRename} />
)}
<TldrawUiMenuItem
id="duplicate"
label="page-menu.submenu.duplicate-page"
onSelect={onDuplicate}
disabled={pages.length >= MAX_PAGES}
/>
{index > 0 && (
<TldrawUiMenuItem
id="move-up"
onSelect={onMoveUp}
label="page-menu.submenu.move-up"
/>
)}
{index < listSize - 1 && (
<TldrawUiMenuItem
id="move-down"
label="page-menu.submenu.move-down"
onSelect={onMoveDown}
/>
)}
</TldrawUiMenuGroup>
{listSize > 1 && (
<TldrawUiMenuGroup id="delete">
<TldrawUiMenuItem id="delete" onSelect={onDelete} label="page-menu.submenu.delete" />
</TldrawUiMenuGroup>
)}
</TldrawUiMenuContextProvider>
</TldrawUiDropdownMenuContent>
</TldrawUiDropdownMenuRoot>
)
})