tldraw
Version:
A tiny little drawing editor.
75 lines (74 loc) • 2.87 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useEditor, usePassThroughWheelEvents, useValue } from "@tldraw/editor";
import { memo, useRef } from "react";
import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
import { useBreakpoint } from "../../context/breakpoints.mjs";
import { useReadonly } from "../../hooks/useReadonly.mjs";
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
import {
TldrawUiPopover,
TldrawUiPopoverContent,
TldrawUiPopoverTrigger
} from "../primitives/TldrawUiPopover.mjs";
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
import { useTldrawUiOrientation } from "../primitives/layout.mjs";
import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
import { DefaultActionsMenuContent } from "./DefaultActionsMenuContent.mjs";
const DefaultActionsMenu = memo(function DefaultActionsMenu2({
children
}) {
const msg = useTranslation();
const breakpoint = useBreakpoint();
const isReadonlyMode = useReadonly();
const { orientation } = useTldrawUiOrientation();
const ref = useRef(null);
usePassThroughWheelEvents(ref);
const editor = useEditor();
const isInAcceptableReadonlyState = useValue(
"should display quick actions when in readonly",
() => editor.isInAny("hand", "zoom"),
[editor]
);
const content = children ?? /* @__PURE__ */ jsx(DefaultActionsMenuContent, {});
if (isReadonlyMode && !isInAcceptableReadonlyState) return;
return /* @__PURE__ */ jsxs(TldrawUiPopover, { id: "actions-menu", children: [
/* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
TldrawUiToolbarButton,
{
type: "icon",
"data-testid": "actions-menu.button",
title: msg("actions-menu.title"),
children: /* @__PURE__ */ jsx(
TldrawUiButtonIcon,
{
icon: orientation === "horizontal" ? "dots-vertical" : "dots-horizontal",
small: true
}
)
}
) }),
/* @__PURE__ */ jsx(
TldrawUiPopoverContent,
{
side: orientation === "horizontal" ? breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? "bottom" : "top" : "right",
sideOffset: 6,
children: /* @__PURE__ */ jsx(
TldrawUiToolbar,
{
ref,
label: msg("actions-menu.title"),
className: "tlui-actions-menu",
"data-testid": "actions-menu.content",
orientation: "grid",
children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "actions-menu", children: content })
}
)
}
)
] });
});
export {
DefaultActionsMenu
};
//# sourceMappingURL=DefaultActionsMenu.mjs.map