From 11698935279150fb5ee602759db4e1e4696ca0ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Thu, 12 Jan 2023 09:41:35 -0300 Subject: [PATCH] feat: Adiciona logica para aparecer botao backtotop no scroll --- .../src/components/FixedIcons/FixedIcons.tsx | 29 +++++++++++++----- .../assets/modules/FixedIcons.module.scss | 1 + .../components/Footer/assets/svgs/boleto.svg | 6 ++-- .../Footer/assets/svgs/mastercard.png | Bin 0 -> 745 bytes .../components/MainInstitucional/Contato.tsx | 1 - 5 files changed, 25 insertions(+), 12 deletions(-) create mode 100644 react-project/src/components/Footer/assets/svgs/mastercard.png diff --git a/react-project/src/components/FixedIcons/FixedIcons.tsx b/react-project/src/components/FixedIcons/FixedIcons.tsx index 5ecf32c..12b3b54 100644 --- a/react-project/src/components/FixedIcons/FixedIcons.tsx +++ b/react-project/src/components/FixedIcons/FixedIcons.tsx @@ -1,9 +1,20 @@ +import { useState, useEffect } from "react"; + import icons from "./assets/modules/FixedIcons.module.scss"; import whats from "./assets/svgs/whatsapp.svg"; import arrow from "./assets/svgs/arrow.svg"; const FixedIcons = () => { + const [scrollTop, setScrollTop] = useState(0); + + useEffect(() => { + const handleScroll = () => { + setScrollTop(window.scrollY); + }; + window.addEventListener("scroll", handleScroll); + }); + return (
{ Ícone WhatsApp -
window.scrollTo({ top: 0, behavior: "smooth" })} - className={icons["icons__arrow"]} - > -
- Ícone subir ao topo -
-
+ {scrollTop > 0 ? ( +
window.scrollTo({ top: 0, behavior: "smooth" })} + className={icons["icons__arrow"]} + > +
+ Ícone subir ao topo +
+
+ ) : undefined}
); }; diff --git a/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss b/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss index d450482..6a1692b 100644 --- a/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss +++ b/react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss @@ -2,6 +2,7 @@ position: fixed; bottom: 200px; right: 16px; + z-index: 9999; @media screen and (min-width: 2500px) { bottom: 215px; diff --git a/react-project/src/components/Footer/assets/svgs/boleto.svg b/react-project/src/components/Footer/assets/svgs/boleto.svg index 6fea7a5..2041988 100644 --- a/react-project/src/components/Footer/assets/svgs/boleto.svg +++ b/react-project/src/components/Footer/assets/svgs/boleto.svg @@ -1,9 +1,9 @@ - + - + - + diff --git a/react-project/src/components/Footer/assets/svgs/mastercard.png b/react-project/src/components/Footer/assets/svgs/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..e04d81dd3ae134501f236a459caf11ec9d57e4df GIT binary patch literal 745 zcmV2K(nNM#6=Z~t5TP@qe+f#wpN0}o6p0Y>Eyl9k{v7$8^&N*%vY=Gp zBiua~AbaOgPE6Zd;GBF~aI9#_;;-M7U5rX?t3z|FsG!K$I0Q*j>%hGr3c3C&G1#np zuDbp0Se2l->m6FIUV&&fq2c5)*n7HRY;NSDST?s;ehJJy%RsEI=3XGL!mP{fVCnD3$TF4(9#Yl}h)ua@Kh9Bh z9F!!XbV0GHw>-Uzx9;$McxV`r(J@|Y<11;eO6aTGB+ z45FbL3HLM-t{Ixk4Qq!JQOc~jNV!xrOBS1W#nb!s#Y^5_dGw5XV^bqS_Xc_UbMM`J zyda1O-tH?n*Yfa4zHL8y8pY7eki4)^@OiNB0se=&w!J7>5K|N+JzkU>>k%gj+E+BD zV9AtZ677Ti8m};ZX~POOCCfV0?rFu}C@9EavCz>xfJ&gdzr89b10A6Xx< { { Feedback(); - console.log(values); actions.resetForm(); }} initialValues={initialValues}