smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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;

27
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,17 +23,19 @@ const DropdownMenuItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return (
<button
{...rest}
onClick={handleClick}
type="button"
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</button>
<DropdownMenuPrimitive.Item className="radix-menuitem">
<button
{...rest}
onClick={handleClick}
type="button"
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</button>
</DropdownMenuPrimitive.Item>
);
};

26
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,17 +23,19 @@ const DropdownMenuSubItem = ({
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return (
<button
{...rest}
onClick={handleClick}
type="button"
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</button>
<DropdownMenuPrimitive.Item className="radix-menuitem">
<button
{...rest}
onClick={handleClick}
type="button"
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</button>
</DropdownMenuPrimitive.Item>
);
};

19
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
className={getDropdownMenuItemClassName(className)}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
<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>
);
};