crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ enhan: refactor component ScrollToTop

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-14 16:12:03 +07:00
parent 83b5f90486
commit e30f1c520f
3 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/Layout/Layout.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import { FC } from 'react'
import { useModalCommon } from 'src/components/hooks'
import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
import { CustomShapeSvg } from '..'
import { CustomShapeSvg, ScrollToTop } from '..'
import Footer from '../Footer/Footer'
import Header from '../Header/Header'
import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@ -29,11 +29,12 @@ const Layout: FC<Props> = ({ children }) => {
return (
<CommerceProvider locale={locale}>
<div className={s.mainLayout}>
<Header toggleFilter={toggleFilter}/>
<Header toggleFilter={toggleFilter} />
<main >{children}</main>
<CustomShapeSvg/>
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
<CustomShapeSvg />
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<ScrollToTop visibilityHeight={1500} />
<Footer />
</div>
</CommerceProvider>

10
src/components/common/ScrollToTop/ScrollToTop.module.scss
View File

@ -1,20 +1,20 @@
@import '../../../styles/utilities';
@import "../../../styles/utilities";
.scrollToTop {
@apply hidden;
z-index: 9999;
@screen md {
&.show {
@apply block rounded-lg fixed cursor-pointer;
right: 11.2rem;
right: 6.4rem;
bottom: 21.6rem;
width: 6.4rem;
height: 6.4rem;
background-color: var(--border-line);
@screen lg {
right: 11.2rem;
}
&.hide {
@apply hidden;
}
}

37
src/components/common/ScrollToTop/ScrollToTop.tsx
View File

@ -1,44 +1,41 @@
import React, { useState, useEffect, MutableRefObject } from 'react'
import classNames from 'classnames'
import React, { useEffect, useState } from 'react'
import ArrowUp from '../../icons/IconArrowUp'
import s from './ScrollToTop.module.scss'
import ArrowUp from '../../icons/IconArrowUp'
interface ScrollToTopProps {
visibilityHeight?: number;
}
const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
const [scrollPosition, setSrollPosition] = useState(0);
const [showScrollToTop, setShowScrollToTop] = useState("hide");
const ScrollToTop = ({ visibilityHeight = 450 }: ScrollToTopProps) => {
const [showScrollToTop, setShowScrollToTop] = useState<boolean>();
function handleVisibleButton() {
const position = window.pageYOffset;
setSrollPosition(position);
const scrollPosition = window.scrollY;
if (scrollPosition > visibilityHeight) {
return setShowScrollToTop("show")
} else if (scrollPosition < visibilityHeight) {
return setShowScrollToTop("hide");
setShowScrollToTop(true)
} else {
setShowScrollToTop(false)
}
};
useEffect(() => {
window.addEventListener("scroll", handleVisibleButton);
return () => {
window.removeEventListener("scroll", handleVisibleButton);
}
}, []);
function handleScrollUp() {
window.scrollTo(0, 0);
}
function addEventScroll() {
window.addEventListener("scroll", handleVisibleButton);
}
useEffect(() => {
addEventScroll();
}, []);
return (
<div className={classNames(s.scrollToTop, {
[s[`${showScrollToTop}`]]: showScrollToTop
[s.show]: showScrollToTop
})}
onClick={handleScrollUp}
>