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>dwelle/bump-socket.io^2
Aakansha Doshi
2 years ago
committed by
GitHub
parent
08afb857c3
commit
8420aecb34
@ -1,85 +0,0 @@
|
||||
@import "../css/variables.module";
|
||||
|
||||
.excalidraw {
|
||||
.menu-container {
|
||||
background-color: #fff !important;
|
||||
max-height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
@include outlineButtonStyles;
|
||||
background-color: var(--island-bg-color);
|
||||
width: var(--lg-button-size);
|
||||
height: var(--lg-button-size);
|
||||
|
||||
svg {
|
||||
width: var(--lg-icon-size);
|
||||
height: var(--lg-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
align-items: center;
|
||||
padding: 0 0.625rem;
|
||||
height: 2rem;
|
||||
column-gap: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-gray-100);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-md);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
font-family: inherit;
|
||||
|
||||
@media screen and (min-width: 1921px) {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&__text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__shortcut {
|
||||
margin-inline-start: auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.active-collab {
|
||||
background-color: #ecfdf5;
|
||||
color: #064e3c;
|
||||
}
|
||||
}
|
||||
|
||||
&.theme--dark {
|
||||
.menu-item {
|
||||
color: var(--color-gray-40);
|
||||
|
||||
&.active-collab {
|
||||
background-color: #064e3c;
|
||||
color: #ecfdf5;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
background-color: var(--color-gray-90) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import clsx from "clsx";
|
||||
import "./Menu.scss";
|
||||
|
||||
interface MenuProps {
|
||||
icon: JSX.Element;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
dataTestId: string;
|
||||
shortcut?: string;
|
||||
isCollaborating?: boolean;
|
||||
}
|
||||
|
||||
const MenuItem = ({
|
||||
icon,
|
||||
onClick,
|
||||
label,
|
||||
dataTestId,
|
||||
shortcut,
|
||||
isCollaborating,
|
||||
}: MenuProps) => {
|
||||
return (
|
||||
<button
|
||||
className={clsx("menu-item", { "active-collab": isCollaborating })}
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
data-testid={dataTestId}
|
||||
title={label}
|
||||
type="button"
|
||||
>
|
||||
<div className="menu-item__icon">{icon}</div>
|
||||
<div className="menu-item__text">{label}</div>
|
||||
{shortcut && <div className="menu-item__shortcut">{shortcut}</div>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuItem;
|
||||
@ -1,53 +0,0 @@
|
||||
import { GithubIcon, DiscordIcon, PlusPromoIcon, TwitterIcon } from "./icons";
|
||||
|
||||
export const MenuLinks = () => (
|
||||
<>
|
||||
<a
|
||||
href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="menu-item"
|
||||
style={{ color: "var(--color-promo)" }}
|
||||
>
|
||||
<div className="menu-item__icon">{PlusPromoIcon}</div>
|
||||
<div className="menu-item__text">Excalidraw+</div>
|
||||
</a>
|
||||
<a
|
||||
className="menu-item"
|
||||
href="https://github.com/excalidraw/excalidraw"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="menu-item__icon">{GithubIcon}</div>
|
||||
<div className="menu-item__text">GitHub</div>
|
||||
</a>
|
||||
<a
|
||||
className="menu-item"
|
||||
target="_blank"
|
||||
href="https://discord.gg/UexuTaE"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="menu-item__icon">{DiscordIcon}</div>
|
||||
<div className="menu-item__text">Discord</div>
|
||||
</a>
|
||||
<a
|
||||
className="menu-item"
|
||||
target="_blank"
|
||||
href="https://twitter.com/excalidraw"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="menu-item__icon">{TwitterIcon}</div>
|
||||
<div className="menu-item__text">Twitter</div>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Separator = () => (
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "var(--default-border-color)",
|
||||
margin: ".5rem 0",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@ -0,0 +1,127 @@
|
||||
@import "../../css/variables.module";
|
||||
|
||||
.excalidraw {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
&--mobile {
|
||||
bottom: 55px;
|
||||
top: auto;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.75rem;
|
||||
|
||||
.dropdown-menu-container {
|
||||
padding: 8px 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--island-bg-color);
|
||||
box-shadow: var(--shadow-island);
|
||||
border-radius: var(--border-radius-lg);
|
||||
position: relative;
|
||||
transition: box-shadow 0.5s ease-in-out;
|
||||
|
||||
&.zen-mode {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-container {
|
||||
background-color: #fff !important;
|
||||
max-height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
--gap: 2;
|
||||
}
|
||||
|
||||
.dropdown-menu-item-base {
|
||||
display: flex;
|
||||
padding: 0 0.625rem;
|
||||
column-gap: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-gray-100);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.dropdown-menu-item {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-md);
|
||||
|
||||
@media screen and (min-width: 1921px) {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&__text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__shortcut {
|
||||
margin-inline-start: auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-item-custom {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-menu-group-title {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.theme--dark {
|
||||
.dropdown-menu-item {
|
||||
color: var(--color-gray-40);
|
||||
}
|
||||
|
||||
.dropdown-menu-container {
|
||||
background-color: var(--color-gray-90) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-button {
|
||||
@include outlineButtonStyles;
|
||||
background-color: var(--island-bg-color);
|
||||
width: var(--lg-button-size);
|
||||
height: var(--lg-button-size);
|
||||
|
||||
svg {
|
||||
width: var(--lg-icon-size);
|
||||
height: var(--lg-icon-size);
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: var(--default-button-size);
|
||||
height: var(--default-button-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import DropdownMenuTrigger from "./DropdownMenuTrigger";
|
||||
import DropdownMenuItem from "./DropdownMenuItem";
|
||||
import MenuSeparator from "./DropdownMenuSeparator";
|
||||
import DropdownMenuGroup from "./DropdownMenuGroup";
|
||||
import DropdownMenuContent from "./DropdownMenuContent";
|
||||
import DropdownMenuItemLink from "./DropdownMenuItemLink";
|
||||
import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
|
||||
import {
|
||||
getMenuContentComponent,
|
||||
getMenuTriggerComponent,
|
||||
} from "./dropdownMenuUtils";
|
||||
|
||||
import "./DropdownMenu.scss";
|
||||
|
||||
const DropdownMenu = ({
|
||||
children,
|
||||
open,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
open: boolean;
|
||||
}) => {
|
||||
const MenuTriggerComp = getMenuTriggerComponent(children);
|
||||
const MenuContentComp = getMenuContentComponent(children);
|
||||
return (
|
||||
<>
|
||||
{MenuTriggerComp}
|
||||
{open && MenuContentComp}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
DropdownMenu.Trigger = DropdownMenuTrigger;
|
||||
DropdownMenu.Content = DropdownMenuContent;
|
||||
DropdownMenu.Item = DropdownMenuItem;
|
||||
DropdownMenu.ItemLink = DropdownMenuItemLink;
|
||||
DropdownMenu.ItemCustom = DropdownMenuItemCustom;
|
||||
DropdownMenu.Group = DropdownMenuGroup;
|
||||
DropdownMenu.Separator = MenuSeparator;
|
||||
|
||||
export default DropdownMenu;
|
||||
|
||||
DropdownMenu.displayName = "DropdownMenu";
|
||||
@ -0,0 +1,51 @@
|
||||
import { useOutsideClickHook } from "../../hooks/useOutsideClick";
|
||||
import { Island } from "../Island";
|
||||
|
||||
import { useDevice } from "../App";
|
||||
import clsx from "clsx";
|
||||
import Stack from "../Stack";
|
||||
|
||||
const MenuContent = ({
|
||||
children,
|
||||
onClickOutside,
|
||||
className = "",
|
||||
style,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
onClickOutside?: () => void;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) => {
|
||||
const device = useDevice();
|
||||
const menuRef = useOutsideClickHook(() => {
|
||||
onClickOutside?.();
|
||||
});
|
||||
|
||||
const classNames = clsx(`dropdown-menu ${className}`, {
|
||||
"dropdown-menu--mobile": device.isMobile,
|
||||
}).trim();
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className={classNames}
|
||||
style={style}
|
||||
data-testid="dropdown-menu"
|
||||
>
|
||||
{/* the zIndex ensures this menu has higher stacking order,
|
||||
see https://github.com/excalidraw/excalidraw/pull/1445 */}
|
||||
{device.isMobile ? (
|
||||
<Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
|
||||
) : (
|
||||
<Island
|
||||
className="dropdown-menu-container"
|
||||
padding={2}
|
||||
style={{ zIndex: 1 }}
|
||||
>
|
||||
{children}
|
||||
</Island>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MenuContent;
|
||||
MenuContent.displayName = "DropdownMenuContent";
|
||||
@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
const MenuGroup = ({
|
||||
children,
|
||||
className = "",
|
||||
style,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
title?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={`dropdown-menu-group ${className}`} style={style}>
|
||||
{title && <p className="dropdown-menu-group-title">{title}</p>}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuGroup;
|
||||
MenuGroup.displayName = "DropdownMenuGroup";
|
||||
@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import MenuItemContent from "./DropdownMenuItemContent";
|
||||
|
||||
export const getDrodownMenuItemClassName = (className = "") => {
|
||||
return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
|
||||
};
|
||||
|
||||
const DropdownMenuItem = ({
|
||||
icon,
|
||||
onSelect,
|
||||
children,
|
||||
dataTestId,
|
||||
shortcut,
|
||||
className,
|
||||
style,
|
||||
ariaLabel,
|
||||
}: {
|
||||
icon?: JSX.Element;
|
||||
onSelect: () => void;
|
||||
children: React.ReactNode;
|
||||
dataTestId?: string;
|
||||
shortcut?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
ariaLabel?: string;
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
aria-label={ariaLabel}
|
||||
onClick={onSelect}
|
||||
data-testid={dataTestId}
|
||||
title={ariaLabel}
|
||||
type="button"
|
||||
className={getDrodownMenuItemClassName(className)}
|
||||
style={style}
|
||||
>
|
||||
<MenuItemContent icon={icon} shortcut={shortcut}>
|
||||
{children}
|
||||
</MenuItemContent>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownMenuItem;
|
||||
DropdownMenuItem.displayName = "DropdownMenuItem";
|
||||
@ -0,0 +1,23 @@
|
||||
import { useDevice } from "../App";
|
||||
|
||||
const MenuItemContent = ({
|
||||
icon,
|
||||
shortcut,
|
||||
children,
|
||||
}: {
|
||||
icon?: JSX.Element;
|
||||
shortcut?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const device = useDevice();
|
||||
return (
|
||||
<>
|
||||
<div className="dropdown-menu-item__icon">{icon}</div>
|
||||
<div className="dropdown-menu-item__text">{children}</div>
|
||||
{shortcut && !device.isMobile && (
|
||||
<div className="dropdown-menu-item__shortcut">{shortcut}</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MenuItemContent;
|
||||
@ -0,0 +1,23 @@
|
||||
const DropdownMenuItemCustom = ({
|
||||
children,
|
||||
className = "",
|
||||
style,
|
||||
dataTestId,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
dataTestId?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
|
||||
style={style}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownMenuItemCustom;
|
||||
@ -0,0 +1,42 @@
|
||||
import MenuItemContent from "./DropdownMenuItemContent";
|
||||
import React from "react";
|
||||
import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
|
||||
const DropdownMenuItemLink = ({
|
||||
icon,
|
||||
dataTestId,
|
||||
shortcut,
|
||||
href,
|
||||
children,
|
||||
className = "",
|
||||
style,
|
||||
ariaLabel,
|
||||
}: {
|
||||
icon?: JSX.Element;
|
||||
children: React.ReactNode;
|
||||
dataTestId?: string;
|
||||
shortcut?: string;
|
||||
className?: string;
|
||||
href: string;
|
||||
style?: React.CSSProperties;
|
||||
ariaLabel?: string;
|
||||
}) => {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={getDrodownMenuItemClassName(className)}
|
||||
style={style}
|
||||
data-testid={dataTestId}
|
||||
title={ariaLabel}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<MenuItemContent icon={icon} shortcut={shortcut}>
|
||||
{children}
|
||||
</MenuItemContent>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownMenuItemLink;
|
||||
DropdownMenuItemLink.displayName = "DropdownMenuItemLink";
|
||||
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
|
||||
const MenuSeparator = () => (
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "var(--default-border-color)",
|
||||
margin: ".5rem 0",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default MenuSeparator;
|
||||
MenuSeparator.displayName = "DropdownMenuSeparator";
|
||||
@ -0,0 +1,37 @@
|
||||
import clsx from "clsx";
|
||||
import { useDevice, useExcalidrawAppState } from "../App";
|
||||
|
||||
const MenuTrigger = ({
|
||||
className = "",
|
||||
children,
|
||||
onToggle,
|
||||
}: {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
onToggle: () => void;
|
||||
}) => {
|
||||
const appState = useExcalidrawAppState();
|
||||
const device = useDevice();
|
||||
const classNames = clsx(
|
||||
`dropdown-menu-button ${className}`,
|
||||
"zen-mode-transition",
|
||||
{
|
||||
"transition-left": appState.zenModeEnabled,
|
||||
"dropdown-menu-button--mobile": device.isMobile,
|
||||
},
|
||||
).trim();
|
||||
return (
|
||||
<button
|
||||
data-prevent-outside-click
|
||||
className={classNames}
|
||||
onClick={onToggle}
|
||||
type="button"
|
||||
data-testid="dropdown-menu-button"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuTrigger;
|
||||
MenuTrigger.displayName = "DropdownMenuTrigger";
|
||||
@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
export const getMenuTriggerComponent = (children: React.ReactNode) => {
|
||||
const comp = React.Children.toArray(children).find(
|
||||
(child) =>
|
||||
React.isValidElement(child) &&
|
||||
typeof child.type !== "string" &&
|
||||
//@ts-ignore
|
||||
child?.type.displayName &&
|
||||
//@ts-ignore
|
||||
child.type.displayName === "DropdownMenuTrigger",
|
||||
);
|
||||
if (!comp) {
|
||||
return null;
|
||||
}
|
||||
//@ts-ignore
|
||||
return comp;
|
||||
};
|
||||
|
||||
export const getMenuContentComponent = (children: React.ReactNode) => {
|
||||
const comp = React.Children.toArray(children).find(
|
||||
(child) =>
|
||||
React.isValidElement(child) &&
|
||||
typeof child.type !== "string" &&
|
||||
//@ts-ignore
|
||||
child?.type.displayName &&
|
||||
//@ts-ignore
|
||||
child.type.displayName === "DropdownMenuContent",
|
||||
);
|
||||
if (!comp) {
|
||||
return null;
|
||||
}
|
||||
//@ts-ignore
|
||||
return comp;
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
.footer-center {
|
||||
pointer-events: none;
|
||||
& > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
import clsx from "clsx";
|
||||
import { getShortcutFromShortcutName } from "../../actions/shortcuts";
|
||||
import { t } from "../../i18n";
|
||||
import {
|
||||
useExcalidrawAppState,
|
||||
useExcalidrawSetAppState,
|
||||
useExcalidrawActionManager,
|
||||
} from "../App";
|
||||
import { ExportIcon, ExportImageIcon, UsersIcon } from "../icons";
|
||||
import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
|
||||
import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
|
||||
import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
|
||||
|
||||
export const LoadScene = () => {
|
||||
const appState = useExcalidrawAppState();
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
if (appState.viewModeEnabled) {
|
||||
return null;
|
||||
}
|
||||
return actionManager.renderAction("loadScene");
|
||||
};
|
||||
LoadScene.displayName = "LoadScene";
|
||||
|
||||
export const SaveToActiveFile = () => {
|
||||
const appState = useExcalidrawAppState();
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
if (!appState.fileHandle) {
|
||||
return null;
|
||||
}
|
||||
return actionManager.renderAction("saveToActiveFile");
|
||||
};
|
||||
SaveToActiveFile.displayName = "SaveToActiveFile";
|
||||
|
||||
export const SaveAsImage = () => {
|
||||
const setAppState = useExcalidrawSetAppState();
|
||||
// Hack until we tie "t" to lang state
|
||||
// eslint-disable-next-line
|
||||
const appState = useExcalidrawAppState();
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
icon={ExportImageIcon}
|
||||
dataTestId="image-export-button"
|
||||
onSelect={() => setAppState({ openDialog: "imageExport" })}
|
||||
shortcut={getShortcutFromShortcutName("imageExport")}
|
||||
ariaLabel={t("buttons.exportImage")}
|
||||
>
|
||||
{t("buttons.exportImage")}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
};
|
||||
SaveAsImage.displayName = "SaveAsImage";
|
||||
|
||||
export const Help = () => {
|
||||
// Hack until we tie "t" to lang state
|
||||
// eslint-disable-next-line
|
||||
const appState = useExcalidrawAppState();
|
||||
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
return actionManager.renderAction("toggleShortcuts", undefined, true);
|
||||
};
|
||||
Help.displayName = "Help";
|
||||
|
||||
export const ClearCanvas = () => {
|
||||
const appState = useExcalidrawAppState();
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
|
||||
if (appState.viewModeEnabled) {
|
||||
return null;
|
||||
}
|
||||
return actionManager.renderAction("clearCanvas");
|
||||
};
|
||||
ClearCanvas.displayName = "ClearCanvas";
|
||||
|
||||
export const ToggleTheme = () => {
|
||||
// Hack until we tie "t" to lang state
|
||||
// eslint-disable-next-line
|
||||
const appState = useExcalidrawAppState();
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
return actionManager.renderAction("toggleTheme");
|
||||
};
|
||||
ToggleTheme.displayName = "ToggleTheme";
|
||||
|
||||
export const ChangeCanvasBackground = () => {
|
||||
const appState = useExcalidrawAppState();
|
||||
const actionManager = useExcalidrawActionManager();
|
||||
|
||||
if (appState.viewModeEnabled) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div style={{ marginTop: "0.5rem" }}>
|
||||
<div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
|
||||
{t("labels.canvasBackground")}
|
||||
</div>
|
||||
<div style={{ padding: "0 0.625rem" }}>
|
||||
{actionManager.renderAction("changeViewBackgroundColor")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
|
||||
|
||||
export const Export = () => {
|
||||
// Hack until we tie "t" to lang state
|
||||
// eslint-disable-next-line
|
||||
const appState = useExcalidrawAppState();
|
||||
const setAppState = useExcalidrawSetAppState();
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
icon={ExportIcon}
|
||||
onSelect={() => {
|
||||
setAppState({ openDialog: "jsonExport" });
|
||||
}}
|
||||
dataTestId="json-export-button"
|
||||
ariaLabel={t("buttons.export")}
|
||||
>
|
||||
{t("buttons.export")}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
};
|
||||
Export.displayName = "Export";
|
||||
|
||||
export const Socials = () => (
|
||||
<>
|
||||
<DropdownMenuItemLink
|
||||
icon={GithubIcon}
|
||||
href="https://github.com/excalidraw/excalidraw"
|
||||
ariaLabel="GitHub"
|
||||
>
|
||||
GitHub
|
||||
</DropdownMenuItemLink>
|
||||
<DropdownMenuItemLink
|
||||
icon={DiscordIcon}
|
||||
href="https://discord.gg/UexuTaE"
|
||||
ariaLabel="Discord"
|
||||
>
|
||||
Discord
|
||||
</DropdownMenuItemLink>
|
||||
<DropdownMenuItemLink
|
||||
icon={TwitterIcon}
|
||||
href="https://twitter.com/excalidraw"
|
||||
ariaLabel="Twitter"
|
||||
>
|
||||
Twitter
|
||||
</DropdownMenuItemLink>
|
||||
</>
|
||||
);
|
||||
Socials.displayName = "Socials";
|
||||
|
||||
export const LiveCollaboration = ({
|
||||
onSelect,
|
||||
isCollaborating,
|
||||
}: {
|
||||
onSelect: () => void;
|
||||
isCollaborating: boolean;
|
||||
}) => {
|
||||
// Hack until we tie "t" to lang state
|
||||
// eslint-disable-next-line
|
||||
const appState = useExcalidrawAppState();
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
dataTestId="collab-button"
|
||||
icon={UsersIcon}
|
||||
className={clsx({
|
||||
"active-collab": isCollaborating,
|
||||
})}
|
||||
onSelect={onSelect}
|
||||
>
|
||||
{t("labels.liveCollaboration")}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
LiveCollaboration.displayName = "LiveCollaboration";
|
||||
@ -0,0 +1,56 @@
|
||||
import React from "react";
|
||||
import {
|
||||
useDevice,
|
||||
useExcalidrawAppState,
|
||||
useExcalidrawSetAppState,
|
||||
} from "../App";
|
||||
import DropdownMenu from "../dropdownMenu/DropdownMenu";
|
||||
|
||||
import * as DefaultItems from "./DefaultItems";
|
||||
|
||||
import { UserList } from "../UserList";
|
||||
import { t } from "../../i18n";
|
||||
import { HamburgerMenuIcon } from "../icons";
|
||||
|
||||
const MainMenu = ({ children }: { children?: React.ReactNode }) => {
|
||||
const device = useDevice();
|
||||
const appState = useExcalidrawAppState();
|
||||
const setAppState = useExcalidrawSetAppState();
|
||||
const onClickOutside = device.isMobile
|
||||
? undefined
|
||||
: () => setAppState({ openMenu: null });
|
||||
return (
|
||||
<DropdownMenu open={appState.openMenu === "canvas"}>
|
||||
<DropdownMenu.Trigger
|
||||
onToggle={() => {
|
||||
setAppState({
|
||||
openMenu: appState.openMenu === "canvas" ? null : "canvas",
|
||||
});
|
||||
}}
|
||||
>
|
||||
{HamburgerMenuIcon}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content onClickOutside={onClickOutside}>
|
||||
{children}
|
||||
{device.isMobile && appState.collaborators.size > 0 && (
|
||||
<fieldset className="UserList-Wrapper">
|
||||
<legend>{t("labels.collaborators")}</legend>
|
||||
<UserList mobile={true} collaborators={appState.collaborators} />
|
||||
</fieldset>
|
||||
)}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
MainMenu.Trigger = DropdownMenu.Trigger;
|
||||
MainMenu.Item = DropdownMenu.Item;
|
||||
MainMenu.ItemLink = DropdownMenu.ItemLink;
|
||||
MainMenu.ItemCustom = DropdownMenu.ItemCustom;
|
||||
MainMenu.Group = DropdownMenu.Group;
|
||||
MainMenu.Separator = DropdownMenu.Separator;
|
||||
MainMenu.DefaultItems = DefaultItems;
|
||||
|
||||
export default MainMenu;
|
||||
|
||||
MainMenu.displayName = "Menu";
|
||||
@ -0,0 +1,65 @@
|
||||
import { ExcalidrawImperativeAPI } from "../../../types";
|
||||
import { MIME_TYPES } from "../entry";
|
||||
const COMMENT_SVG = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-message-circle"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
||||
</svg>
|
||||
);
|
||||
const CustomFooter = ({
|
||||
excalidrawAPI,
|
||||
}: {
|
||||
excalidrawAPI: ExcalidrawImperativeAPI;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="custom-element"
|
||||
onClick={() => {
|
||||
excalidrawAPI?.setActiveTool({
|
||||
type: "custom",
|
||||
customType: "comment",
|
||||
});
|
||||
const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
|
||||
`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-message-circle"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
||||
</svg>`,
|
||||
)}`;
|
||||
excalidrawAPI?.setCursor(`url(${url}), auto`);
|
||||
}}
|
||||
>
|
||||
{COMMENT_SVG}
|
||||
</button>
|
||||
<button
|
||||
className="custom-footer"
|
||||
onClick={() => alert("This is dummy footer")}
|
||||
>
|
||||
{" "}
|
||||
custom footer{" "}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomFooter;
|
||||
@ -0,0 +1,20 @@
|
||||
import { ExcalidrawImperativeAPI } from "../../../types";
|
||||
import CustomFooter from "./CustomFooter";
|
||||
const { useDevice, Footer } = window.ExcalidrawLib;
|
||||
|
||||
const MobileFooter = ({
|
||||
excalidrawAPI,
|
||||
}: {
|
||||
excalidrawAPI: ExcalidrawImperativeAPI;
|
||||
}) => {
|
||||
const device = useDevice();
|
||||
if (device.isMobile) {
|
||||
return (
|
||||
<Footer>
|
||||
<CustomFooter excalidrawAPI={excalidrawAPI} />
|
||||
</Footer>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
export default MobileFooter;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue