sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: renamed folder MainMenu->main-menu and support rest props (#6103)

Browse Source 
* renamed folder MainMenu -> main-menu

* rename ariaLabel -> aria-label and dataTestId -> data-testid

* allow rest props

* fix

* lint

* add ts check

* ts for div

* fix

* fix

* fix
This commit is contained in:
Aakansha Doshi 2023-01-12 20:40:09 +05:30 committed by GitHub
parent 599a8f3c6f
commit 9d04479f98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 43 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LayerUI.tsx
View File

@ -50,7 +50,7 @@ import WelcomeScreen from "./welcome-screen/WelcomeScreen";
import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
import { jotaiScope } from "../jotai";
import { useAtom } from "jotai";
import MainMenu from "./mainMenu/MainMenu";
import MainMenu from "./main-menu/MainMenu";
interface LayerUIProps {
actionManager: ActionManager;

6
src/components/LibraryMenuHeaderContent.tsx
View File

@ -193,7 +193,7 @@ export const LibraryMenuHeader: React.FC<{
<DropdownMenu.Item
onSelect={onLibraryImport}
icon={LoadIcon}
dataTestId="lib-dropdown--load"
data-testid="lib-dropdown--load"
>
{t("buttons.load")}
</DropdownMenu.Item>
@ -202,7 +202,7 @@ export const LibraryMenuHeader: React.FC<{
<DropdownMenu.Item
onSelect={onLibraryExport}
icon={ExportIcon}
dataTestId="lib-dropdown--export"
data-testid="lib-dropdown--export"
>
{t("buttons.export")}
</DropdownMenu.Item>
@ -219,7 +219,7 @@ export const LibraryMenuHeader: React.FC<{
<DropdownMenu.Item
icon={publishIcon}
onSelect={() => setShowPublishLibraryDialog(true)}
dataTestId="lib-dropdown--remove"
data-testid="lib-dropdown--remove"
>
{t("buttons.publishLibrary")}
</DropdownMenu.Item>

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

@ -9,30 +9,23 @@ const DropdownMenuItem = ({
icon,
onSelect,
children,
dataTestId,
shortcut,
className,
style,
ariaLabel,
...rest
}: {
icon?: JSX.Element;
onSelect: () => void;
children: React.ReactNode;
dataTestId?: string;
shortcut?: string;
className?: string;
style?: React.CSSProperties;
ariaLabel?: string;
}) => {
} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
return (
<button
aria-label={ariaLabel}
{...rest}
onClick={onSelect}
data-testid={dataTestId}
title={ariaLabel}
type="button"
className={getDrodownMenuItemClassName(className)}
style={style}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}

12
src/components/dropdownMenu/DropdownMenuItemCustom.tsx
View File

@ -1,19 +1,17 @@
import React from "react";
const DropdownMenuItemCustom = ({
children,
className = "",
style,
dataTestId,
...rest
}: {
children: React.ReactNode;
className?: string;
style?: React.CSSProperties;
dataTestId?: string;
}) => {
} & React.HTMLAttributes<HTMLDivElement>) => {
return (
<div
{...rest}
className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
style={style}
data-testid={dataTestId}
>
{children}
</div>

15
src/components/dropdownMenu/DropdownMenuItemLink.tsx
View File

@ -3,33 +3,26 @@ import React from "react";
import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
const DropdownMenuItemLink = ({
icon,
dataTestId,
shortcut,
href,
children,
className = "",
style,
ariaLabel,
...rest
}: {
icon?: JSX.Element;
children: React.ReactNode;
dataTestId?: string;
shortcut?: string;
className?: string;
href: string;
style?: React.CSSProperties;
ariaLabel?: string;
}) => {
} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
return (
<a
{...rest}
href={href}
target="_blank"
rel="noreferrer"
className={getDrodownMenuItemClassName(className)}
style={style}
data-testid={dataTestId}
title={ariaLabel}
aria-label={ariaLabel}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}

0
src/components/mainMenu/DefaultItems.scss → src/components/main-menu/DefaultItems.scss
View File

36
src/components/mainMenu/DefaultItems.tsx → src/components/main-menu/DefaultItems.tsx
View File

@ -46,9 +46,9 @@ export const LoadScene = () => {
<DropdownMenuItem
icon={LoadIcon}
onSelect={() => actionManager.executeAction(actionLoadScene)}
dataTestId="load-button"
data-testid="load-button"
shortcut={getShortcutFromShortcutName("loadScene")}
ariaLabel={t("buttons.load")}
aria-label={t("buttons.load")}
>
{t("buttons.load")}
</DropdownMenuItem>
@ -69,10 +69,10 @@ export const SaveToActiveFile = () => {
return (
<DropdownMenuItem
shortcut={getShortcutFromShortcutName("saveScene")}
dataTestId="save-button"
data-testid="save-button"
onSelect={() => actionManager.executeAction(actionSaveToActiveFile)}
icon={save}
ariaLabel={`${t("buttons.save")}`}
aria-label={`${t("buttons.save")}`}
>{`${t("buttons.save")}`}</DropdownMenuItem>
);
};
@ -86,10 +86,10 @@ export const SaveAsImage = () => {
return (
<DropdownMenuItem
icon={ExportImageIcon}
dataTestId="image-export-button"
data-testid="image-export-button"
onSelect={() => setAppState({ openDialog: "imageExport" })}
shortcut={getShortcutFromShortcutName("imageExport")}
ariaLabel={t("buttons.exportImage")}
aria-label={t("buttons.exportImage")}
>
{t("buttons.exportImage")}
</DropdownMenuItem>
@ -106,11 +106,11 @@ export const Help = () => {
return (
<DropdownMenuItem
dataTestId="help-menu-item"
data-testid="help-menu-item"
icon={HelpIcon}
onSelect={() => actionManager.executeAction(actionShortcuts)}
shortcut="?"
ariaLabel={t("helpDialog.title")}
aria-label={t("helpDialog.title")}
>
{t("helpDialog.title")}
</DropdownMenuItem>
@ -136,8 +136,8 @@ export const ClearCanvas = () => {
<DropdownMenuItem
icon={TrashIcon}
onSelect={toggleDialog}
dataTestId="clear-canvas-button"
ariaLabel={t("buttons.clearReset")}
data-testid="clear-canvas-button"
aria-label={t("buttons.clearReset")}
>
{t("buttons.clearReset")}
</DropdownMenuItem>
@ -175,9 +175,9 @@ export const ToggleTheme = () => {
return actionManager.executeAction(actionToggleTheme);
}}
icon={appState.theme === "dark" ? SunIcon : MoonIcon}
dataTestId="toggle-dark-mode"
data-testid="toggle-dark-mode"
shortcut={getShortcutFromShortcutName("toggleTheme")}
ariaLabel={
aria-label={
appState.theme === "dark"
? t("buttons.lightMode")
: t("buttons.darkMode")
@ -222,8 +222,8 @@ export const Export = () => {
onSelect={() => {
setAppState({ openDialog: "jsonExport" });
}}
dataTestId="json-export-button"
ariaLabel={t("buttons.export")}
data-testid="json-export-button"
aria-label={t("buttons.export")}
>
{t("buttons.export")}
</DropdownMenuItem>
@ -236,21 +236,21 @@ export const Socials = () => (
<DropdownMenuItemLink
icon={GithubIcon}
href="https://github.com/excalidraw/excalidraw"
ariaLabel="GitHub"
aria-label="GitHub"
>
GitHub
</DropdownMenuItemLink>
<DropdownMenuItemLink
icon={DiscordIcon}
href="https://discord.gg/UexuTaE"
ariaLabel="Discord"
aria-label="Discord"
>
Discord
</DropdownMenuItemLink>
<DropdownMenuItemLink
icon={TwitterIcon}
href="https://twitter.com/excalidraw"
ariaLabel="Twitter"
aria-label="Twitter"
>
Twitter
</DropdownMenuItemLink>
@ -270,7 +270,7 @@ export const LiveCollaboration = ({
const appState = useExcalidrawAppState();
return (
<DropdownMenuItem
dataTestId="collab-button"
data-testid="collab-button"
icon={UsersIcon}
className={clsx({
"active-collab": isCollaborating,

0
src/components/mainMenu/MainMenu.tsx → src/components/main-menu/MainMenu.tsx
View File

28
src/packages/excalidraw/README.md
View File

@ -479,14 +479,10 @@ Use this component to render a menu item.
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onSelect` | `Function` | Yes | | The handler is triggered when the item is selected. |
| `children` | `React.ReactNode` | Yes | | The content of the menu item |
| `icon` | `JSX.Element` | No | | The icon used in the menu item |
| `onSelect` | `Function` | Yes | `undefined` | The handler is triggered when the item is selected. |
| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
| `shortcut` | `string` | No | | The keyboard shortcut (label-only, does not affect behavior) |
| `className` | `string` | No | | The class names to be added to the menu item |
| `style` | `React.CSSProperties` | No | | The inline styles to be added to the menu item |
| `ariaLabel` | `string` | | No | The `aria-label` to be added to the item for accessibility |
| `dataTestId` | `string` | | No | The `data-testid` to be added to the item. |
**MainMenu.ItemLink**
@ -510,14 +506,10 @@ const App = () => (
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `href` | `string` | Yes | | The `href` attribute to be added to the `anchor` element. |
| `children` | `React.ReactNode` | Yes | | The content of the menu item |
| `icon` | `JSX.Element` | No | | The icon used in the menu item |
| `href` | `string` | Yes | `undefined` | The `href` attribute to be added to the `anchor` element. |
| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
| `shortcut` | `string` | No | | The keyboard shortcut (label-only, does not affect behavior) |
| `className` | `string` | No | "" | The class names to be added to the menu item |
| `style` | `React.CSSProperties` | No | | The inline styles to be added to the menu item |
| `ariaLabel` | `string` | No | | The `aria-label` to be added to the item for accessibility |
| `dataTestId` | `string` | No | | The `data-testid` to be added to the item. |
**MainMenu.ItemCustom**
@ -547,9 +539,6 @@ const App = () => (
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
| `className` | `string` | No | "" | The class names to be added to the menu item |
| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
**MainMenu.DefaultItems**
@ -595,10 +584,7 @@ const App = () => (
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `MenuItem Group` |
| `title` | `string` | No | `undefined` | The `title` for the grouped items |
| `className` | `string` | No | "" | The `classname` to be added to the group |
| `style` | `React.CSsSProperties` | No | `undefined` | The inline `styles` to be added to the group |
| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `MainMenu.Group` |
### WelcomeScreen

2
src/packages/excalidraw/index.tsx
View File

@ -12,7 +12,7 @@ import { DEFAULT_UI_OPTIONS } from "../../constants";
import { Provider } from "jotai";
import { jotaiScope, jotaiStore } from "../../jotai";
import Footer from "../../components/footer/FooterCenter";
import MainMenu from "../../components/mainMenu/MainMenu";
import MainMenu from "../../components/main-menu/MainMenu";
import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
const ExcalidrawBase = (props: ExcalidrawProps) => {