Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Safe area provider

Browse Source
This commit is contained in:
Max Lynch
2020-12-22 13:15:15 -06:00
parent fc7b7649d3
commit 36b3fb8de0
4 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal.jsx
+5 -2
View File
@@ -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);
components/SafeArea.jsx
+30
View File
@@ -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>
);
};
pages/_app.js
-18
View File
@@ -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>
pages/index.js
+17 -14
View File
@@ -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,20 +136,22 @@ export default function Index() {
//
return (
<App>
<Menu open={showMenu} onClose={closeMenu}>
<MenuContent />
</Menu>
<Nav page={page} />
<CurrentPage page={page} />
<TabBar>
{pages.map(p => (
<Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
))}
</TabBar>
<Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
<Modal open={showNotifications} onClose={closeNotifications}>
<NotificationsContent />
</Modal>
<SafeAreaProvider>
<Menu open={showMenu} onClose={closeMenu}>
<MenuContent />
</Menu>
<Nav page={page} />
<CurrentPage page={page} />
<TabBar>
{pages.map(p => (
<Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
))}
</TabBar>
<Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
<Modal open={showNotifications} onClose={closeNotifications}>
<NotificationsContent />
</Modal>
</SafeAreaProvider>
</App>
);
}