diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index d252ce95081627..851913892559bc 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -14,6 +14,42 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; import compose from 'docs/src/modules/utils/compose'; +let savedScrollTop = null; +function PersistScroll(props) { + const { children } = props; + const rootRef = React.useRef(); + + React.useEffect(() => { + const parent = rootRef.current ? rootRef.current.parentNode : null; + const activeElement = document.querySelector('.drawer-active'); + + if (!parent || !activeElement || !activeElement.scrollIntoView) { + return undefined; + } + + const activeBox = activeElement.getBoundingClientRect(); + + if (savedScrollTop === null || activeBox.top - savedScrollTop < 0) { + // Center the selected item in the list container. + activeElement.scrollIntoView(); + // Fix a Chrome issue, reset the tabbable ring back to the top of the document. + document.body.scrollIntoView(); + } else { + parent.scrollTop = savedScrollTop; + } + + return () => { + savedScrollTop = parent.scrollTop; + }; + }, []); + + return
{children}
; +} + +PersistScroll.propTypes = { + children: PropTypes.node, +}; + const styles = theme => ({ paper: { width: 240, @@ -100,7 +136,7 @@ function AppDrawer(props) { const { activePage, pages } = React.useContext(PageContext); const drawer = ( -
+
@@ -116,7 +152,7 @@ function AppDrawer(props) {
{renderNavItems({ props, pages, activePage, depth: 0, t })} -
+ ); return ( diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 68a47ee2d930f2..6cd43990d3d82c 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -1,13 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import ListItem from '@material-ui/core/ListItem'; import Button from '@material-ui/core/Button'; import Collapse from '@material-ui/core/Collapse'; import Link from 'docs/src/modules/components/Link'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ item: { display: 'block', paddingTop: 0, @@ -38,89 +38,61 @@ const styles = theme => ({ color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightMedium, }, -}); +})); -class AppDrawerNavItem extends React.Component { - state = { - open: this.props.openImmediately, - }; - - componentDidMount() { - // So we only run this logic once. - if (!this.props.openImmediately) { - return; - } - - // Center the selected item in the list container. - const activeElement = document.querySelector(`.${this.props.classes.active}`); - if (activeElement && activeElement.scrollIntoView) { - activeElement.scrollIntoView({}); - // Fix a Chrome issue, reset the tabbable ring back to the top of the document. - document.body.scrollIntoView({}); - } - } +function AppDrawerNavItem(props) { + const { children, depth, href, onClick, openImmediately, title, ...other } = props; + const [open, setOpen] = React.useState(openImmediately); + const classes = useStyles(); - handleClick = () => { - this.setState(state => ({ open: !state.open })); + const handleClick = () => { + setOpen(oldOpen => !oldOpen); }; - render() { - const { - children, - classes, - depth, - href, - onClick, - openImmediately, - title, - ...other - } = this.props; - - const style = { - paddingLeft: 8 * (3 + 2 * depth), - }; - - if (href) { - return ( - - - - ); - } + const style = { + paddingLeft: 8 * (3 + 2 * depth), + }; + if (href) { return ( - + - - {children} - ); } + + return ( + + + + {children} + + + ); } AppDrawerNavItem.propTypes = { children: PropTypes.node, - classes: PropTypes.object.isRequired, depth: PropTypes.number.isRequired, href: PropTypes.string, onClick: PropTypes.func, @@ -132,4 +104,4 @@ AppDrawerNavItem.defaultProps = { openImmediately: false, }; -export default withStyles(styles)(AppDrawerNavItem); +export default AppDrawerNavItem; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 913848af71dc2e..51ab6355cc755b 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -29,6 +29,7 @@ import { import compose from 'docs/src/modules/utils/compose'; import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import { LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; +import Link from 'docs/src/modules/components/Link'; const styles = theme => ({ header: { @@ -209,6 +210,8 @@ function MarkdownDocs(props) {
{prevPage ? (