Safe area

2020-12-22 13:02:06 -06:00
parent 9a37a9f7db
commit fc7b7649d3
5 changed files with 29 additions and 13 deletions
@@ -1,15 +1,18 @@
 import classNames from 'classnames';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
+import Store from '../store';

 const Modal = ({ open, onClose, children }) => {
  const ref = useRef();
  const [dragging, setDragging] = useState(false);
  const [rect, setRect] = useState(null);
  const [y, setY] = useState(100000);
-  const [safeAreaTop, setSafeAreaTop] = useState(0);
+
+  const safeAreaTop = Store.useState(s => s.safeAreaTop);

  const _open = useCallback(() => {
+    console.log('Opening modal!', safeAreaTop);
    setY(safeAreaTop);
  }, [safeAreaTop]);

@@ -20,20 +23,12 @@ const Modal = ({ open, onClose, children }) => {
    setY(rect.height + safeAreaTop);
  }, [safeAreaTop, rect]);

-  // Get pixel value of safe area insets
-  useEffect(() => {
-    const safeAreaTop = parseInt(
-      getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
-    );
-    setSafeAreaTop(safeAreaTop);
-  }, []);
-
  // Get the layout rectangle for the modal
  useLayoutEffect(() => {
    const rect = ref.current?.getBoundingClientRect();
    setRect(rect);
    _close();
-  }, []);
+  }, [safeAreaTop]);

  // If open changes, open/close the modal
  useLayoutEffect(() => {
@@ -83,6 +78,7 @@ const Modal = ({ open, onClose, children }) => {
        }
      )}
      style={{
+        '--safe-area-top': `env(safe-area-inset-top, 0px)`,
        height: `calc(100% - env(safe-area-inset-top, 0px) - 1.25rem)`,
        touchAction: 'pan-y',
        transform: `translateY(${y}px)`,
@@ -1,10 +1,30 @@
 import Head from 'next/head';
+import { useEffect } from 'react';

 import 'tailwindcss/tailwind.css';
+import Store from '../store';

 import '../styles/global.css';

 function MyApp({ Component, pageProps }) {
+  useEffect(() => {
+    // I don't know why, but we can't get the value of this CSS variable
+    // until a bit of a delay, maybe something with Next?
+    setTimeout(() => {
+      const safeAreaTop = parseInt(
+        window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
+      );
+      const safeAreaBottom = window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue('--safe-area-bottom');
+
+      Store.update(s => {
+        s.safeAreaTop = safeAreaTop;
+        s.safeAreaBottom = safeAreaBottom;
+      });
+    }, 500);
+  }, []);
+
  return (
    <>
      <Head>
@@ -1,7 +1,5 @@
 import { Virtuoso } from 'react-virtuoso';

-import { faces } from '../data';
-
 import Store from '../store';

 import App from '../components/App';
@@ -1,6 +1,8 @@
 import { Store as PullStateStore } from 'pullstate';

 const Store = new PullStateStore({
+  safeAreaTop: 0,
+  safeAreaBottom: 0,
  showMenu: false,
  showNotifications: false,
 });
@@ -1,5 +1,5 @@
 :root {
-  --safe-area-top: env(safe-area-inset-top, 0);
+  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom, 0);
 }
 body {