-
Notifications
You must be signed in to change notification settings - Fork 2k
/
TldrawUiMenuGroup.tsx
65 lines (62 loc) · 2.03 KB
/
TldrawUiMenuGroup.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
import { ContextMenuGroup } from '@radix-ui/react-context-menu'
import { ReactNode } from 'react'
import { unwrapLabel } from '../../../context/actions'
import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
/** @public */
export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
id: string
/**
* The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.
*/
label?: TranslationKey | { [key: string]: TranslationKey }
children?: ReactNode
}
/** @public */
export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps) {
const { type: menuType, sourceId } = useTldrawUiMenuContext()
const msg = useTranslation()
const labelToUse = unwrapLabel(label, menuType)
const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
switch (menuType) {
case 'panel': {
return (
<div className="tlui-menu__group" data-testid={`${sourceId}-group.${id}`}>
{children}
</div>
)
}
case 'menu': {
return (
<TldrawUiDropdownMenuGroup data-testid={`${sourceId}-group.${id}`}>
{children}
</TldrawUiDropdownMenuGroup>
)
}
case 'context-menu': {
return (
<ContextMenuGroup
dir="ltr"
className="tlui-menu__group"
data-testid={`${sourceId}-group.${id}`}
>
{children}
</ContextMenuGroup>
)
}
case 'keyboard-shortcuts': {
// todo: if groups need a label, let's give em a label
return (
<div className="tlui-shortcuts-dialog__group" data-testid={`${sourceId}-group.${id}`}>
<h2 className="tlui-shortcuts-dialog__group__title">{labelStr}</h2>
<div className="tlui-shortcuts-dialog__group__content">{children}</div>
</div>
)
}
default: {
return children
}
}
}