Feat: task dialog on the right bottom

src/component/Dial/AutoHidden.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Zoom from "@material-ui/core/Zoom";
 
-function AutoHidden({ children, enable }) {
+function AutoHidden({ children, enable, hide = false }) {
     const [hidden, setHidden] = useState(false);
 
     let prev = window.scrollY;
@@ -31,7 +31,7 @@ function AutoHidden({ children, enable }) {
         // eslint-disable-next-line
     }, [enable]);
 
-    return <Zoom in={!hidden}>{children}</Zoom>;
+    return <Zoom in={!hidden && !hide}>{children}</Zoom>;
 }
 
 export default AutoHidden;

src/component/Dial/Create.js

@@ -82,7 +82,7 @@ export default function UploadButton(props) {
     };
 
     return (
-        <AutoHidden enable>
+        <AutoHidden enable hide={props.taskListOpen}>
             <Badge
                 badgeContent={queued}
                 classes={{

src/component/Uploader/Popup/TaskList.js

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import {
+    AppBar,
+    Dialog,
+    IconButton,
+    makeStyles,
+    Slide,
+    Toolbar,
+    Typography,
+} from "@material-ui/core";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import CloseIcon from "@material-ui/icons/Close";
+import AddIcon from "@material-ui/icons/AddCircleOutline";
+import classnames from "classnames";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+const useStyles = makeStyles((theme) => ({
+    appBar: {
+        position: "relative",
+    },
+    flex: {
+        flex: 1,
+    },
+    popup: {
+        alignItems: "flex-end",
+        justifyContent: "flex-end",
+    },
+    dialog: {
+        margin: 0,
+        top: "auto",
+        right: 0,
+        bottom: 0,
+        left: "auto",
+        zIndex: 9999,
+        position: "fixed",
+    },
+}));
+
+export default function TaskList({ open, onClose }) {
+    const classes = useStyles();
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    const [expanded, setExpanded] = useState(false);
+    const close = () => {
+        setExpanded(false);
+        onClose();
+    };
+
+    return (
+        <Dialog
+            classes={{
+                container: classes.popup, // class name, e.g. `classes-nesting-root-x`
+            }}
+            className={classnames({
+                [classes.dialog]: !fullScreen,
+            })}
+            fullScreen={fullScreen}
+            open={open}
+            onClose={close}
+            TransitionComponent={Transition}
+            disableEnforceFocus={!expanded}
+            hideBackdrop={!expanded}
+            disableBackdropClick={!expanded}
+            disableScrollLock={true}
+        >
+            <AppBar className={classes.appBar}>
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        onClick={close}
+                        aria-label="Close"
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                    <Typography
+                        variant="h6"
+                        color="inherit"
+                        className={classes.flex}
+                    >
+                        上传队列
+                    </Typography>
+                    <IconButton
+                        color="inherit"
+                        onClick={() => setExpanded(!expanded)}
+                    >
+                        <AddIcon />
+                    </IconButton>
+                </Toolbar>
+            </AppBar>
+        </Dialog>
+    );
+}

src/component/Uploader/Uploader.js

@@ -6,9 +6,11 @@ import pathHelper from "../../utils/page";
 import { useLocation } from "react-router-dom";
 import { UploaderError } from "./core/errors";
 import { toggleSnackbar } from "../../actions";
+import TaskList from "./Popup/TaskList";
 
 export default function Uploader() {
-    const [uploadTasks, setUploadTasks] = useState([]);
+    const [uploaders, setUploaders] = useState([]);
+    const [taskListOpen, setTaskListOpen] = useState(false);
     const keywords = useSelector((state) => state.explorer.keywords);
     const policy = useSelector((state) => state.explorer.currentPolicy);
     const isLogin = useSelector((state) => state.viewUpdate.isLogin);
@@ -44,6 +46,9 @@ export default function Uploader() {
     };
 
     const selectFile = () => {
+        setTaskListOpen(true);
+        return;
+        // eslint-disable-next-line no-unreachable
         uploadManager
             .select(path)
             .catch((e) => {
@@ -59,19 +64,26 @@ export default function Uploader() {
                 }
             })
             .then((uploaders) => {
-                alert("success");
                 console.log(uploaders);
+                setTaskListOpen(true);
             });
     };
 
     return (
         <>
             {enableUploader && (
-                <UploadButton
-                    selectFile={selectFile}
-                    Queued={uploadTasks.length}
-                    openFileList={openFileList}
-                />
+                <>
+                    <UploadButton
+                        taskListOpen={taskListOpen}
+                        selectFile={selectFile}
+                        Queued={uploaders.length}
+                        openFileList={() => setTaskListOpen(true)}
+                    />
+                    <TaskList
+                        open={taskListOpen}
+                        onClose={() => setTaskListOpen(false)}
+                    />
+                </>
             )}
         </>
     );