From 3b3bf5b0c1f38074636cb75087d3ac5ee803787e Mon Sep 17 00:00:00 2001
From: HFO4 <912394456@qq.com>
Date: Sat, 30 Nov 2019 19:44:25 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E6=BB=9A=E5=8A=A8=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Upload/Fab.js | 31 ++++++++++++++++++++++++++++++-
 src/component/Uploader.js   | 17 -----------------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/component/Upload/Fab.js b/src/component/Upload/Fab.js
index 729f740..b5815cb 100644
--- a/src/component/Upload/Fab.js
+++ b/src/component/Upload/Fab.js
@@ -7,6 +7,7 @@ import CreateNewFolderIcon from "@material-ui/icons/CreateNewFolder";
 import PublishIcon from "@material-ui/icons/Publish";
 import { toggleSnackbar } from "../../actions/index";
 import { useDispatch } from "react-redux";
+import Zoom from '@material-ui/core/Zoom';
 
 const useStyles = makeStyles(theme => ({
     fab: {
@@ -42,6 +43,32 @@ export default function UploadButton(props) {
         [dispatch]
     );
 
+    let prev = window.scrollY;
+    let lastUpdate = window.scrollY;
+    const show = 50;
+
+    useEffect(() => {
+        window.addEventListener('scroll', e => handleNavigation(e));
+    }, [])
+
+    const handleNavigation = (e) => {
+        const window = e.currentTarget;
+    
+        if (prev > window.scrollY) {
+            if (lastUpdate - window.scrollY > show){
+                lastUpdate = window.scrollY;
+                setHidden(false);
+            }
+        } else if (prev < window.scrollY) {
+            if (window.scrollY - lastUpdate > show){
+                lastUpdate = window.scrollY;
+                setHidden(true);
+            }
+        }
+        prev = window.scrollY;
+    };
+
+
     useEffect(() => {
         setQueued(props.Queued);
     }, [props.Queued]);
@@ -76,6 +103,7 @@ export default function UploadButton(props) {
     };
 
     return (
+        <Zoom in={!hidden}>
         <Badge 
         badgeContent={queued} 
         classes={{
@@ -86,7 +114,7 @@ export default function UploadButton(props) {
         color="secondary">
             <SpeedDial
                 ariaLabel="SpeedDial openIcon example"
-                hidden={hidden}
+                hidden={false}
                 tooltipTitle="上传文件"
                 icon={<SpeedDialIcon openIcon={<PublishIcon />} />}
                 onClose={handleClose}
@@ -102,5 +130,6 @@ export default function UploadButton(props) {
                 />
             </SpeedDial>
         </Badge>
+        </Zoom>
     );
 }
diff --git a/src/component/Uploader.js b/src/component/Uploader.js
index d9c78a8..35592bd 100644
--- a/src/component/Uploader.js
+++ b/src/component/Uploader.js
@@ -111,23 +111,6 @@ class UploaderCompoment extends Component {
         }
     }
 
-    componentDidMount() {
-        this.prev = window.scrollY;
-        window.addEventListener('scroll', e => this.handleNavigation(e));
-
-    }
-
-    handleNavigation = (e) => {
-        const window = e.currentTarget;
-    
-        if (this.prev > window.scrollY) {
-            console.log("scrolling up");
-        } else if (this.prev < window.scrollY) {
-            console.log("scrolling down");
-        }
-        this.prev = window.scrollY;
-    };
-
     onError() {}
 
     openFileList = () => {