smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: remove legacy React.render() from the editor (#5893)

Browse source
This commit is contained in:
David Luzar 2022-11-19 18:27:54 +01:00 • committed by GitHub
parent 96a5d6548b
commit 8ed0fc2c87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/ContextMenu.tsx
View file

@ -1,4 +1,4 @@
import { render, unmountComponentAtNode } from "react-dom";
import { createRoot, Root } from "react-dom/client";
import clsx from "clsx";
import { Popover } from "./Popover";
import { t } from "../i18n";
@ -89,42 +89,38 @@ const ContextMenu = ({
);
};
const contextMenuNodeByContainer = new WeakMap<HTMLElement, HTMLDivElement>();
const contextMenuRoots = new WeakMap<HTMLElement, Root>();
const getContextMenuNode = (container: HTMLElement): HTMLDivElement => {
let contextMenuNode = contextMenuNodeByContainer.get(container);
if (contextMenuNode) {
return contextMenuNode;
const getContextMenuRoot = (container: HTMLElement): Root => {
let contextMenuRoot = contextMenuRoots.get(container);
if (contextMenuRoot) {
return contextMenuRoot;
}
contextMenuNode = document.createElement("div");
container
.querySelector(".excalidraw-contextMenuContainer")!
.appendChild(contextMenuNode);
contextMenuNodeByContainer.set(container, contextMenuNode);
return contextMenuNode;
};
type ContextMenuParams = {
options: (ContextMenuOption | false | null | undefined)[];
top: ContextMenuProps["top"];
left: ContextMenuProps["left"];
actionManager: ContextMenuProps["actionManager"];
appState: Readonly<AppState>;
container: HTMLElement;
elements: readonly NonDeletedExcalidrawElement[];
contextMenuRoot = createRoot(
container.querySelector(".excalidraw-contextMenuContainer")!,
);
contextMenuRoots.set(container, contextMenuRoot);
return contextMenuRoot;
};
const handleClose = (container: HTMLElement) => {
const contextMenuNode = contextMenuNodeByContainer.get(container);
if (contextMenuNode) {
unmountComponentAtNode(contextMenuNode);
contextMenuNode.remove();
contextMenuNodeByContainer.delete(container);
const contextMenuRoot = contextMenuRoots.get(container);
if (contextMenuRoot) {
contextMenuRoot.unmount();
contextMenuRoots.delete(container);
}
};
export default {
push(params: ContextMenuParams) {
push(params: {
options: (ContextMenuOption | false | null | undefined)[];
top: ContextMenuProps["top"];
left: ContextMenuProps["left"];
actionManager: ContextMenuProps["actionManager"];
appState: Readonly<AppState>;
container: HTMLElement;
elements: readonly NonDeletedExcalidrawElement[];
}) {
const options = Array.of<ContextMenuOption>();
params.options.forEach((option) => {
if (option) {
@ -132,7 +128,7 @@ export default {
}
});
if (options.length) {
render(
getContextMenuRoot(params.container).render(
<ContextMenu
top={params.top}
left={params.left}
@ -142,7 +138,6 @@ export default {
appState={params.appState}
elements={params.elements}
/>,
getContextMenuNode(params.container),
);
}
},