kopia lustrzana https://github.com/Tldraw/Tldraw
71 wiersze
2.3 KiB
TypeScript
71 wiersze
2.3 KiB
TypeScript
import { useEditor, useValue } from '@tldraw/editor'
|
|
import { ReactNode, memo } from 'react'
|
|
import { tldrawConstants } from '../../../tldraw-constants'
|
|
import { useBreakpoint } from '../../context/breakpoints'
|
|
import { useReadonly } from '../../hooks/useReadonly'
|
|
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
|
|
import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
|
|
import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
|
|
import {
|
|
TldrawUiPopover,
|
|
TldrawUiPopoverContent,
|
|
TldrawUiPopoverTrigger,
|
|
} from '../primitives/TldrawUiPopover'
|
|
import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
|
|
import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
|
|
|
|
const { PORTRAIT_BREAKPOINT } = tldrawConstants
|
|
|
|
/** @public */
|
|
export type TLUiActionsMenuProps = {
|
|
children?: ReactNode
|
|
}
|
|
|
|
/** @public */
|
|
export const DefaultActionsMenu = memo(function DefaultActionsMenu({
|
|
children,
|
|
}: TLUiActionsMenuProps) {
|
|
const msg = useTranslation()
|
|
const breakpoint = useBreakpoint()
|
|
|
|
const isReadonlyMode = useReadonly()
|
|
|
|
const editor = useEditor()
|
|
const isInAcceptableReadonlyState = useValue(
|
|
'should display quick actions when in readonly',
|
|
() => editor.isInAny('hand', 'zoom'),
|
|
[editor]
|
|
)
|
|
|
|
// Get the actions menu content, either the default component or the user's
|
|
// override. If there's no menu content, then the user has set it to null,
|
|
// so skip rendering the menu.
|
|
|
|
const content = children ?? <DefaultActionsMenuContent />
|
|
if (isReadonlyMode && !isInAcceptableReadonlyState) return
|
|
|
|
return (
|
|
<TldrawUiPopover id="actions-menu">
|
|
<TldrawUiPopoverTrigger>
|
|
<TldrawUiButton
|
|
type="icon"
|
|
data-testid="actions-menu.button"
|
|
title={msg('actions-menu.title')}
|
|
>
|
|
<TldrawUiButtonIcon icon="dots-vertical" small />
|
|
</TldrawUiButton>
|
|
</TldrawUiPopoverTrigger>
|
|
<TldrawUiPopoverContent
|
|
side={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}
|
|
sideOffset={6}
|
|
>
|
|
<div className="tlui-actions-menu tlui-buttons__grid" data-testid="actions-menu.content">
|
|
<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
|
|
{content}
|
|
</TldrawUiMenuContextProvider>
|
|
</div>
|
|
</TldrawUiPopoverContent>
|
|
</TldrawUiPopover>
|
|
)
|
|
})
|