feat: Add a back to top float button to the proposal page #3958 (#4082)

* feat: Add a Back to top float button to the proposal page #3958 * fix: Update remarks * fix: use styled-components pull-out style --------- Co-authored-by: yuankang <[email protected]>
opensquare-network · Apr 7, 2024 · 6c34715 · 6c34715
1 parent 3bbe969
commit 6c34715
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 0 deletions.
diff --git a/packages/next-common/assets/imgs/icons/systemTop.svg b/packages/next-common/assets/imgs/icons/systemTop.svg
diff --git a/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx b/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { animateScroll as scroll } from 'react-scroll';
+import SystemTop from "next-common/assets/imgs/icons/systemTop.svg";
+import styled from "styled-components";
+
+const ScrollToTopDiv = styled.div`
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  position: fixed;
+  cursor:pointer;
+  bottom: 96px;
+  right: 24px;
+  z-index:1000;
+  border-radius: 8px;
+  border: 1px solid var(--color-neutral400, #E0E4EB);
+  background: var(--color-neutral100, #FFF);
+  box-shadow: 0px 6px 7px 0px rgba(30, 33, 52, 0.02), 0px 1.34px 1.564px 0px rgba(30, 33, 52, 0.01), 0px 0.399px 0.466px 0px rgba(30, 33, 52, 0.01)
+`;
+
+export default function ScrollToTopButton({scrollYShowPX = 800}){
+    const [showButton, setShowButton] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setShowButton(window.scrollY > scrollYShowPX);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const handleClick = () => {
+        scroll.scrollToTop();
+    };
+
+    return (
+        showButton && (
+            <ScrollToTopDiv className={'w-10 h-10'} onClick={handleClick}>
+                <SystemTop />
+            </ScrollToTopDiv>
+        )
+    );
+};
diff --git a/packages/next-common/components/layout/DetailLayout/index.jsx b/packages/next-common/components/layout/DetailLayout/index.jsx
@@ -9,6 +9,7 @@ import { useEffect } from "react";
 import { useNavCollapsed } from "next-common/context/nav";
 import { NeutralPanel } from "../../styled/containers/neutralPanel";
 import Breadcrumbs from "next-common/components/layout/DetailLayout/breadcrumbs";
+import ScrollToTopButton from "next-common/components/layout/DetailLayout/ScrollToTopButton";
 
 export default function DetailLayout({
   seoInfo,
@@ -43,6 +44,9 @@ export default function DetailLayout({
         >
           <Breadcrumbs breadcrumbs={breadcrumbs} hasSidebar={hasSidebar} />
 
+          {/*Click the floating window button and slide to the top of the browser*/}
+          <ScrollToTopButton />
+
           {/* set relative for right side(vote) component */}
           <div className="flex gap-x-6 max-w-full relative">
             <div

diff --git a/packages/next-common/package.json b/packages/next-common/package.json
@@ -56,6 +56,7 @@
     "react-dropzone": "^14.2.3",
     "react-json-view": "^1.21.3",
     "react-redux": "^8.0.5",
+    "react-scroll": "^1.9.0",
     "react-slider": "^2.0.4",
     "react-use": "^17.4.0",
     "solarlunar": "^2.0.7",

diff --git a/packages/next/.gitignore b/packages/next/.gitignore
@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/yarn.lock b/yarn.lock
@@ -8118,6 +8118,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.throttle@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "lodash.throttle@npm:4.1.1"
+  checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805
+  languageName: node
+  linkType: hard
+
 "lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -8633,6 +8640,7 @@ __metadata:
     react-dropzone: ^14.2.3
     react-json-view: ^1.21.3
     react-redux: ^8.0.5
+    react-scroll: ^1.9.0
     react-slider: ^2.0.4
     react-use: ^17.4.0
     solarlunar: ^2.0.7
@@ -9772,6 +9780,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-scroll@npm:^1.9.0":
+  version: 1.9.0
+  resolution: "react-scroll@npm:1.9.0"
+  dependencies:
+    lodash.throttle: ^4.1.1
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: b84427d090600d9107adb57b93c8c059f9e36dcb4919660cd7d0547a6ce816b179bc54bc2941ff7d2497b2295f1a3e92dd0974c0dcedfde2fa5c93966441271e
+  languageName: node
+  linkType: hard
+
 "react-slider@npm:^2.0.4":
   version: 2.0.4
   resolution: "react-slider@npm:2.0.4"