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: Apply theme to only to active excalidraw component (#3446)

Browse source 
* feat: Apply theme to only current instance of excalidraw

* fix

* fix

* fix

* fix

* fix

* update changelog

* fix
This commit is contained in:
Aakansha Doshi 2021-04-13 23:02:57 +05:30 • committed by GitHub
parent e0a449aa40
commit 793b69e592
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/Modal.tsx
View file

@ -4,7 +4,8 @@ import React, { useState, useLayoutEffect, useRef } from "react";
import { createPortal } from "react-dom";
import clsx from "clsx";
import { KEYS } from "../keys";
import { useIsMobile } from "../components/App";
import { useExcalidrawContainer, useIsMobile } from "./App";
import { AppState } from "../types";
export const Modal = (props: {
className?: string;
@ -12,8 +13,10 @@ export const Modal = (props: {
maxWidth?: number;
onCloseRequest(): void;
labelledBy: string;
theme?: AppState["theme"];
}) => {
const modalRoot = useBodyRoot();
const { theme = "light" } = props;
const modalRoot = useBodyRoot(theme);
if (!modalRoot) {
return null;
@ -48,13 +51,15 @@ export const Modal = (props: {
);
};
const useBodyRoot = () => {
const useBodyRoot = (theme: AppState["theme"]) => {
const [div, setDiv] = useState<HTMLDivElement | null>(null);
const isMobile = useIsMobile();
const isMobileRef = useRef(isMobile);
isMobileRef.current = isMobile;
const excalidrawContainer = useExcalidrawContainer();
useLayoutEffect(() => {
if (div) {
div.classList.toggle("excalidraw--mobile", isMobile);
@ -62,9 +67,9 @@ const useBodyRoot = () => {
}, [div, isMobile]);
useLayoutEffect(() => {
const isDarkTheme = !!document
.querySelector(".excalidraw")
?.classList.contains("theme--dark");
const isDarkTheme =
!!excalidrawContainer?.classList.contains("theme--dark") ||
theme === "dark";
const div = document.createElement("div");
div.classList.add("excalidraw", "excalidraw-modal-container");
@ -81,7 +86,7 @@ const useBodyRoot = () => {
return () => {
document.body.removeChild(div);
};
}, []);
}, [excalidrawContainer, theme]);
return div;
};