Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Move Dialog with resize/zoom events

Browse source
This commit is contained in:
Adam Gastineau 2024-12-13 06:31:55 -08:00
parent a581a6b133
commit a8363ab53f
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/trace-viewer/src/ui/shared/dialog.tsx
View file

@ -37,6 +37,10 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
}) => {
const dialogRef = React.useRef<HTMLDialogElement>(null);
// Allow window dimension changes to force a rerender
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setRecalculateDimensionsCount] = React.useState(0);
let style: React.CSSProperties | undefined = undefined;
if (hostingElement?.current) {
@ -83,14 +87,19 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
return () => {};
}, [open, requestClose]);
React.useEffect(() => {
const onResize = () => setRecalculateDimensionsCount(count => count + 1);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
};
}, []);
return (
open && (
<dialog
ref={dialogRef}
style={style}
className={className}
open
>
<dialog ref={dialogRef} style={style} className={className} open>
{children}
</dialog>
)