Feat: 上传浮动按钮

src/component/Navbar.js

@@ -268,7 +268,6 @@ class NavbarCompoment extends Component {
         super(props);
         this.state = {
             mobileOpen: false,
-            queued: 0,
         };
         this.UploaderRef = React.createRef();
     }
@@ -296,13 +295,9 @@ class NavbarCompoment extends Component {
         }
     }
 
-    updateQueueStatus = (queued) => {
-        this.setState({ queued: queued });
-    }
-
     loadUploader() {
         if (pathHelper.isHomePage(this.props.location.pathname)) {
-            return (<Uploader queueChange={queued => this.updateQueueStatus(queued)} ref={this.UploaderRef} />)
+            return (<Uploader/>)
         }
     }
 

src/component/Upload/Fab.js

@@ -1,16 +1,12 @@
-import React from "react";
-import { makeStyles, useTheme } from "@material-ui/core";
-import Button from "@material-ui/core/Button";
+import React, { useCallback, useState, useEffect } from "react";
+import { makeStyles, useTheme, Badge } from "@material-ui/core";
 import SpeedDial from "@material-ui/lab/SpeedDial";
 import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
 import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
-import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
-import SaveIcon from "@material-ui/icons/Save";
-import PrintIcon from "@material-ui/icons/Print";
-import ShareIcon from "@material-ui/icons/Share";
-import FavoriteIcon from "@material-ui/icons/Favorite";
-import EditIcon from "@material-ui/icons/Edit";
-import AddIcon from "@material-ui/icons/Add";
+import CreateNewFolderIcon from "@material-ui/icons/CreateNewFolder";
+import PublishIcon from "@material-ui/icons/Publish";
+import { toggleSnackbar } from "../../actions/index";
+import { useDispatch } from "react-redux";
 
 const useStyles = makeStyles(theme => ({
     fab: {
@@ -21,30 +17,54 @@ const useStyles = makeStyles(theme => ({
         left: "auto",
         zIndex: 5,
         position: "fixed"
-    }
+    },
+    badge:{
+        position: "absolute",
+        bottom: 26,
+        top: "auto",
+        zIndex: 9999,
+        right: 7,
+    },
 }));
 
-const actions = [
-    { icon: <FileCopyIcon />, name: "Copy" },
-    { icon: <SaveIcon />, name: "Save" },
-    { icon: <PrintIcon />, name: "Print" },
-    { icon: <ShareIcon />, name: "Share" },
-    { icon: <FavoriteIcon />, name: "Like" }
-];
-
-export default function UploadButton() {
-    const [open, setOpen] = React.useState(false);
-    const [hidden, setHidden] = React.useState(false);
+export default function UploadButton(props) {
+    const [open, setOpen] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [queued, setQueued] = useState(5);
 
     const theme = useTheme();
     const classes = useStyles();
-    const transitionDuration = {
-        enter: theme.transitions.duration.enteringScreen,
-        exit: theme.transitions.duration.leavingScreen
-    };
 
-    const handleVisibility = () => {
-        setHidden(prevHidden => !prevHidden);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setQueued(props.Queued);
+    }, [props.Queued]);
+
+    const uploadClicked = () => {
+        if (open){
+            if (queued !== 0) {
+            props.openFileList();
+        } else {
+            let uploadButton = document.getElementsByClassName("uploadForm")[0];
+            if (document.body.contains(uploadButton)) {
+                uploadButton.click();
+            } else {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "上传组件还未加载完成",
+                    "warning"
+                );
+            }
+        }
+        }
+        
     };
 
     const handleOpen = () => {
@@ -56,23 +76,31 @@ export default function UploadButton() {
     };
 
     return (
-        <SpeedDial
-        ariaLabel="SpeedDial openIcon example"
-        className={classes.fab}
-        hidden={hidden}
-        icon={<SpeedDialIcon openIcon={<EditIcon />} />}
-        onClose={handleClose}
-        onOpen={handleOpen}
-        open={open}
-      >
-        {actions.map(action => (
-          <SpeedDialAction
-            key={action.name}
-            icon={action.icon}
-            tooltipTitle={action.name}
-            onClick={handleClose}
-          />
-        ))}
-      </SpeedDial>
+        <Badge 
+        badgeContent={queued} 
+        classes={{
+            badge: classes.badge, // class name, e.g. `root-x`
+          }}
+        className={classes.fab} 
+        invisible={queued === 0} 
+        color="secondary">
+            <SpeedDial
+                ariaLabel="SpeedDial openIcon example"
+                hidden={hidden}
+                tooltipTitle="上传文件"
+                icon={<SpeedDialIcon openIcon={<PublishIcon />} />}
+                onClose={handleClose}
+                onClick={uploadClicked}
+                onOpen={handleOpen}
+                open={open}
+            >
+                <SpeedDialAction
+                    key="NewFolder"
+                    icon={<CreateNewFolderIcon />}
+                    tooltipTitle="新建文件夹"
+                    onClick={handleClose}
+                />
+            </SpeedDial>
+        </Badge>
     );
 }

src/component/Uploader.js

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { refreshFileList, refreshStorage } from "../actions/index";
 import FileList from "./Upload/FileList.js";
 import Auth from "../middleware/Auth"
+import UploadButton from "./Upload/Fab.js"
 
 let loaded = false;
 
@@ -39,12 +40,6 @@ class UploaderCompoment extends Component {
     cancelUpload(file) {
         this.uploader.removeFile(file);
     }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextState.queued !== this.state.queued) {
-            this.props.queueChange(nextState.queued);
-        }
-        return false;
-    }
 
     componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
         if (isScriptLoaded && !this.props.isScriptLoaded) {
@@ -146,6 +141,7 @@ class UploaderCompoment extends Component {
                     inRef={this.setRef.bind(this)}
                     cancelUpload={this.cancelUpload.bind(this)}
                 />
+                <UploadButton Queued={this.state.queued} openFileList={this.openFileList} />
             </div>
         );
     }