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

refactor: don't pass zenModeEnable, viewModeEnabled and toggleZenMode props to LayerUI (#5444)

Browse Source 
refactor: don't pass zenModeEnabled and viewModeEnabled props to LayerUI
This commit is contained in:
Aakansha Doshi 2022-07-14 16:13:10 +05:30 committed by GitHub
parent 1ea67ba93d
commit df14c69977
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/App.tsx
View File

@ -469,7 +469,6 @@ class App extends React.Component<AppProps, AppState> {
} }
public render() { public render() {
const { zenModeEnabled, viewModeEnabled } = this.state;
const selectedElement = getSelectedElements( const selectedElement = getSelectedElements(
this.scene.getNonDeletedElements(), this.scene.getNonDeletedElements(),
this.state, this.state,
@ -484,7 +483,7 @@ class App extends React.Component<AppProps, AppState> {
return ( return (
<div <div
className={clsx("excalidraw excalidraw-container", { className={clsx("excalidraw excalidraw-container", {
"excalidraw--view-mode": viewModeEnabled, "excalidraw--view-mode": this.state.viewModeEnabled,
"excalidraw--mobile": this.device.isMobile, "excalidraw--mobile": this.device.isMobile,
})} })}
ref={this.excalidrawContainerRef} ref={this.excalidrawContainerRef}
@ -515,17 +514,14 @@ class App extends React.Component<AppProps, AppState> {
files: null, files: null,
}) })
} }
zenModeEnabled={zenModeEnabled}
toggleZenMode={this.toggleZenMode}
langCode={getLanguage().code} langCode={getLanguage().code}
isCollaborating={this.props.isCollaborating} isCollaborating={this.props.isCollaborating}
renderTopRightUI={renderTopRightUI} renderTopRightUI={renderTopRightUI}
renderCustomFooter={renderFooter} renderCustomFooter={renderFooter}
renderCustomStats={renderCustomStats} renderCustomStats={renderCustomStats}
viewModeEnabled={viewModeEnabled}
showExitZenModeBtn={ showExitZenModeBtn={
typeof this.props?.zenModeEnabled === "undefined" && typeof this.props?.zenModeEnabled === "undefined" &&
zenModeEnabled this.state.zenModeEnabled
} }
showThemeBtn={ showThemeBtn={
typeof this.props?.theme === "undefined" && typeof this.props?.theme === "undefined" &&
@ -1632,10 +1628,6 @@ class App extends React.Component<AppProps, AppState> {
}); });
}; };
toggleZenMode = () => {
this.actionManager.executeAction(actionToggleZenMode);
};
scrollToContent = ( scrollToContent = (
target: target:
| ExcalidrawElement | ExcalidrawElement

51
src/components/LayerUI.tsx
View File

@ -39,6 +39,7 @@ import { trackEvent } from "../analytics";
import { useDevice } from "../components/App"; import { useDevice } from "../components/App";
import { Stats } from "./Stats"; import { Stats } from "./Stats";
import { actionToggleStats } from "../actions/actionToggleStats"; import { actionToggleStats } from "../actions/actionToggleStats";
import { actionToggleZenMode } from "../actions";
interface LayerUIProps { interface LayerUIProps {
actionManager: ActionManager; actionManager: ActionManager;
@ -51,16 +52,13 @@ interface LayerUIProps {
onLockToggle: () => void; onLockToggle: () => void;
onPenModeToggle: () => void; onPenModeToggle: () => void;
onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void; onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
zenModeEnabled: boolean;
showExitZenModeBtn: boolean; showExitZenModeBtn: boolean;
showThemeBtn: boolean; showThemeBtn: boolean;
toggleZenMode: () => void;
langCode: Language["code"]; langCode: Language["code"];
isCollaborating: boolean; isCollaborating: boolean;
renderTopRightUI?: ExcalidrawProps["renderTopRightUI"]; renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
renderCustomFooter?: ExcalidrawProps["renderFooter"]; renderCustomFooter?: ExcalidrawProps["renderFooter"];
renderCustomStats?: ExcalidrawProps["renderCustomStats"]; renderCustomStats?: ExcalidrawProps["renderCustomStats"];
viewModeEnabled: boolean;
libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"]; libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
UIOptions: AppProps["UIOptions"]; UIOptions: AppProps["UIOptions"];
focusContainer: () => void; focusContainer: () => void;
@ -79,15 +77,12 @@ const LayerUI = ({
onLockToggle, onLockToggle,
onPenModeToggle, onPenModeToggle,
onInsertElements, onInsertElements,
zenModeEnabled,
showExitZenModeBtn, showExitZenModeBtn,
showThemeBtn, showThemeBtn,
toggleZenMode,
isCollaborating, isCollaborating,
renderTopRightUI, renderTopRightUI,
renderCustomFooter, renderCustomFooter,
renderCustomStats, renderCustomStats,
viewModeEnabled,
libraryReturnUrl, libraryReturnUrl,
UIOptions, UIOptions,
focusContainer, focusContainer,
@ -171,7 +166,7 @@ const LayerUI = ({
<Section <Section
heading="canvasActions" heading="canvasActions"
className={clsx("zen-mode-transition", { className={clsx("zen-mode-transition", {
"transition-left": zenModeEnabled, "transition-left": appState.zenModeEnabled,
})} })}
> >
{/* the zIndex ensures this menu has higher stacking order, {/* the zIndex ensures this menu has higher stacking order,
@ -192,7 +187,7 @@ const LayerUI = ({
<Section <Section
heading="canvasActions" heading="canvasActions"
className={clsx("zen-mode-transition", { className={clsx("zen-mode-transition", {
"transition-left": zenModeEnabled, "transition-left": appState.zenModeEnabled,
})} })}
> >
{/* the zIndex ensures this menu has higher stacking order, {/* the zIndex ensures this menu has higher stacking order,
@ -232,7 +227,7 @@ const LayerUI = ({
<Section <Section
heading="selectedShapeActions" heading="selectedShapeActions"
className={clsx("zen-mode-transition", { className={clsx("zen-mode-transition", {
"transition-left": zenModeEnabled, "transition-left": appState.zenModeEnabled,
})} })}
> >
<Island <Island
@ -302,32 +297,34 @@ const LayerUI = ({
<div className="App-menu App-menu_top"> <div className="App-menu App-menu_top">
<Stack.Col <Stack.Col
gap={4} gap={4}
className={clsx({ "disable-pointerEvents": zenModeEnabled })} className={clsx({
"disable-pointerEvents": appState.zenModeEnabled,
})}
> >
{viewModeEnabled {appState.viewModeEnabled
? renderViewModeCanvasActions() ? renderViewModeCanvasActions()
: renderCanvasActions()} : renderCanvasActions()}
{shouldRenderSelectedShapeActions && renderSelectedShapeActions()} {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
</Stack.Col> </Stack.Col>
{!viewModeEnabled && ( {!appState.viewModeEnabled && (
<Section heading="shapes"> <Section heading="shapes">
{(heading) => ( {(heading) => (
<Stack.Col gap={4} align="start"> <Stack.Col gap={4} align="start">
<Stack.Row <Stack.Row
gap={1} gap={1}
className={clsx("App-toolbar-container", { className={clsx("App-toolbar-container", {
"zen-mode": zenModeEnabled, "zen-mode": appState.zenModeEnabled,
})} })}
> >
<PenModeButton <PenModeButton
zenModeEnabled={zenModeEnabled} zenModeEnabled={appState.zenModeEnabled}
checked={appState.penMode} checked={appState.penMode}
onChange={onPenModeToggle} onChange={onPenModeToggle}
title={t("toolBar.penMode")} title={t("toolBar.penMode")}
penDetected={appState.penDetected} penDetected={appState.penDetected}
/> />
<LockButton <LockButton
zenModeEnabled={zenModeEnabled} zenModeEnabled={appState.zenModeEnabled}
checked={appState.activeTool.locked} checked={appState.activeTool.locked}
onChange={() => onLockToggle()} onChange={() => onLockToggle()}
title={t("toolBar.lock")} title={t("toolBar.lock")}
@ -335,7 +332,7 @@ const LayerUI = ({
<Island <Island
padding={1} padding={1}
className={clsx("App-toolbar", { className={clsx("App-toolbar", {
"zen-mode": zenModeEnabled, "zen-mode": appState.zenModeEnabled,
})} })}
> >
<HintViewer <HintViewer
@ -371,7 +368,7 @@ const LayerUI = ({
className={clsx( className={clsx(
"layer-ui__wrapper__top-right zen-mode-transition", "layer-ui__wrapper__top-right zen-mode-transition",
{ {
"transition-right": zenModeEnabled, "transition-right": appState.zenModeEnabled,
}, },
)} )}
> >
@ -396,7 +393,8 @@ const LayerUI = ({
className={clsx( className={clsx(
"layer-ui__wrapper__footer-left zen-mode-transition", "layer-ui__wrapper__footer-left zen-mode-transition",
{ {
"layer-ui__wrapper__footer-left--transition-left": zenModeEnabled, "layer-ui__wrapper__footer-left--transition-left":
appState.zenModeEnabled,
}, },
)} )}
> >
@ -408,12 +406,12 @@ const LayerUI = ({
zoom={appState.zoom} zoom={appState.zoom}
/> />
</Island> </Island>
{!viewModeEnabled && ( {!appState.viewModeEnabled && (
<> <>
<div <div
className={clsx("undo-redo-buttons zen-mode-transition", { className={clsx("undo-redo-buttons zen-mode-transition", {
"layer-ui__wrapper__footer-left--transition-bottom": "layer-ui__wrapper__footer-left--transition-bottom":
zenModeEnabled, appState.zenModeEnabled,
})} })}
> >
{actionManager.renderAction("undo", { size: "small" })} {actionManager.renderAction("undo", { size: "small" })}
@ -423,20 +421,20 @@ const LayerUI = ({
<div <div
className={clsx("eraser-buttons zen-mode-transition", { className={clsx("eraser-buttons zen-mode-transition", {
"layer-ui__wrapper__footer-left--transition-left": "layer-ui__wrapper__footer-left--transition-left":
zenModeEnabled, appState.zenModeEnabled,
})} })}
> >
{actionManager.renderAction("eraser", { size: "small" })} {actionManager.renderAction("eraser", { size: "small" })}
</div> </div>
</> </>
)} )}
{!viewModeEnabled && {!appState.viewModeEnabled &&
appState.multiElement && appState.multiElement &&
device.isTouchScreen && ( device.isTouchScreen && (
<div <div
className={clsx("finalize-button zen-mode-transition", { className={clsx("finalize-button zen-mode-transition", {
"layer-ui__wrapper__footer-left--transition-left": "layer-ui__wrapper__footer-left--transition-left":
zenModeEnabled, appState.zenModeEnabled,
})} })}
> >
{actionManager.renderAction("finalize", { size: "small" })} {actionManager.renderAction("finalize", { size: "small" })}
@ -450,7 +448,7 @@ const LayerUI = ({
"layer-ui__wrapper__footer-center zen-mode-transition", "layer-ui__wrapper__footer-center zen-mode-transition",
{ {
"layer-ui__wrapper__footer-left--transition-bottom": "layer-ui__wrapper__footer-left--transition-bottom":
zenModeEnabled, appState.zenModeEnabled,
}, },
)} )}
> >
@ -460,7 +458,7 @@ const LayerUI = ({
className={clsx( className={clsx(
"layer-ui__wrapper__footer-right zen-mode-transition", "layer-ui__wrapper__footer-right zen-mode-transition",
{ {
"transition-right disable-pointerEvents": zenModeEnabled, "transition-right disable-pointerEvents": appState.zenModeEnabled,
}, },
)} )}
> >
@ -470,7 +468,7 @@ const LayerUI = ({
className={clsx("disable-zen-mode", { className={clsx("disable-zen-mode", {
"disable-zen-mode--visible": showExitZenModeBtn, "disable-zen-mode--visible": showExitZenModeBtn,
})} })}
onClick={toggleZenMode} onClick={() => actionManager.executeAction(actionToggleZenMode)}
> >
{t("buttons.exitZenMode")} {t("buttons.exitZenMode")}
</button> </button>
@ -543,7 +541,6 @@ const LayerUI = ({
canvas={canvas} canvas={canvas}
isCollaborating={isCollaborating} isCollaborating={isCollaborating}
renderCustomFooter={renderCustomFooter} renderCustomFooter={renderCustomFooter}
viewModeEnabled={viewModeEnabled}
showThemeBtn={showThemeBtn} showThemeBtn={showThemeBtn}
onImageAction={onImageAction} onImageAction={onImageAction}
renderTopRightUI={renderTopRightUI} renderTopRightUI={renderTopRightUI}

10
src/components/MobileMenu.tsx
View File

@ -36,7 +36,6 @@ type MobileMenuProps = {
isMobile: boolean, isMobile: boolean,
appState: AppState, appState: AppState,
) => JSX.Element | null; ) => JSX.Element | null;
viewModeEnabled: boolean;
showThemeBtn: boolean; showThemeBtn: boolean;
onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void; onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
renderTopRightUI?: ( renderTopRightUI?: (
@ -60,7 +59,6 @@ export const MobileMenu = ({
canvas, canvas,
isCollaborating, isCollaborating,
renderCustomFooter, renderCustomFooter,
viewModeEnabled,
showThemeBtn, showThemeBtn,
onImageAction, onImageAction,
renderTopRightUI, renderTopRightUI,
@ -125,7 +123,7 @@ export const MobileMenu = ({
!appState.editingElement && !appState.editingElement &&
getSelectedElements(elements, appState).length === 0; getSelectedElements(elements, appState).length === 0;
if (viewModeEnabled) { if (appState.viewModeEnabled) {
return ( return (
<div className="App-toolbar-content"> <div className="App-toolbar-content">
{actionManager.renderAction("toggleCanvasMenu")} {actionManager.renderAction("toggleCanvasMenu")}
@ -151,7 +149,7 @@ export const MobileMenu = ({
}; };
const renderCanvasActions = () => { const renderCanvasActions = () => {
if (viewModeEnabled) { if (appState.viewModeEnabled) {
return ( return (
<> <>
{renderJSONExportDialog()} {renderJSONExportDialog()}
@ -185,7 +183,7 @@ export const MobileMenu = ({
}; };
return ( return (
<> <>
{!viewModeEnabled && renderToolbar()} {!appState.viewModeEnabled && renderToolbar()}
{renderStats()} {renderStats()}
<div <div
className="App-bottom-bar" className="App-bottom-bar"
@ -216,7 +214,7 @@ export const MobileMenu = ({
</div> </div>
</Section> </Section>
) : appState.openMenu === "shape" && ) : appState.openMenu === "shape" &&
!viewModeEnabled && !appState.viewModeEnabled &&
showSelectedShapeActions(appState, elements) ? ( showSelectedShapeActions(appState, elements) ? (
<Section className="App-mobile-menu" heading="selectedShapeActions"> <Section className="App-mobile-menu" heading="selectedShapeActions">
<SelectedShapeActions <SelectedShapeActions