foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempt to fix submenu not disappearing properly.

Browse Source
This commit is contained in:
barnabasmolnar 2023-04-18 14:57:25 +02:00
parent e615056302
commit 7d791b86f8
5 changed files with 106 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/dropdownMenu/DropdownMenu.scss
View File

@ -8,6 +8,12 @@
.dropdown-menu {
position: absolute;
.radix-menuitem {
&:focus-visible {
outline: none;
}
}
&--mobile {
bottom: 55px;
top: auto;

5
src/components/dropdownMenu/DropdownMenuItem.tsx
View File

@ -1,10 +1,11 @@
import React from "react";
import {
getDropdownMenuItemClassName,
useHandleDropdownMenuItemClick,
} from "./common";
import MenuItemContent from "./DropdownMenuItemContent";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const DropdownMenuItem = ({
icon,
onSelect,
@ -22,6 +23,7 @@ const DropdownMenuItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return (
<DropdownMenuPrimitive.Item className="radix-menuitem">
<button
{...rest}
onClick={handleClick}
@ -33,6 +35,7 @@ const DropdownMenuItem = ({
{children}
</MenuItemContent>
</button>
</DropdownMenuPrimitive.Item>
);
};

4
src/components/dropdownMenu/DropdownMenuSubItem.tsx
View File

@ -4,6 +4,8 @@ import {
useHandleDropdownMenuItemClick,
} from "./common";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const DropdownMenuSubItem = ({
icon,
onSelect,
@ -21,6 +23,7 @@ const DropdownMenuSubItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return (
<DropdownMenuPrimitive.Item className="radix-menuitem">
<button
{...rest}
onClick={handleClick}
@ -32,6 +35,7 @@ const DropdownMenuSubItem = ({
{children}
</MenuItemContent>
</button>
</DropdownMenuPrimitive.Item>
);
};

9
src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
View File

@ -8,19 +8,24 @@ const DropdownMenuSubTrigger = ({
icon,
shortcut,
className,
...rest
}: {
children: React.ReactNode;
icon?: JSX.Element;
shortcut?: string;
className?: string;
}) => {
} & React.HTMLAttributes<HTMLDivElement>) => {
return (
<DropdownMenuPrimitive.SubTrigger
<DropdownMenuPrimitive.SubTrigger className="radix-menuitem">
<div
{...rest}
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</div>
</DropdownMenuPrimitive.SubTrigger>
);
};

60
src/packages/excalidraw/example/App.tsx
View File

@ -507,9 +507,45 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
return (
<MainMenu>
<MainMenu.Sub>
<MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
<MainMenu.Sub.Trigger
title="Custom trigger"
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zm-7.518-.267A8.25 8.25 0 1120.25 10.5M8.288 14.212A5.25 5.25 0 1117.25 10.5"
/>
</svg>
}
>
Trigger
</MainMenu.Sub.Trigger>
<MainMenu.Sub.Content>
<MainMenu.Sub.Item
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
/>
</svg>
}
onSelect={() => window.alert("You clicked on sub item")}
>
Sub item
@ -523,10 +559,30 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
isCollaborating={isCollaborating}
onSelect={() => window.alert("You clicked on collab button")}
/>
<MainMenu.Sub>
<MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
<MainMenu.Sub.Content>
<MainMenu.Sub.Item
onSelect={() => window.alert("You clicked on sub item")}
>
Sub item
</MainMenu.Sub.Item>
</MainMenu.Sub.Content>
</MainMenu.Sub>
<MainMenu.Group title="Excalidraw links">
<MainMenu.DefaultItems.Socials />
</MainMenu.Group>
<MainMenu.Separator />
{/* <MainMenu.Separator /> */}
<MainMenu.Sub>
<MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
<MainMenu.Sub.Content>
<MainMenu.Sub.Item
onSelect={() => window.alert("You clicked on sub item")}
>
Sub item
</MainMenu.Sub.Item>
</MainMenu.Sub.Content>
</MainMenu.Sub>
<MainMenu.ItemCustom>
<button
style={{ height: "2rem" }}