import React from "react"; import { AppState } from "../types"; import { ActionManager } from "../actions/manager"; import { t, setLanguage } from "../i18n"; import Stack from "./Stack"; import { LanguageList } from "./LanguageList"; import { showSelectedShapeActions } from "../element"; import { NonDeletedExcalidrawElement } from "../element/types"; import { FixedSideContainer } from "./FixedSideContainer"; import { Island } from "./Island"; import { HintViewer } from "./HintViewer"; import { calculateScrollCenter } from "../scene"; import { SelectedShapeActions, ShapesSwitcher } from "./Actions"; import { Section } from "./Section"; import CollabButton from "./CollabButton"; import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars"; import { LockIcon } from "./LockIcon"; import { UserList } from "./UserList"; import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle"; import { EVENT_ACTION, trackEvent } from "../analytics"; type MobileMenuProps = { appState: AppState; actionManager: ActionManager; exportButton: React.ReactNode; setAppState: React.Component["setState"]; elements: readonly NonDeletedExcalidrawElement[]; libraryMenu: JSX.Element | null; onCollabButtonClick?: () => void; onLockToggle: () => void; canvas: HTMLCanvasElement | null; isCollaborating: boolean; }; export const MobileMenu = ({ appState, elements, libraryMenu, actionManager, exportButton, setAppState, onCollabButtonClick, onLockToggle, canvas, isCollaborating, }: MobileMenuProps) => ( <>
{(heading) => ( {heading} {libraryMenu} )}
{appState.openMenu === "canvas" ? (
{actionManager.renderAction("loadScene")} {actionManager.renderAction("saveScene")} {actionManager.renderAction("saveAsScene")} {exportButton} {actionManager.renderAction("clearCanvas")} {onCollabButtonClick && ( )}
{t("labels.language")} { await setLanguage(lng); setAppState({}); }} />
{t("labels.collaborators")} {Array.from(appState.collaborators) // Collaborator is either not initialized or is actually the current user. .filter(([_, client]) => Object.keys(client).length !== 0) .map(([clientId, client]) => ( {actionManager.renderAction( "goToCollaborator", clientId, )} ))}
) : appState.openMenu === "shape" && showSelectedShapeActions(appState, elements) ? (
) : null}
);