kopia lustrzana https://github.com/Tldraw/Tldraw
106 wiersze
2.6 KiB
TypeScript
106 wiersze
2.6 KiB
TypeScript
import { Content, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu'
|
|
import { useContainer } from '@tldraw/editor'
|
|
import * as React from 'react'
|
|
import { MenuChild } from '../hooks/menuHelpers'
|
|
import { useHelpMenuSchema } from '../hooks/useHelpMenuSchema'
|
|
import { useMenuIsOpen } from '../hooks/useMenuIsOpen'
|
|
import { useReadonly } from '../hooks/useReadonly'
|
|
import { TLTranslationKey } from '../hooks/useTranslation/TLTranslationKey'
|
|
import { useTranslation } from '../hooks/useTranslation/useTranslation'
|
|
import { TLUiIconType } from '../icon-types'
|
|
import { LanguageMenu } from './LanguageMenu'
|
|
import * as M from './primitives/DropdownMenu'
|
|
import { Icon } from './primitives/Icon'
|
|
|
|
interface HelpMenuLink {
|
|
label: TLTranslationKey
|
|
icon: TLUiIconType
|
|
url: string
|
|
}
|
|
|
|
/** @public */
|
|
export interface HelpMenuProps {
|
|
links?: HelpMenuLink[]
|
|
}
|
|
|
|
/** @public */
|
|
export const HelpMenu = React.memo(function HelpMenu() {
|
|
const container = useContainer()
|
|
const msg = useTranslation()
|
|
const onOpenChange = useMenuIsOpen('help menu')
|
|
|
|
return (
|
|
<div className="tlui-help-menu">
|
|
<Root dir="ltr" onOpenChange={onOpenChange} modal={false}>
|
|
<Trigger
|
|
className="tlui-button tlui-help-menu__button"
|
|
dir="ltr"
|
|
title={msg('help-menu.title')}
|
|
>
|
|
<Icon icon="question-mark" />
|
|
</Trigger>
|
|
<Portal container={container} dir="ltr">
|
|
<Content
|
|
className="tlui-menu"
|
|
side="top"
|
|
sideOffset={8}
|
|
align="end"
|
|
alignOffset={0}
|
|
collisionPadding={4}
|
|
>
|
|
<HelpMenuContent />
|
|
</Content>
|
|
</Portal>
|
|
</Root>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
function HelpMenuContent() {
|
|
const menuSchema = useHelpMenuSchema()
|
|
|
|
const isReadonly = useReadonly()
|
|
|
|
function getHelpMenuItem(item: MenuChild) {
|
|
if (isReadonly && !item.readonlyOk) return null
|
|
|
|
switch (item.type) {
|
|
case 'custom': {
|
|
if (item.id === 'LANGUAGE_MENU') {
|
|
return <LanguageMenu key="item" />
|
|
}
|
|
break
|
|
}
|
|
case 'group': {
|
|
return (
|
|
<M.Group size="small" key={item.id}>
|
|
{item.children.map(getHelpMenuItem)}
|
|
</M.Group>
|
|
)
|
|
}
|
|
case 'submenu': {
|
|
return (
|
|
<M.Sub id={`help menu ${item.id}`} key={item.id}>
|
|
<M.SubTrigger label={item.label} />
|
|
<M.SubContent>{item.children.map(getHelpMenuItem)}</M.SubContent>
|
|
</M.Sub>
|
|
)
|
|
}
|
|
case 'item': {
|
|
const { id, kbd, label, onSelect, icon } = item.actionItem
|
|
return (
|
|
<M.Item
|
|
key={id}
|
|
kbd={kbd}
|
|
label={label}
|
|
onClick={() => onSelect('help-menu')}
|
|
iconLeft={icon}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
return <>{menuSchema.map(getHelpMenuItem)}</>
|
|
}
|