Safe area provider

2020-12-22 13:15:15 -06:00
parent fc7b7649d3
commit 36b3fb8de0
4 changed files with 52 additions and 34 deletions
@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 import Store from '../store';
+import { SafeAreaContext } from './SafeArea';

 const Modal = ({ open, onClose, children }) => {
  const ref = useRef();
@@ -9,7 +10,9 @@ const Modal = ({ open, onClose, children }) => {
  const [rect, setRect] = useState(null);
  const [y, setY] = useState(100000);

-  const safeAreaTop = Store.useState(s => s.safeAreaTop);
+  const { top } = useContext(SafeAreaContext);
+
+  const safeAreaTop = top;

  const _open = useCallback(() => {
    console.log('Opening modal!', safeAreaTop);
@@ -0,0 +1,30 @@
+import { createContext, useEffect, useState } from 'react';
+
+export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
+
+export const SafeAreaProvider = ({ children }) => {
+  const [safeAreaTop, setSafeAreaTop] = useState(0);
+  const [safeAreaBottom, setSafeAreaBottom] = useState(0);
+
+  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');
+
+      setSafeAreaTop(safeAreaTop);
+      setSafeAreaBottom(safeAreaBottom);
+    }, 500);
+  }, []);
+
+  return (
+    <SafeAreaContext.Provider value={{ top: safeAreaTop, bottom: safeAreaBottom }}>
+      {children}
+    </SafeAreaContext.Provider>
+  );
+};
@@ -7,24 +7,6 @@ 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>
@@ -16,6 +16,7 @@ import List from '../components/List';
 import ListItem from '../components/ListItem';
 import { useState } from 'react';
 import Button from '../components/Button';
+import { SafeAreaProvider } from '../components/SafeArea';

 const pages = [
  { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },
@@ -135,6 +136,7 @@ export default function Index() {
  //
  return (
    <App>
+      <SafeAreaProvider>
        <Menu open={showMenu} onClose={closeMenu}>
          <MenuContent />
        </Menu>
@@ -149,6 +151,7 @@ export default function Index() {
        <Modal open={showNotifications} onClose={closeNotifications}>
          <NotificationsContent />
        </Modal>
+      </SafeAreaProvider>
    </App>
  );
 }