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

feat: use component dimensions to break to mobile (#3414)

Browse source 
Co-authored-by: Jed Fox <git@jedfox.com>
This commit is contained in:
David Luzar 2021-04-08 19:54:50 +02:00 • committed by GitHub
parent 016e69b9f2
commit 09dfd16b17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 162 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/Modal.tsx
View file

@ -1,9 +1,10 @@
import "./Modal.scss";
import React, { useState, useLayoutEffect } from "react";
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";
export const Modal = (props: {
className?: string;
@ -48,6 +49,16 @@ export const Modal = (props: {
const useBodyRoot = () => {
const [div, setDiv] = useState<HTMLDivElement | null>(null);
const isMobile = useIsMobile();
const isMobileRef = useRef(isMobile);
isMobileRef.current = isMobile;
useLayoutEffect(() => {
if (div) {
div.classList.toggle("excalidraw--mobile", isMobile);
}
}, [div, isMobile]);
useLayoutEffect(() => {
const isDarkTheme = !!document
.querySelector(".excalidraw")
@ -55,6 +66,7 @@ const useBodyRoot = () => {
const div = document.createElement("div");
div.classList.add("excalidraw", "excalidraw-modal-container");
div.classList.toggle("excalidraw--mobile", isMobileRef.current);
if (isDarkTheme) {
div.classList.add("theme--dark");