fix: apply initialData appState for zenmode and grid stats and refactor check param for actions (#2871)

* fix: pass default value for grid mode / zen mode so it sets the value from initialData appState

fixes #2870

* change checked from boolean to be a function which recieves appState and returns boolean

* fix

* use clsx

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2021-01-29 23:38:37 +05:30 committed by GitHub
parent e8685c5236
commit 4624ec2bd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 18 deletions

View file

@ -1254,7 +1254,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
if (!event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z) {
this.toggleZenMode();
}
if (event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE) {
this.toggleGridMode();
}
@ -3663,6 +3662,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
top: clientY,
left: clientX,
actionManager: this.actionManager,
appState: this.state,
});
return;
}
@ -3709,6 +3709,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
top: clientY,
left: clientX,
actionManager: this.actionManager,
appState: this.state,
});
};

View file

@ -11,6 +11,7 @@ import {
} from "../actions/shortcuts";
import { Action } from "../actions/types";
import { ActionManager } from "../actions/manager";
import { AppState } from "../types";
type ContextMenuOption = "separator" | Action;
@ -20,6 +21,7 @@ type ContextMenuProps = {
top: number;
left: number;
actionManager: ActionManager;
appState: Readonly<AppState>;
};
const ContextMenu = ({
@ -28,11 +30,11 @@ const ContextMenu = ({
top,
left,
actionManager,
appState,
}: ContextMenuProps) => {
const isDarkTheme = !!document
.querySelector(".excalidraw")
?.classList.contains("Appearance_dark");
return (
<div
className={clsx("excalidraw", {
@ -61,9 +63,10 @@ const ContextMenu = ({
return (
<li key={idx} data-testid={actionName} onClick={onCloseRequest}>
<button
className={`context-menu-option
${actionName === "deleteSelectedElements" ? "dangerous" : ""}
${option.checked ? "checkmark" : ""}`}
className={clsx("context-menu-option", {
dangerous: actionName === "deleteSelectedElements",
checkmark: option.checked?.(appState),
})}
onClick={() => actionManager.executeAction(option)}
>
<div className="context-menu-option__label">{label}</div>
@ -97,6 +100,7 @@ type ContextMenuParams = {
top: ContextMenuProps["top"];
left: ContextMenuProps["left"];
actionManager: ContextMenuProps["actionManager"];
appState: Readonly<AppState>;
};
const handleClose = () => {
@ -119,6 +123,7 @@ export default {
options={options}
onCloseRequest={handleClose}
actionManager={params.actionManager}
appState={params.appState}
/>,
getContextMenuNode(),
);