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

Safe area

Browse Source
This commit is contained in:
Max Lynch
2020-12-22 13:02:06 -06:00
parent 9a37a9f7db
commit fc7b7649d3
5 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal.jsx
+6 -10
View File
@@ -1,15 +1,18 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useDrag } from 'react-use-gesture'; import { useDrag } from 'react-use-gesture';
import Store from '../store';
const Modal = ({ open, onClose, children }) => { const Modal = ({ open, onClose, children }) => {
const ref = useRef(); const ref = useRef();
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
const [rect, setRect] = useState(null); const [rect, setRect] = useState(null);
const [y, setY] = useState(100000); const [y, setY] = useState(100000);
const [safeAreaTop, setSafeAreaTop] = useState(0);
const safeAreaTop = Store.useState(s => s.safeAreaTop);
const _open = useCallback(() => { const _open = useCallback(() => {
console.log('Opening modal!', safeAreaTop);
setY(safeAreaTop); setY(safeAreaTop);
}, [safeAreaTop]); }, [safeAreaTop]);
@@ -20,20 +23,12 @@ const Modal = ({ open, onClose, children }) => {
setY(rect.height + safeAreaTop); setY(rect.height + safeAreaTop);
}, [safeAreaTop, rect]); }, [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 // Get the layout rectangle for the modal
useLayoutEffect(() => { useLayoutEffect(() => {
const rect = ref.current?.getBoundingClientRect(); const rect = ref.current?.getBoundingClientRect();
setRect(rect); setRect(rect);
_close(); _close();
}, []); }, [safeAreaTop]);
// If open changes, open/close the modal // If open changes, open/close the modal
useLayoutEffect(() => { useLayoutEffect(() => {
@@ -83,6 +78,7 @@ const Modal = ({ open, onClose, children }) => {
} }
)} )}
style={{ style={{
'--safe-area-top': `env(safe-area-inset-top, 0px)`,
height: `calc(100% - env(safe-area-inset-top, 0px) - 1.25rem)`, height: `calc(100% - env(safe-area-inset-top, 0px) - 1.25rem)`,
touchAction: 'pan-y', touchAction: 'pan-y',
transform: `translateY(${y}px)`, transform: `translateY(${y}px)`,
pages/_app.js
+20
View File
@@ -1,10 +1,30 @@
import Head from 'next/head'; import Head from 'next/head';
import { useEffect } from 'react';
import 'tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css';
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
-2
View File
@@ -1,7 +1,5 @@
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import { faces } from '../data';
import Store from '../store'; import Store from '../store';
import App from '../components/App'; import App from '../components/App';
store/index.js
+2
View File
@@ -1,6 +1,8 @@
import { Store as PullStateStore } from 'pullstate'; import { Store as PullStateStore } from 'pullstate';
const Store = new PullStateStore({ const Store = new PullStateStore({
safeAreaTop: 0,
safeAreaBottom: 0,
showMenu: false, showMenu: false,
showNotifications: false, showNotifications: false,
}); });
styles/global.css
+1 -1
View File
@@ -1,5 +1,5 @@
:root { :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); --safe-area-bottom: env(safe-area-inset-bottom, 0);
} }
body { body {