Fix scrolling to center if the element is on the low end of the thingy

This commit is contained in:
Jip Fr 2023-02-09 12:56:16 +01:00
parent 6d24e8aa81
commit 0193e8f0c8

View File

@ -13,10 +13,17 @@ interface PopoutListEntryTypes {
errored?: boolean;
}
export function PopoutSection(props: {
interface ScrollToActiveProps {
children: React.ReactNode;
className?: string;
}
interface PopoutSectionProps {
children?: React.ReactNode;
className?: string;
}) {
}
export function ScrollToActive(props: ScrollToActiveProps) {
const ref = createRef<HTMLDivElement>();
const inited = useRef<boolean>(false);
@ -43,10 +50,14 @@ export function PopoutSection(props: {
inline: "nearest",
});
const activeYPositionCentered =
active.getBoundingClientRect().top -
wrapper.getBoundingClientRect().top +
active.offsetHeight / 2;
let activeYPositionCentered = 0;
const setActiveYPositionCentered = () => {
activeYPositionCentered =
active.getBoundingClientRect().top -
wrapper.getBoundingClientRect().top +
active.offsetHeight / 2;
};
setActiveYPositionCentered();
if (activeYPositionCentered >= wrapper.offsetHeight / 2) {
// Check if the active element is below the vertical center line, then scroll it into center
@ -54,17 +65,33 @@ export function PopoutSection(props: {
top: activeYPositionCentered - wrapper.offsetHeight / 2,
});
}
setActiveYPositionCentered();
if (activeYPositionCentered > wrapper.offsetHeight / 2) {
// If the element is over the vertical center line, scroll to the end
wrapper.scrollTo({
top: wrapper.scrollHeight,
});
}
}
inited.current = true;
}, [ref]);
return (
<div className={["p-5", props.className || ""].join(" ")} ref={ref}>
<div className={props.className} ref={ref}>
{props.children}
</div>
);
}
export function PopoutSection(props: PopoutSectionProps) {
return (
<ScrollToActive className={["p-5", props.className || ""].join(" ")}>
{props.children}
</ScrollToActive>
);
}
export function PopoutListEntry(props: PopoutListEntryTypes) {
const bg = props.isOnDarkBackground ? "bg-ash-200" : "bg-ash-400";
const hover = props.isOnDarkBackground