yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Positioning of editing toolbar on mobile devices (#6279)

Browse Source
This commit is contained in:
Tom Moor
2023-12-13 19:22:06 -05:00
committed by GitHub
parent 04d4cb6d52
commit 53ff144f00
13 changed files with 121 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/hooks/useEventListener.ts
View File

@@ -12,7 +12,7 @@ import * as React from "react";
export default function useEventListener<T extends EventListener>(
eventName: string,
handler: T,
element: Window | Node = window,
element: Window | VisualViewport | Node | null = window,
options: AddEventListenerOptions = {}
) {
const savedHandler = React.useRef<T>();

15
app/hooks/useWindowSize.ts
View File

@@ -10,24 +10,25 @@ import useThrottledCallback from "./useThrottledCallback";
*/
export default function useWindowSize() {
const [windowSize, setWindowSize] = React.useState({
width: window.innerWidth,
height: window.innerHeight,
width: window.visualViewport?.width || window.innerWidth,
height: window.visualViewport?.height || window.innerHeight,
});
const handleResize = useThrottledCallback(() => {
const width = window.visualViewport?.width || window.innerWidth;
const height = window.visualViewport?.height || window.innerHeight;
setWindowSize((state) => {
if (
window.innerWidth === state.width &&
window.innerHeight === state.height
) {
if (width === state.width && height === state.height) {
return state;
}
return { width: window.innerWidth, height: window.innerHeight };
return { width, height };
});
}, 100);
useEventListener("resize", handleResize);
useEventListener("resize", handleResize, window.visualViewport);
// Call handler right away so state gets updated with initial window size
React.useEffect(() => {