selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 20:59:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix scroll to bottom

Browse Source
This commit is contained in:
Sara
2023-09-22 16:52:38 +02:00
parent 4be328b5a2
commit 2cc98314d2
3 changed files with 72 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
www/app/transcripts/topicList.tsx
View File

@@ -22,8 +22,7 @@ export function TopicList({ topics, useActiveTopic }: TopicListProps) {
useEffect(() => {
if (autoscrollEnabled) scrollToBottom();
console.log(topics);
}, [topics.length]);
}, [topics]);
const scrollToBottom = () => {
const topicsDiv = document.getElementById("topics-div");
@@ -33,15 +32,28 @@ export function TopicList({ topics, useActiveTopic }: TopicListProps) {
else topicsDiv.scrollTop = topicsDiv.scrollHeight;
};
const handleScroll = (e) => {
// scroll top is not rounded, heights are, so exact match won't work.
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
const toggleScroll = (element) => {
const bottom =
e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
Math.abs(
element.scrollHeight - element.clientHeight - element.scrollTop,
) < 2 || element.scrollHeight == element.clientHeight;
if (!bottom && autoscrollEnabled) {
setAutoscrollEnabled(false);
} else if (bottom && !autoscrollEnabled) {
setAutoscrollEnabled(true);
}
};
const handleScroll = (e) => {
toggleScroll(e.target);
};
useEffect(() => {
const topicsDiv = document.getElementById("topics-div");
topicsDiv && toggleScroll(topicsDiv);
}, [activeTopic]);
return (
<section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
@@ -60,7 +72,7 @@ export function TopicList({ topics, useActiveTopic }: TopicListProps) {
{topics.map((topic, index) => (
<button
key={index}
className="rounded-none border-solid border-0 border-b-blue-300 border-b last:border-none p-2 hover:bg-blue-400/20 focus-visible:bg-blue-400/20 text-left block w-full"
className="rounded-none border-solid border-0 border-b-blue-300 border-b last:border-none last:rounded-b-lg p-2 hover:bg-blue-400/20 focus-visible:bg-blue-400/20 text-left block w-full"
onClick={() =>
setActiveTopic(activeTopic?.id == topic.id ? null : topic)
}