From bbf2f412a9b580229a3fd718019eca274a175b76 Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Wed, 29 Dec 2021 14:33:34 +0000 Subject: [PATCH 01/12] Added back to top button. --- docs/pages/ScrollToTop.js | 45 +++++++++++++++++++++++++++++++++++++++ docs/pages/_app.js | 4 +++- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 docs/pages/ScrollToTop.js diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js new file mode 100644 index 00000000000000..20a0fd679d2769 --- /dev/null +++ b/docs/pages/ScrollToTop.js @@ -0,0 +1,45 @@ +import React, { useEffect, useState } from 'react'; +import Fab from '@mui/material/Fab'; +import ArrowUpwardOutlinedIcon from '@mui/icons-material/ArrowUpwardOutlined'; +import { Tooltip } from '@mui/material'; + +export default function ScrollToTop() { + const scrollUpButton = { + 'z-index': '5', + position: 'fixed', + right: 20, + bottom: 10, + }; + const [isVisible, setIsVisible] = useState(false); + + if (typeof window === 'undefined') return null; + + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + }, []); + + return ( + <> + {isVisible && ( + + + + )} + + ); +} diff --git a/docs/pages/_app.js b/docs/pages/_app.js index cbbf2a0391a4b4..c391a48cf165db 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -27,6 +27,7 @@ import { } from 'docs/src/modules/utils/i18n'; import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; import createEmotionCache from 'docs/src/createEmotionCache'; +import ScrollToTop from './ScrollToTop'; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); @@ -246,7 +247,8 @@ export default function MyApp(props) { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( - + + ); From 891fb54bdf74d9bccf9153d6a3aba60de3864830 Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Wed, 29 Dec 2021 15:09:27 +0000 Subject: [PATCH 02/12] Formatted modified files. --- docs/pages/ScrollToTop.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js index 20a0fd679d2769..6d8006820929a1 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/pages/ScrollToTop.js @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import Fab from '@mui/material/Fab'; import ArrowUpwardOutlinedIcon from '@mui/icons-material/ArrowUpwardOutlined'; -import { Tooltip } from '@mui/material'; export default function ScrollToTop() { const scrollUpButton = { @@ -12,7 +11,9 @@ export default function ScrollToTop() { }; const [isVisible, setIsVisible] = useState(false); - if (typeof window === 'undefined') return null; + if (typeof window === 'undefined') { + return null; + } const toggleVisibility = () => { if (window.pageYOffset > 300) { @@ -34,12 +35,12 @@ export default function ScrollToTop() { }, []); return ( - <> + {isVisible && ( )} - + ); } From 832ae031d8a4725931c4666d4d5930a6c616d76a Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Wed, 29 Dec 2021 15:37:34 +0000 Subject: [PATCH 03/12] Minor Changes --- docs/pages/ScrollToTop.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js index 6d8006820929a1..1ac0ee52562d14 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/pages/ScrollToTop.js @@ -11,10 +11,6 @@ export default function ScrollToTop() { }; const [isVisible, setIsVisible] = useState(false); - if (typeof window === 'undefined') { - return null; - } - const toggleVisibility = () => { if (window.pageYOffset > 300) { setIsVisible(true); @@ -31,7 +27,9 @@ export default function ScrollToTop() { }; useEffect(() => { - window.addEventListener('scroll', toggleVisibility); + if (typeof window !== 'undefined') { + window.addEventListener('scroll', toggleVisibility); + } }, []); return ( From fef6f8fd9924c62262c08ae603e161a2ce12a357 Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Wed, 29 Dec 2021 15:49:42 +0000 Subject: [PATCH 04/12] Minor changes --- docs/pages/_app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index c391a48cf165db..1cdcb3bbc7061d 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -247,8 +247,8 @@ export default function MyApp(props) { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( - - + + ); From 8a0b59aef3ee4d5702f1147643b8b85092444602 Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Thu, 30 Dec 2021 13:22:16 +0000 Subject: [PATCH 05/12] Native 'Back to top' implemented. --- docs/pages/ScrollToTop.js | 64 +++++++++++++++++++-------------------- docs/pages/_app.js | 1 - 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js index 1ac0ee52562d14..6f2e18fb8c336d 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/pages/ScrollToTop.js @@ -1,44 +1,44 @@ -import React, { useEffect, useState } from 'react'; +import * as React from 'react'; +import useScrollTrigger from '@mui/material/useScrollTrigger'; +import Box from '@mui/material/Box'; import Fab from '@mui/material/Fab'; -import ArrowUpwardOutlinedIcon from '@mui/icons-material/ArrowUpwardOutlined'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import Zoom from '@mui/material/Zoom'; -export default function ScrollToTop() { - const scrollUpButton = { - 'z-index': '5', - position: 'fixed', - right: 20, - bottom: 10, - }; - const [isVisible, setIsVisible] = useState(false); +function ScrollTop(props) { + const { children, window } = props; - const toggleVisibility = () => { - if (window.pageYOffset > 300) { - setIsVisible(true); - } else { - setIsVisible(false); - } - }; + const trigger = useScrollTrigger({ + target: window ? window() : undefined, + disableHysteresis: true, + threshold: 100, + }); - const scrollToTop = () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }; + return ( + + + {children} + + + ); +} - useEffect(() => { - if (typeof window !== 'undefined') { - window.addEventListener('scroll', toggleVisibility); - } - }, []); +export default function BackToTop(props) { + const handleClick = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; return ( - {isVisible && ( - - + + + - )} + ); } diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 1cdcb3bbc7061d..36424666d34ffa 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -253,7 +253,6 @@ export default function MyApp(props) { ); } - MyApp.propTypes = { Component: PropTypes.elementType.isRequired, emotionCache: PropTypes.object, From 8fd5d3c1383079af4df66384a8038f6a24f752f7 Mon Sep 17 00:00:00 2001 From: VibhorJaiswal Date: Thu, 30 Dec 2021 13:34:52 +0000 Subject: [PATCH 06/12] Minor changes. --- docs/pages/ScrollToTop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js index 6f2e18fb8c336d..bd9f28e925b755 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/pages/ScrollToTop.js @@ -27,7 +27,7 @@ function ScrollTop(props) { ); } -export default function BackToTop(props) { +export default function ScrollToTop(props) { const handleClick = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; From c5e5345d5bf2dab51788d63bd73a55d31a276290 Mon Sep 17 00:00:00 2001 From: Vibhor Jaiswal <69683278+VibhorJaiswal@users.noreply.github.com> Date: Thu, 30 Dec 2021 21:26:06 +0530 Subject: [PATCH 07/12] Update ScrollToTop.js --- docs/pages/ScrollToTop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/ScrollToTop.js b/docs/pages/ScrollToTop.js index bd9f28e925b755..6f2e18fb8c336d 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/pages/ScrollToTop.js @@ -27,7 +27,7 @@ function ScrollTop(props) { ); } -export default function ScrollToTop(props) { +export default function BackToTop(props) { const handleClick = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; From f9655134cb0388d1c4924fcc02e979589008f84f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 May 2022 10:27:01 +0200 Subject: [PATCH 08/12] Refactor the code --- docs/pages/_app.js | 4 +-- .../modules/components/BackToTop.js} | 36 ++++++++----------- 2 files changed, 16 insertions(+), 24 deletions(-) rename docs/{pages/ScrollToTop.js => src/modules/components/BackToTop.js} (58%) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 36424666d34ffa..4d5ea7670792a4 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -27,7 +27,7 @@ import { } from 'docs/src/modules/utils/i18n'; import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; import createEmotionCache from 'docs/src/createEmotionCache'; -import ScrollToTop from './ScrollToTop'; +import BackToTop from 'docs/src/modules/components/BackToTop'; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); @@ -248,7 +248,7 @@ export default function MyApp(props) { return ( - + ); diff --git a/docs/pages/ScrollToTop.js b/docs/src/modules/components/BackToTop.js similarity index 58% rename from docs/pages/ScrollToTop.js rename to docs/src/modules/components/BackToTop.js index 6f2e18fb8c336d..6418ccd17dc06b 100644 --- a/docs/pages/ScrollToTop.js +++ b/docs/src/modules/components/BackToTop.js @@ -5,40 +5,32 @@ import Fab from '@mui/material/Fab'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import Zoom from '@mui/material/Zoom'; -function ScrollTop(props) { - const { children, window } = props; +export default function BackToTop(props) { + const { window: windowProp, onClick, sx, ...other } = props; const trigger = useScrollTrigger({ - target: window ? window() : undefined, + target: windowProp ? windowProp() : undefined, disableHysteresis: true, threshold: 100, }); + const handleClick = (event) => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + onClick?.(event); + }; + return ( - {children} - - - ); -} - -export default function BackToTop(props) { - const handleClick = () => { - window.scrollTo({ top: 0, behavior: 'smooth' }); - }; - - return ( - - - + - - + + ); } From 9f167738dc6d2d70c83444948df267497c27681b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 May 2022 17:51:37 +0200 Subject: [PATCH 09/12] lint & prettier --- docs/src/modules/components/BackToTop.js | 24 +++++++++++++++++++++--- docs/translations/translations.json | 1 + 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/BackToTop.js b/docs/src/modules/components/BackToTop.js index 6418ccd17dc06b..228f6d589c55ef 100644 --- a/docs/src/modules/components/BackToTop.js +++ b/docs/src/modules/components/BackToTop.js @@ -1,11 +1,14 @@ 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 KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import Zoom from '@mui/material/Zoom'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; -export default function BackToTop(props) { +function BackToTop(props) { + const t = useTranslate(); const { window: windowProp, onClick, sx, ...other } = props; const trigger = useScrollTrigger({ @@ -25,12 +28,27 @@ export default function BackToTop(props) { role="presentation" {...other} onClick={handleClick} - sx={[{ position: 'fixed', bottom: 16, right: 16, zIndex: 10 }, ...(Array.isArray(sx) ? sx : [sx])]} + sx={[ + { position: 'fixed', bottom: 16, right: 16, zIndex: 10 }, + ...(Array.isArray(sx) ? sx : [sx]), + ]} > - + ); } + +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; diff --git a/docs/translations/translations.json b/docs/translations/translations.json index a5fed123a67a49..c6905183ee2aec 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -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", From 44b0d2cf43aad3d5d4fc35321861b82b7575602c Mon Sep 17 00:00:00 2001 From: danilo leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 18 May 2022 23:44:07 -0300 Subject: [PATCH 10/12] change the icon and tweak box shadow a bit --- docs/src/modules/components/BackToTop.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/BackToTop.js b/docs/src/modules/components/BackToTop.js index 228f6d589c55ef..e7358ef8badf8c 100644 --- a/docs/src/modules/components/BackToTop.js +++ b/docs/src/modules/components/BackToTop.js @@ -3,7 +3,7 @@ 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 KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded'; import Zoom from '@mui/material/Zoom'; import { useTranslate } from 'docs/src/modules/utils/i18n'; @@ -33,8 +33,18 @@ function BackToTop(props) { ...(Array.isArray(sx) ? sx : [sx]), ]} > - - + + `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, + }} + > + From a4058b21a7b4547ff2e039241659b97c3ff64805 Mon Sep 17 00:00:00 2001 From: danilo leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 18 May 2022 23:45:43 -0300 Subject: [PATCH 11/12] add tooltip --- docs/src/modules/components/BackToTop.js | 29 +++++++++++++----------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/docs/src/modules/components/BackToTop.js b/docs/src/modules/components/BackToTop.js index e7358ef8badf8c..7f5782dbf79ab6 100644 --- a/docs/src/modules/components/BackToTop.js +++ b/docs/src/modules/components/BackToTop.js @@ -3,6 +3,7 @@ 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'; @@ -33,19 +34,21 @@ function BackToTop(props) { ...(Array.isArray(sx) ? sx : [sx]), ]} > - - `0px 4px 20px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' - }`, - }} - > - - + + + `0px 4px 20px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' + }`, + }} + > + + + ); From c8b9389bf0ad5249c49721e5b910eaa9690e43f5 Mon Sep 17 00:00:00 2001 From: danilo leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 18 May 2022 23:46:18 -0300 Subject: [PATCH 12/12] adjust positioning --- docs/src/modules/components/BackToTop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/BackToTop.js b/docs/src/modules/components/BackToTop.js index 7f5782dbf79ab6..1eaaf23cc95cad 100644 --- a/docs/src/modules/components/BackToTop.js +++ b/docs/src/modules/components/BackToTop.js @@ -30,7 +30,7 @@ function BackToTop(props) { {...other} onClick={handleClick} sx={[ - { position: 'fixed', bottom: 16, right: 16, zIndex: 10 }, + { position: 'fixed', bottom: 24, right: 24, zIndex: 10 }, ...(Array.isArray(sx) ? sx : [sx]), ]} >