init

2024-02-25 08:27:01 +08:00
commit 20c1fa08dc
279 changed files with 78489 additions and 0 deletions
--- a/src/component/FileManager/Folder.js
+++ b/src/component/FileManager/Folder.js
@@ -0,0 +1,128 @@
+import React from "react";
+import FolderIcon from "@material-ui/icons/Folder";
+import classNames from "classnames";
+import {
+    ButtonBase,
+    fade,
+    makeStyles,
+    Tooltip,
+    Typography,
+} from "@material-ui/core";
+import { useSelector } from "react-redux";
+import statusHelper from "../../utils/page";
+import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
+
+const useStyles = makeStyles((theme) => ({
+    container: {
+        padding: "7px",
+    },
+
+    selected: {
+        "&:hover": {
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: fade(
+            theme.palette.primary.main,
+            theme.palette.type === "dark" ? 0.3 : 0.18
+        ),
+    },
+
+    notSelected: {
+        "&:hover": {
+            backgroundColor: theme.palette.background.default,
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: theme.palette.background.paper,
+    },
+
+    button: {
+        height: "50px",
+        border: "1px solid " + theme.palette.divider,
+        width: "100%",
+        borderRadius: theme.shape.borderRadius,
+        boxSizing: "border-box",
+        transition:
+            "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        display: "flex",
+        justifyContent: "left",
+        alignItems: "initial",
+    },
+    icon: {
+        margin: "10px 10px 10px 16px",
+        height: "30px",
+        minWidth: "30px",
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: "90%",
+        paddingTop: "3px",
+        color: theme.palette.text.secondary,
+    },
+    folderNameSelected: {
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        fontWeight: "500",
+    },
+    folderNameNotSelected: {
+        color: theme.palette.text.secondary,
+    },
+    folderName: {
+        marginTop: "15px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        marginRight: "20px",
+    },
+    active: {
+        boxShadow: "0 0 0 2px " + theme.palette.primary.light,
+    },
+    checkIcon: {
+        color: theme.palette.primary.main,
+    },
+}));
+
+export default function Folder({ folder, isActive, onIconClick }) {
+    const selected = useSelector((state) => state.explorer.selected);
+    const classes = useStyles();
+    const isMobile = statusHelper.isMobile();
+    const isSelected =
+        selected.findIndex((value) => {
+            return value === folder;
+        }) !== -1;
+
+    return (
+        <ButtonBase
+            focusRipple
+            className={classNames(
+                {
+                    [classes.selected]: isSelected,
+                    [classes.notSelected]: !isSelected,
+                    [classes.active]: isActive,
+                },
+                classes.button
+            )}
+        >
+            <div
+                onClick={onIconClick}
+                className={classNames(classes.icon, {
+                    [classes.iconSelected]: isSelected,
+                    [classes.iconNotSelected]: !isSelected,
+                })}
+            >
+                {!isSelected && <FolderIcon />}
+                {isSelected && (
+                    <CheckCircleRoundedIcon className={classes.checkIcon} />
+                )}
+            </div>
+            <Tooltip title={folder.name} aria-label={folder.name}>
+                <Typography
+                    variant="body2"
+                    className={classNames(classes.folderName, {
+                        [classes.folderNameSelected]: isSelected,
+                        [classes.folderNameNotSelected]: !isSelected,
+                    })}
+                >
+                    {folder.name}
+                </Typography>
+            </Tooltip>
+        </ButtonBase>
+    );
+}