Feat/scroll to top

[williandeitosi]

Estou adicionando o botao de voltar para o top e resolvi junto ao Gilmar José o bug qua esta tendo de nao computar os valores de scroll, o problema esta no css global que no id root tinha o overflow hidden que nao deixava aparecer o scroll

[williandeitosi]

Para celular ele nao renderiza

On Sun, May 19, 2024, 14:13 Luciano Lima @.***> wrote:

@.**** commented on this pull request.

Coloca prints, gif ou vídeo de como vai funcionar e também como fica no caso de celulares e tablets.

In src/components/ScrollToTopButton/ScrollToTopButton.tsx https://github.com/SOS-RS/frontend/pull/266#discussion_r1606070122:

+ +const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(

• ({ className = '', ...rest }, ref) => {
• const [isVisible, setIsVisible] = useState(false);
• const toggleVisibility = () => {
• const scrolled = document.documentElement.scrollTop;
• if (scrolled > 300) {
• setIsVisible(true);
• } else if (scrolled <= 300) {
• setIsVisible(false);
• }
• };
• const scrollToTop = () => {
• console.log('scroll top');

Ficou esquecido aqui

In src/components/ScrollToTopButton/ScrollToTopButton.tsx https://github.com/SOS-RS/frontend/pull/266#discussion_r1606070264:

@@ -0,0 +1,45 @@ +import { useState, forwardRef } from 'react'; +import { IScrollToTopButton } from './types'; +import { cn } from '@/lib/utils'; + +const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(

• ({ className = '', ...rest }, ref) => {
• const [isVisible, setIsVisible] = useState(false);
• const toggleVisibility = () => {
• const scrolled = document.documentElement.scrollTop;
• if (scrolled > 300) {

De onde veio esse valor? Vai funcionar tanto para desktop como dispositivos móveis?

In src/components/ScrollToTopButton/ScrollToTopButton.tsx https://github.com/SOS-RS/frontend/pull/266#discussion_r1606070403:

• return (
• <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}>
• {isVisible && (

Não seria melhor não renderizar nada caso não fosse necessário?

— Reply to this email directly, view it on GitHub https://github.com/SOS-RS/frontend/pull/266#pullrequestreview-2065116056, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY7O5MDZPALRAOL4BGZXSY3ZDDMR5AVCNFSM6AAAAABH6M7646VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANRVGEYTMMBVGY . You are receiving this because you authored the thread.Message ID: @.***>

[williandeitosi]

gif do funcionamento do botao: