fix bad sizing

This commit is contained in:
mrjvs 2023-03-12 19:07:37 +01:00
parent a520cf02bb
commit 80f7240f58
2 changed files with 31 additions and 33 deletions

View File

@ -3,7 +3,7 @@ import { FloatingCardMobilePosition } from "@/components/popout/positions/Floati
import { useIsMobile } from "@/hooks/useIsMobile";
import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
import { useSpringValue, animated, easings } from "@react-spring/web";
import { ReactNode, useCallback, useEffect, useRef } from "react";
import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { Icon, Icons } from "../Icon";
import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
@ -26,12 +26,15 @@ function CardBase(props: { children: ReactNode }) {
const width = useSpringValue(0, {
config: { easing: easings.easeInOutSine, duration: 300 },
});
const [pages, setPages] = useState<NodeListOf<Element> | null>(null);
const getNewHeight = useCallback(() => {
const getNewHeight = useCallback(
(updateList = true) => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
if (updateList) setPages(children);
if (children.length === 0) {
height.start(0);
width.start(0);
@ -39,14 +42,17 @@ function CardBase(props: { children: ReactNode }) {
}
const lastChild = children[children.length - 1];
const rect = lastChild.getBoundingClientRect();
const rectHeight = lastChild.scrollHeight;
if (height.get() === 0) {
height.set(rect.height);
height.set(rectHeight);
width.set(rect.width);
} else {
height.start(rect.height);
height.start(rectHeight);
width.start(rect.width);
}
}, [height, width]);
},
[height, width]
);
useEffect(() => {
if (!ref.current) return;
@ -65,22 +71,14 @@ function CardBase(props: { children: ReactNode }) {
}, [getNewHeight]);
useEffect(() => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
const observer = new ResizeObserver(() => {
getNewHeight();
});
observer.observe(ref.current, {
attributes: false,
childList: true,
subtree: false,
getNewHeight(false);
});
pages?.forEach((el) => observer.observe(el));
return () => {
observer.disconnect();
};
}, [getNewHeight]);
}, [pages, getNewHeight]);
return (
<animated.div

View File

@ -6,7 +6,7 @@ export function FloatingDragHandle() {
if (!isMobile) return null;
return (
<div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
<div className="mx-auto my-3 -mb-3 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
);
}