3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-08 20:37:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): increase stability of hideable navbar (#3733)

Browse source 
* fix

* fix(v2): increase stability of hideable navbar

* Fix bug after reload

* Remove state for hash
This commit is contained in:
Alexey Pyltsyn 2020-11-18 18:17:04 +03:00 • committed by GitHub
parent abcd8cefd6
commit 61fd53f7c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

40
packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts
View file

@ -5,15 +5,15 @@
* LICENSE file in the root directory of this source tree.
*/
import {useState, useCallback, useEffect} from 'react';
import {useState, useCallback, useEffect, useRef} from 'react';
import {useLocation} from '@docusaurus/router';
import useLocationHash from '@theme/hooks/useLocationHash';
import useScrollPosition from '@theme/hooks/useScrollPosition';
import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
const [isNavbarVisible, setIsNavbarVisible] = useState(true);
const [isFocusedAnchor, setIsFocusedAnchor] = useState(false);
const location = useLocation();
const [isNavbarVisible, setIsNavbarVisible] = useState(!hideOnScroll);
const isFocusedAnchor = useRef(false);
const [lastScrollTop, setLastScrollTop] = useState(0);
const [navbarHeight, setNavbarHeight] = useState(0);
const navbarRef = useCallback((node: HTMLElement | null) => {
@ -21,8 +21,6 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
setNavbarHeight(node.getBoundingClientRect().height);
}
}, []);
const location = useLocation();
const [hash, setHash] = useLocationHash(location.hash);
useScrollPosition(
({scrollY: scrollTop}) => {
@ -30,21 +28,21 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
return;
}
if (scrollTop === 0) {
setIsNavbarVisible(true);
}
if (scrollTop < navbarHeight) {
return;
}
if (isFocusedAnchor) {
setIsFocusedAnchor(false);
if (isFocusedAnchor.current) {
isFocusedAnchor.current = false;
setIsNavbarVisible(false);
setLastScrollTop(scrollTop);
return;
}
if (lastScrollTop && scrollTop === 0) {
setIsNavbarVisible(true);
}
const documentHeight =
document.documentElement.scrollHeight - navbarHeight;
const windowHeight = window.innerHeight;
@ -57,7 +55,7 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
setLastScrollTop(scrollTop);
},
[lastScrollTop, navbarHeight],
[lastScrollTop, navbarHeight, isFocusedAnchor],
);
useEffect(() => {
@ -65,22 +63,20 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
return;
}
if (!lastScrollTop) {
return;
}
setIsNavbarVisible(true);
setHash(location.hash);
}, [location]);
}, [location.pathname]);
useEffect(() => {
if (!hideOnScroll) {
return;
}
if (!hash) {
return;
}
setIsFocusedAnchor(true);
setIsNavbarVisible(false);
}, [hash]);
isFocusedAnchor.current = true;
}, [location.hash]);
return {
navbarRef,

12
packages/docusaurus-theme-classic/src/theme/hooks/useScrollPosition.ts
View file

@ -31,13 +31,13 @@ const useScrollPosition = (
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () =>
window.removeEventListener('scroll', handleScroll, {
// @ts-expect-error: See https://github.com/microsoft/TypeScript/issues/32912
const opts: AddEventListenerOptions & EventListenerOptions = {
passive: true,
});
};
window.addEventListener('scroll', handleScroll, opts);
return () => window.removeEventListener('scroll', handleScroll, opts);
}, deps);
return scrollPosition;