mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 13:05:48 +00:00
improve selected section logic for edge cases
This commit is contained in:
parent
df69e6eb18
commit
3d119db049
1 changed files with 22 additions and 8 deletions
|
|
@ -41,13 +41,27 @@ const Settings = () => {
|
|||
|
||||
const updateSelectedSectionId = useCallback(() => {
|
||||
const container = sectionsContainerRef.current;
|
||||
for (const section of sections) {
|
||||
const sectionContainer = section.ref.current;
|
||||
if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) {
|
||||
setSelectedSectionId(section.id);
|
||||
}
|
||||
if (!container) return;
|
||||
|
||||
const availableSections = sections.filter((section) => section.ref.current);
|
||||
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 section = sections.find((section) => {
|
||||
|
|
@ -55,11 +69,11 @@ const Settings = () => {
|
|||
});
|
||||
|
||||
const container = sectionsContainerRef.current;
|
||||
section && container!.scrollTo({
|
||||
section && container?.scrollTo({
|
||||
top: section.ref.current!.offsetTop - container!.offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, []);
|
||||
}, [sections]);
|
||||
|
||||
const onContainerScroll = useCallback(throttle(() => {
|
||||
updateSelectedSectionId();
|
||||
|
|
|
|||
Loading…
Reference in a new issue