From 6d1d8b982a05c1b9574cd009ca0704df3ac7ac60 Mon Sep 17 00:00:00 2001
From: quocsonnguyen <quocsonnguyen2010@gmail.com>
Date: Thu, 26 Aug 2021 14:14:38 +0700
Subject: [PATCH] :sparkles: feat: Scroll To Top

---
 .../common/ScrollToTop/ScrollTarget.tsx       | 15 ++++++
 .../ScrollToTop/ScrollToTop.module.scss       | 24 +++++++++
 .../common/ScrollToTop/ScrollToTop.tsx        | 54 +++++++++++++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 src/components/common/ScrollToTop/ScrollTarget.tsx
 create mode 100644 src/components/common/ScrollToTop/ScrollToTop.module.scss
 create mode 100644 src/components/common/ScrollToTop/ScrollToTop.tsx

diff --git a/src/components/common/ScrollToTop/ScrollTarget.tsx b/src/components/common/ScrollToTop/ScrollTarget.tsx
new file mode 100644
index 000000000..50a839c83
--- /dev/null
+++ b/src/components/common/ScrollToTop/ScrollTarget.tsx
@@ -0,0 +1,15 @@
+import React, { MutableRefObject } from 'react'
+
+interface ScrollTargetProps {
+    refScrollUp: MutableRefObject<HTMLDivElement>;
+}
+
+const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
+
+    return (
+        <div ref={refScrollUp}></div>
+    )
+
+}
+
+export default ScrollTarget
diff --git a/src/components/common/ScrollToTop/ScrollToTop.module.scss b/src/components/common/ScrollToTop/ScrollToTop.module.scss
new file mode 100644
index 000000000..c010f08ad
--- /dev/null
+++ b/src/components/common/ScrollToTop/ScrollToTop.module.scss
@@ -0,0 +1,24 @@
+@import '../../../styles/utilities';
+
+.scrollToTop {
+    @apply hidden;
+
+    @screen md {
+        &.show {
+            @apply block rounded-lg fixed cursor-pointer;
+            right: 11.2rem;
+            bottom: 21.6rem; 
+            width: 6.4rem;
+            height: 6.4rem;
+            background-color: var(--border-line);
+        }
+        
+        &.hide {
+            @apply hidden;
+        }
+    }
+
+    .scrollToTopBtn {
+        @apply outline-none w-full h-full;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx
new file mode 100644
index 000000000..98e16168d
--- /dev/null
+++ b/src/components/common/ScrollToTop/ScrollToTop.tsx
@@ -0,0 +1,54 @@
+import React, { useState, useEffect, MutableRefObject } from 'react'
+import classNames from 'classnames'
+import s from './ScrollToTop.module.scss'
+
+import ArrowUp from '../../icons/IconArrowUp'
+
+interface ScrollToTopProps {
+    target: MutableRefObject<HTMLDivElement>;
+    visibilityHeight?: number;
+}
+
+const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
+
+    const [scrollPosition, setSrollPosition] = useState(0);
+    const [showScrollToTop, setShowScrollToTop] = useState("hide");
+
+    function handleVisibleButton() {
+        const position = window.pageYOffset;
+        setSrollPosition(position);
+    
+        if (scrollPosition > visibilityHeight) {
+          return setShowScrollToTop("show")
+        } else if (scrollPosition < visibilityHeight) {
+          return setShowScrollToTop("hide");
+        }
+    };
+
+    function handleScrollUp() {
+        target.current.scrollIntoView({ behavior: "smooth" });
+    }
+
+    function addEventScroll() {
+        window.addEventListener("scroll", handleVisibleButton);
+    }
+
+    useEffect(() => {
+        addEventScroll()
+    });    
+
+    return (
+        <div className={classNames(s.scrollToTop, {
+            [s[`${showScrollToTop}`]]: showScrollToTop
+          })}
+          onClick={handleScrollUp}
+          >
+            <button className={s.scrollToTopBtn}>
+                <ArrowUp />
+            </button>
+        </div>
+    )
+
+}
+
+export default ScrollToTop