mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: new Menu Component API (#6034)
* feat: new Menu Component API * allow valid children types * introduce menu group to group items * Add lang footer * use display name * displayName * define types inside * fix default menu * add json export to menu * fix * simplify expression * put open menu into own compo to optimize perf So that we don't rerun `useOutsideClickHook` (and rebind event listeners all the time) * naming tweaks * rename MenuComponents->MenuDefaultItems and export default items from Menu.Items * import Menu.scss in Menu.tsx * move menu scss to excal app * Don't filter children inside menu group * move E+ out of socials * support style prop for MenuItem and MenuGroup * Support header in menu group and add Excalidraw links header for default items in social section * rename header to title * fix padding for lang * render menu in mobile * review fixes * tweaks * Export collaborators and show in mobile menu * revert .env * lint :p * again lint * show correct actions in view mode for mobile * Whitelist Collaborators Comp * mobile styling * padding * don't show nerds when menu open in mobile * lint :( * hide shortcuts * refactor userlist to support mobile and keep a wrapper comp for excal app * use only UserList * render only on mobile for default items * remove unused hooks * Show collab button in menu when onCollabButtonClick present and hide export when UIOptions.canvasActions.export is false * fix tests * lint * inject userlist inside menu on mobile * revert userlist * move menu socials to default menu * fix collab * use meny in library * Make Menu generic and create hamburgemenu for public excal menu and use menu in library as well * use appState.openMenu for mobile * fix tests * styling fixes and support style and class name in menu content * fix test * rename MenuDefaultItems->DefaultItems * move footer css to its own comp * rename HamburgerMenu -> MainMenu * rename menu -> dropdownMenu and update classes, onClick->onToggle * close main menu when dialog closes * by bye filtering * update docs * fix lint * update example, docs for useDevice and footer in mobile, rename menu ->DropDownMenu everywhere * spec * remove isMenuOpenAtom and set openMenu as canvas for main menu, render decreases in specs :) * [temp] remove cyclic depenedency to fix build * hack- update appstate to sync lang change * Add more specs * wip: rewrite MainMenu footer * fix margin * fix snaps * not needed as lang list no more imported * simplify custom footer rendering * Add DropdownMenuItemLink and DropdownMenuItemCustom and update API, docs * fix `MainMenu.ItemCustom` * naming * use onSelect and base class for custom items * fix lint * fix snap * use custom item for lang * update docs * fix * properly use `MainMenu.ItemCustom` for `LanguageList` * add margin top to custom items * flex Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi
GitHub
parent
08afb857c3
commit
8420aecb34
54 changed files with 1876 additions and 1911 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { fireEvent, GlobalTestState, render } from "../test-utils";
|
||||
import { Excalidraw, Footer } from "../../packages/excalidraw/index";
|
||||
import { fireEvent, GlobalTestState, toggleMenu, render } from "../test-utils";
|
||||
import { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
|
||||
import { queryByText, queryByTestId } from "@testing-library/react";
|
||||
import { GRID_SIZE, THEME } from "../../constants";
|
||||
import { t } from "../../i18n";
|
||||
|
|
@ -7,6 +7,12 @@ import { t } from "../../i18n";
|
|||
const { h } = window;
|
||||
|
||||
describe("<Excalidraw/>", () => {
|
||||
afterEach(() => {
|
||||
const menu = document.querySelector(".dropdown-menu");
|
||||
if (menu) {
|
||||
toggleMenu(document.querySelector(".excalidraw")!);
|
||||
}
|
||||
});
|
||||
describe("Test zenModeEnabled prop", () => {
|
||||
it('should show exit zen mode button when zen mode is set and zen mode option in context menu when zenModeEnabled is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
@ -56,9 +62,7 @@ describe("<Excalidraw/>", () => {
|
|||
<div>This is a custom footer</div>
|
||||
</Excalidraw>,
|
||||
);
|
||||
expect(
|
||||
container.querySelector(".layer-ui__wrapper__footer-center"),
|
||||
).toBeEmptyDOMElement();
|
||||
expect(container.querySelector(".footer-center")).toBe(null);
|
||||
|
||||
// Footer passed hence it will render the footer
|
||||
({ container } = await render(
|
||||
|
|
@ -68,12 +72,17 @@ describe("<Excalidraw/>", () => {
|
|||
</Footer>
|
||||
</Excalidraw>,
|
||||
));
|
||||
expect(
|
||||
container.querySelector(".layer-ui__wrapper__footer-center")?.innerHTML,
|
||||
).toMatchInlineSnapshot(
|
||||
`"<div class=\\"layer-ui__wrapper__footer-center zen-mode-transition\\"><div>This is a custom footer</div></div>"`,
|
||||
);
|
||||
expect(container.querySelector(".footer-center")).toMatchInlineSnapshot(`
|
||||
<div
|
||||
class="footer-center zen-mode-transition"
|
||||
>
|
||||
<div>
|
||||
This is a custom footer
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
describe("Test gridModeEnabled prop", () => {
|
||||
it('should show grid mode in context menu when gridModeEnabled is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
@ -112,98 +121,51 @@ describe("<Excalidraw/>", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("Test theme prop", () => {
|
||||
it("should show the theme toggle by default", async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
||||
expect(h.state.theme).toBe(THEME.LIGHT);
|
||||
|
||||
queryByTestId(container, "menu-button")!.click();
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not show theme toggle when the theme prop is defined", async () => {
|
||||
const { container } = await render(<Excalidraw theme="dark" />);
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
|
||||
});
|
||||
|
||||
it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw
|
||||
theme={THEME.DARK}
|
||||
UIOptions={{ canvasActions: { toggleTheme: true } }}
|
||||
/>,
|
||||
);
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw
|
||||
UIOptions={{ canvasActions: { toggleTheme: false } }}
|
||||
theme={THEME.DARK}
|
||||
/>,
|
||||
);
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test name prop", () => {
|
||||
it('should allow editing name when the name prop is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
||||
fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||
const textInput: HTMLInputElement | null = document.querySelector(
|
||||
".ExportDialog .ProjectName .TextInput",
|
||||
);
|
||||
expect(textInput?.value).toContain(`${t("labels.untitled")}`);
|
||||
expect(textInput?.nodeName).toBe("INPUT");
|
||||
});
|
||||
|
||||
it('should set the name and not allow editing when the name prop is present"', async () => {
|
||||
const name = "test";
|
||||
const { container } = await render(<Excalidraw name={name} />);
|
||||
|
||||
await fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||
const textInput = document.querySelector(
|
||||
".ExportDialog .ProjectName .TextInput--readonly",
|
||||
);
|
||||
expect(textInput?.textContent).toEqual(name);
|
||||
expect(textInput?.nodeName).toBe("SPAN");
|
||||
});
|
||||
it("should render main menu with host menu items if passed from host", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={undefined}>
|
||||
<MainMenu>
|
||||
<MainMenu.Item onSelect={() => window.alert("Clicked")}>
|
||||
Click me
|
||||
</MainMenu.Item>
|
||||
<MainMenu.ItemLink href="blog.excalidaw.com">
|
||||
Excalidraw blog
|
||||
</MainMenu.ItemLink>
|
||||
<MainMenu.ItemCustom>
|
||||
<button
|
||||
style={{ height: "2rem" }}
|
||||
onClick={() => window.alert("custom menu item")}
|
||||
>
|
||||
{" "}
|
||||
custom menu item
|
||||
</button>
|
||||
</MainMenu.ItemCustom>
|
||||
<MainMenu.DefaultItems.Help />
|
||||
</MainMenu>
|
||||
</Excalidraw>,
|
||||
);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("Test UIOptions prop", () => {
|
||||
it('should not hide any UI element when the UIOptions prop is "undefined"', async () => {
|
||||
await render(<Excalidraw />);
|
||||
|
||||
const canvasActions = document.querySelector(
|
||||
'section[aria-labelledby="test-id-canvasActions-title"]',
|
||||
);
|
||||
|
||||
expect(canvasActions).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("Test canvasActions", () => {
|
||||
it('should not hide any UI element when canvasActions is "undefined"', async () => {
|
||||
await render(<Excalidraw UIOptions={{}} />);
|
||||
const canvasActions = document.querySelector(
|
||||
'section[aria-labelledby="test-id-canvasActions-title"]',
|
||||
it('should render menu with default items when "UIOPtions" is "undefined"', async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={undefined} />,
|
||||
);
|
||||
expect(canvasActions).toMatchSnapshot();
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should hide clear canvas button when clearCanvas is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -211,7 +173,8 @@ describe("<Excalidraw/>", () => {
|
|||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "json-export-button")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -219,7 +182,8 @@ describe("<Excalidraw/>", () => {
|
|||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "image-export-button")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -237,7 +201,8 @@ describe("<Excalidraw/>", () => {
|
|||
UIOptions={{ canvasActions: { export: { saveFileToDisk: false } } }}
|
||||
/>,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "save-as-button")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -247,7 +212,8 @@ describe("<Excalidraw/>", () => {
|
|||
UIOptions={{ canvasActions: { saveToActiveFile: false } }}
|
||||
/>,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "save-button")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -257,7 +223,8 @@ describe("<Excalidraw/>", () => {
|
|||
UIOptions={{ canvasActions: { changeViewBackgroundColor: false } }}
|
||||
/>,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -265,12 +232,110 @@ describe("<Excalidraw/>", () => {
|
|||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
|
||||
);
|
||||
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
|
||||
});
|
||||
|
||||
it("should not render default items in custom menu even if passed if the prop in `canvasActions` is set to false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { loadScene: false } }}>
|
||||
<MainMenu>
|
||||
<MainMenu.ItemCustom>
|
||||
<button
|
||||
style={{ height: "2rem" }}
|
||||
onClick={() => window.alert("custom menu item")}
|
||||
>
|
||||
{" "}
|
||||
custom item
|
||||
</button>
|
||||
</MainMenu.ItemCustom>
|
||||
<MainMenu.DefaultItems.LoadScene />
|
||||
</MainMenu>
|
||||
</Excalidraw>,
|
||||
);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
// load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
|
||||
expect(queryByTestId(container, "load-button")).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test theme prop", () => {
|
||||
it("should show the theme toggle by default", async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
expect(h.state.theme).toBe(THEME.LIGHT);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not show theme toggle when the theme prop is defined", async () => {
|
||||
const { container } = await render(<Excalidraw theme={THEME.DARK} />);
|
||||
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
|
||||
});
|
||||
|
||||
it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw
|
||||
theme={THEME.DARK}
|
||||
UIOptions={{ canvasActions: { toggleTheme: true } }}
|
||||
/>,
|
||||
);
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw
|
||||
UIOptions={{ canvasActions: { toggleTheme: false } }}
|
||||
theme={THEME.DARK}
|
||||
/>,
|
||||
);
|
||||
expect(h.state.theme).toBe(THEME.DARK);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test name prop", () => {
|
||||
it('should allow editing name when the name prop is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||
const textInput: HTMLInputElement | null = document.querySelector(
|
||||
".ExportDialog .ProjectName .TextInput",
|
||||
);
|
||||
expect(textInput?.value).toContain(`${t("labels.untitled")}`);
|
||||
expect(textInput?.nodeName).toBe("INPUT");
|
||||
});
|
||||
|
||||
it('should set the name and not allow editing when the name prop is present"', async () => {
|
||||
const name = "test";
|
||||
const { container } = await render(<Excalidraw name={name} />);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
await fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||
const textInput = document.querySelector(
|
||||
".ExportDialog .ProjectName .TextInput--readonly",
|
||||
);
|
||||
expect(textInput?.textContent).toEqual(name);
|
||||
expect(textInput?.nodeName).toBe("SPAN");
|
||||
});
|
||||
});
|
||||
describe("Test autoFocus prop", () => {
|
||||
it("should not focus when autoFocus is false", async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue