From 5e5f1ac2456b2b92a3ef5b499642874ed8c51708 Mon Sep 17 00:00:00 2001 From: misaka3 Date: Sun, 4 Apr 2021 22:49:36 +0900 Subject: [PATCH 1/2] Fix docs drawer when clicking. --- docs/src/modules/components/AppNavDrawer.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 267ab9512ec5be..8cf065f1afed31 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -22,7 +22,7 @@ function PersistScroll(props) { const { children, enabled } = props; const rootRef = React.useRef(); - React.useEffect(() => { + React.useLayoutEffect(() => { const parent = rootRef.current ? rootRef.current.parentElement : null; const activeElement = parent.querySelector('.app-drawer-active'); @@ -30,13 +30,12 @@ function PersistScroll(props) { return undefined; } + parent.scrollTop = savedScrollTop; + const activeBox = activeElement.getBoundingClientRect(); - if (savedScrollTop === null || activeBox.top - savedScrollTop < 0) { - // Center the selected item in the list container. - activeElement.scrollIntoView(); - } else { - parent.scrollTop = savedScrollTop; + if (activeBox.top < 0 || activeBox.top > window.innerHeight) { + parent.scrollTop += activeBox.top - 8 - 32; } return () => { @@ -200,10 +199,10 @@ function AppNavDrawer(props) { keepMounted: true, }} > - {drawer} + {drawer} ) : null} - {disablePermanent ? null : ( + {disablePermanent || mobile ? null : ( - {drawer} + {drawer} )} From f08d5e193220241ebce47cce2eb188f1cadab001 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 4 Apr 2021 16:29:43 +0200 Subject: [PATCH 2/2] isolate component instances --- docs/src/modules/components/AppNavDrawer.js | 23 +++++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 8cf065f1afed31..ee90c9a7bfea3b 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -16,10 +16,10 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -let savedScrollTop = null; +const savedScrollTop = {}; function PersistScroll(props) { - const { children, enabled } = props; + const { slot, children, enabled } = props; const rootRef = React.useRef(); React.useLayoutEffect(() => { @@ -30,7 +30,7 @@ function PersistScroll(props) { return undefined; } - parent.scrollTop = savedScrollTop; + parent.scrollTop = savedScrollTop[slot]; const activeBox = activeElement.getBoundingClientRect(); @@ -39,16 +39,17 @@ function PersistScroll(props) { } return () => { - savedScrollTop = parent.scrollTop; + savedScrollTop[slot] = parent.scrollTop; }; - }, [enabled]); + }, [enabled, slot]); return
{children}
; } PersistScroll.propTypes = { - children: PropTypes.node, - enabled: PropTypes.bool, + children: PropTypes.node.isRequired, + enabled: PropTypes.bool.isRequired, + slot: PropTypes.string.isRequired, }; const styles = (theme) => ({ @@ -199,7 +200,9 @@ function AppNavDrawer(props) { keepMounted: true, }} > - {drawer} + + {drawer} + ) : null} {disablePermanent || mobile ? null : ( @@ -211,7 +214,9 @@ function AppNavDrawer(props) { variant="permanent" open > - {drawer} + + {drawer} + )}