Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve selected section logic for edge cases

Browse source
This commit is contained in:
Timothy Z. 2026-03-04 20:48:01 +02:00
parent df69e6eb18
commit 3d119db049
1 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/Settings/Settings.tsx
View file

@ -41,13 +41,27 @@ const Settings = () => {
const updateSelectedSectionId = useCallback(() => { const updateSelectedSectionId = useCallback(() => {
const container = sectionsContainerRef.current; const container = sectionsContainerRef.current;
for (const section of sections) { if (!container) return;
const sectionContainer = section.ref.current;
if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) { const availableSections = sections.filter((section) => section.ref.current);
setSelectedSectionId(section.id); if (!availableSections.length) return;
const { scrollTop, clientHeight, scrollHeight, offsetTop } = container;
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
if (isAtBottom) {
setSelectedSectionId(availableSections[availableSections.length - 1].id);
return;
} }
}
}, []); const marker = scrollTop + 50;
const activeSection = availableSections.reduce((current, section) => {
const sectionTop = section.ref.current!.offsetTop + offsetTop;
return sectionTop <= marker ? section : current;
}, availableSections[0]);
setSelectedSectionId(activeSection.id);
}, [sections]);
const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => { const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
const section = sections.find((section) => { const section = sections.find((section) => {
@ -55,11 +69,11 @@ const Settings = () => {
}); });
const container = sectionsContainerRef.current; const container = sectionsContainerRef.current;
section && container!.scrollTo({ section && container?.scrollTo({
top: section.ref.current!.offsetTop - container!.offsetTop, top: section.ref.current!.offsetTop - container!.offsetTop,
behavior: 'smooth' behavior: 'smooth'
}); });
}, []); }, [sections]);
const onContainerScroll = useCallback(throttle(() => { const onContainerScroll = useCallback(throttle(() => {
updateSelectedSectionId(); updateSelectedSectionId();