From fc7b7649d3cddda4fb682aaa71839b6d0268268c Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 22 Dec 2020 13:02:06 -0600 Subject: [PATCH] Safe area --- components/Modal.jsx | 16 ++++++---------- pages/_app.js | 20 ++++++++++++++++++++ pages/index.js | 2 -- store/index.js | 2 ++ styles/global.css | 2 +- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/components/Modal.jsx b/components/Modal.jsx index c0bdf8a..5eecdae 100644 --- a/components/Modal.jsx +++ b/components/Modal.jsx @@ -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)`, diff --git a/pages/_app.js b/pages/_app.js index 43ca2a2..db67042 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -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 ( <> diff --git a/pages/index.js b/pages/index.js index c69d491..1d96770 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,5 @@ import { Virtuoso } from 'react-virtuoso'; -import { faces } from '../data'; - import Store from '../store'; import App from '../components/App'; diff --git a/store/index.js b/store/index.js index ce3b2fe..07236a9 100644 --- a/store/index.js +++ b/store/index.js @@ -1,6 +1,8 @@ import { Store as PullStateStore } from 'pullstate'; const Store = new PullStateStore({ + safeAreaTop: 0, + safeAreaBottom: 0, showMenu: false, showNotifications: false, }); diff --git a/styles/global.css b/styles/global.css index 6545650..e757de5 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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 {