3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-08 12:28:02 +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. * 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 {useLocation} from '@docusaurus/router';
import useLocationHash from '@theme/hooks/useLocationHash';
import useScrollPosition from '@theme/hooks/useScrollPosition'; import useScrollPosition from '@theme/hooks/useScrollPosition';
import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar'; import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => { const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
const [isNavbarVisible, setIsNavbarVisible] = useState(true); const location = useLocation();
const [isFocusedAnchor, setIsFocusedAnchor] = useState(false); const [isNavbarVisible, setIsNavbarVisible] = useState(!hideOnScroll);
const isFocusedAnchor = useRef(false);
const [lastScrollTop, setLastScrollTop] = useState(0); const [lastScrollTop, setLastScrollTop] = useState(0);
const [navbarHeight, setNavbarHeight] = useState(0); const [navbarHeight, setNavbarHeight] = useState(0);
const navbarRef = useCallback((node: HTMLElement | null) => { const navbarRef = useCallback((node: HTMLElement | null) => {
@ -21,8 +21,6 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
setNavbarHeight(node.getBoundingClientRect().height); setNavbarHeight(node.getBoundingClientRect().height);
} }
}, []); }, []);
const location = useLocation();
const [hash, setHash] = useLocationHash(location.hash);
useScrollPosition( useScrollPosition(
({scrollY: scrollTop}) => { ({scrollY: scrollTop}) => {
@ -30,21 +28,21 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
return; return;
} }
if (scrollTop === 0) {
setIsNavbarVisible(true);
}
if (scrollTop < navbarHeight) { if (scrollTop < navbarHeight) {
return; return;
} }
if (isFocusedAnchor) { if (isFocusedAnchor.current) {
setIsFocusedAnchor(false); isFocusedAnchor.current = false;
setIsNavbarVisible(false); setIsNavbarVisible(false);
setLastScrollTop(scrollTop); setLastScrollTop(scrollTop);
return; return;
} }
if (lastScrollTop && scrollTop === 0) {
setIsNavbarVisible(true);
}
const documentHeight = const documentHeight =
document.documentElement.scrollHeight - navbarHeight; document.documentElement.scrollHeight - navbarHeight;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
@ -57,7 +55,7 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
setLastScrollTop(scrollTop); setLastScrollTop(scrollTop);
}, },
[lastScrollTop, navbarHeight], [lastScrollTop, navbarHeight, isFocusedAnchor],
); );
useEffect(() => { useEffect(() => {
@ -65,22 +63,20 @@ const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
return; return;
} }
if (!lastScrollTop) {
return;
}
setIsNavbarVisible(true); setIsNavbarVisible(true);
setHash(location.hash); }, [location.pathname]);
}, [location]);
useEffect(() => { useEffect(() => {
if (!hideOnScroll) { if (!hideOnScroll) {
return; return;
} }
if (!hash) { isFocusedAnchor.current = true;
return; }, [location.hash]);
}
setIsFocusedAnchor(true);
setIsNavbarVisible(false);
}, [hash]);
return { return {
navbarRef, navbarRef,

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

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