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 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 { useDrag } from 'react-use-gesture';
import Store from '../store'; import Store from '../store';
import { SafeAreaContext } from './SafeArea';
const Modal = ({ open, onClose, children }) => { const Modal = ({ open, onClose, children }) => {
const ref = useRef(); const ref = useRef();
@@ -9,7 +10,9 @@ const Modal = ({ open, onClose, children }) => {
const [rect, setRect] = useState(null); const [rect, setRect] = useState(null);
const [y, setY] = useState(100000); const [y, setY] = useState(100000);
const safeAreaTop = Store.useState(s => s.safeAreaTop); const { top } = useContext(SafeAreaContext);
const safeAreaTop = top;
const _open = useCallback(() => { const _open = useCallback(() => {
console.log('Opening modal!', safeAreaTop); 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'; import '../styles/global.css';
function MyApp({ Component, pageProps }) { 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 ( return (
<> <>
<Head> <Head>
pages/index.js
+17 -14
View File
@@ -16,6 +16,7 @@ import List from '../components/List';
import ListItem from '../components/ListItem'; import ListItem from '../components/ListItem';
import { useState } from 'react'; import { useState } from 'react';
import Button from '../components/Button'; import Button from '../components/Button';
import { SafeAreaProvider } from '../components/SafeArea';
const pages = [ const pages = [
{ id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home }, { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },
@@ -135,20 +136,22 @@ export default function Index() {
// //
return ( return (
<App> <App>
<Menu open={showMenu} onClose={closeMenu}> <SafeAreaProvider>
<MenuContent /> <Menu open={showMenu} onClose={closeMenu}>
</Menu> <MenuContent />
<Nav page={page} /> </Menu>
<CurrentPage page={page} /> <Nav page={page} />
<TabBar> <CurrentPage page={page} />
{pages.map(p => ( <TabBar>
<Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} /> {pages.map(p => (
))} <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
</TabBar> ))}
<Backdrop open={showMenu || showNotifications} onClose={backdropClose} /> </TabBar>
<Modal open={showNotifications} onClose={closeNotifications}> <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
<NotificationsContent /> <Modal open={showNotifications} onClose={closeNotifications}>
</Modal> <NotificationsContent />
</Modal>
</SafeAreaProvider>
</App> </App>
); );
} }