UNPKG

tldraw

Version:

A tiny little drawing editor.

8 lines (7 loc) 3.08 kB
{ "version": 3, "sources": ["../../../../../src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx"], "sourcesContent": ["import { usePassThroughWheelEvents } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultHelpMenuContent } from './DefaultHelpMenuContent'\n\n/** @public */\nexport interface TLUiHelpMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHelpMenu = memo(function DefaultHelpMenu({ children }: TLUiHelpMenuProps) {\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\t// Get the help menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultHelpMenuContent />\n\n\tif (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-help-menu\">\n\t\t\t<TldrawUiDropdownMenuRoot id=\"help menu\">\n\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiButton type=\"help\" title={msg('help-menu.title')} data-testid=\"help-menu.button\">\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"question-mark\" small />\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"end\" alignOffset={0} sideOffset={8}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"help-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t</div>\n\t)\n})\n"], "mappings": "AA+B6B,cAM1B,YAN0B;AA/B7B,SAAS,iCAAiC;AAC1C,SAAoB,MAAM,cAAc;AACxC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAQhC,MAAM,kBAAkB,KAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAK7B,QAAM,UAAU,YAAY,oBAAC,0BAAuB;AAEpD,MAAI,aAAa,oBAAoB,OAAQ,QAAO;AAEpD,SACC,oBAAC,SAAI,KAAU,WAAU,kBACxB,+BAAC,4BAAyB,IAAG,aAC5B;AAAA,wBAAC,+BACA,8BAAC,kBAAe,MAAK,QAAO,OAAO,IAAI,iBAAiB,GAAG,eAAY,oBACtE,8BAAC,sBAAmB,MAAK,iBAAgB,OAAK,MAAC,GAChD,GACD;AAAA,IACA,oBAAC,+BAA4B,MAAK,OAAM,OAAM,OAAM,aAAa,GAAG,YAAY,GAC/E,8BAAC,+BAA4B,MAAK,QAAO,UAAS,aAChD,mBACF,GACD;AAAA,KACD,GACD;AAEF,CAAC;", "names": ["DefaultHelpMenu"] }