Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add "back to top" button #30441

Merged
merged 13 commits into from
May 19, 2022
3 changes: 2 additions & 1 deletion docs/pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
} from 'docs/src/modules/utils/i18n';
import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
import createEmotionCache from 'docs/src/createEmotionCache';
import BackToTop from 'docs/src/modules/components/BackToTop';
import findActivePage from 'docs/src/modules/utils/findActivePage';
import FEATURE_TOGGLE from 'docs/src/featureToggle';

Expand Down Expand Up @@ -247,11 +248,11 @@ export default function MyApp(props) {

return (
<AppWrapper emotionCache={emotionCache} pageProps={pageProps}>
<BackToTop />
<Component {...pageProps} />
</AppWrapper>
);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
Expand Down
67 changes: 67 additions & 0 deletions docs/src/modules/components/BackToTop.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import Tooltip from '@mui/material/Tooltip';
import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
import Zoom from '@mui/material/Zoom';
import { useTranslate } from 'docs/src/modules/utils/i18n';

function BackToTop(props) {
const t = useTranslate();
const { window: windowProp, onClick, sx, ...other } = props;

const trigger = useScrollTrigger({
target: windowProp ? windowProp() : undefined,
disableHysteresis: true,
threshold: 100,
});

const handleClick = (event) => {
window.scrollTo({ top: 0, behavior: 'smooth' });
onClick?.(event);
};

return (
<Zoom in={trigger}>
<Box
role="presentation"
{...other}
onClick={handleClick}
sx={[
{ position: 'fixed', bottom: 24, right: 24, zIndex: 10 },
...(Array.isArray(sx) ? sx : [sx]),
]}
>
<Tooltip title="Scroll to top">
<Fab
color="primary"
size="small"
aria-label={t('backToTop')}
sx={{
boxShadow: (theme) =>
`0px 4px 20px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)'
}`,
}}
>
<KeyboardArrowUpRoundedIcon />
</Fab>
</Tooltip>
</Box>
</Zoom>
);
}

BackToTop.propTypes = {
onClick: PropTypes.func,
sx: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
PropTypes.func,
PropTypes.object,
]),
window: PropTypes.func,
};

export default BackToTop;
1 change: 1 addition & 0 deletions docs/translations/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"skipToContent": "Skip to content",
"toggleSettings": "Toggle settings drawer"
},
"backToTop": "Scroll back to top",
"blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx but is easily replaced.",
"blogTitle": "Blog",
"bundleSize": "Bundle size",
Expand Down