Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Smooth scrolling of sections

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-18 16:40:02 +03:00
parent 90050cf982
commit e5bad11b48
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
1 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/routes/Settings/Settings.js
View file

@ -45,19 +45,19 @@ const Settings = () => {
React.useEffect(() => {
const theSections = settingsData.map(({ section }) => section)
.filter((section, index, sections) => sections.indexOf(section) === index)
.sort(function(a, b) {
const valueA = SECTIONS_ORDER[a];
const valueB = SECTIONS_ORDER[b];
if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB;
if (!isNaN(valueA)) return -1;
if (!isNaN(valueB)) return 1;
return a - b;
})
.map((section) => ({
id: section,
ref: React.createRef()
}));
.filter((section, index, sections) => sections.indexOf(section) === index)
.sort(function(a, b) {
const valueA = SECTIONS_ORDER[a];
const valueB = SECTIONS_ORDER[b];
if (!isNaN(valueA) && !isNaN(valueB)) return valueA - valueB;
if (!isNaN(valueA)) return -1;
if (!isNaN(valueB)) return 1;
return a - b;
})
.map((section) => ({
id: section,
ref: React.createRef()
}));
setSections(theSections);
if (theSections.length > 0 && (selectedSectionId === null || !theSections.find(({ id }) => id === selectedSectionId))) {
@ -90,11 +90,12 @@ const Settings = () => {
}
const changeSection = (event) => {
const currentSectionId = event.currentTarget.dataset.section
const currentSectionId = event.currentTarget.dataset.section;
const section = sections.find((section) => section.id === currentSectionId);
setSelectedSectionId(currentSectionId)
scrollContainerRef.current.scrollTo({
top: section.ref.current.offsetTop
top: section.ref.current.offsetTop,
behavior: 'smooth'
});
}