Refactor: extracted sub buttons in file explorer into separate component

src/component/FileManager/DnD/DragLayer.js

@@ -32,8 +32,7 @@ function getItemStyles(
     const transform = `translate(${x}px, ${y}px)`;
     return {
         transform,
-        WebkitTransform: transform,
-        opacity: 0.5
+        WebkitTransform: transform
     };
 }
 const CustomDragLayer = props => {

src/component/FileManager/DnD/Preview.js

@@ -19,7 +19,7 @@ const diliverIcon = (object, viewMethod, classes) => {
     if (object.type === "dir") {
         return (
             <div className={classes.dragging}>
-                <Folder folder={object} />
+                <SmallIcon file={object} isFolder />
             </div>
         );
     }

src/component/FileManager/Navigator/Navigator.js

@@ -3,17 +3,12 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import RightIcon from "@material-ui/icons/KeyboardArrowRight";
-import ViewListIcon from "@material-ui/icons/ViewList";
-import ViewModuleIcon from "@material-ui/icons/ViewModule";
-import ViewSmallIcon from "@material-ui/icons/ViewComfy";
-import TextTotateVerticalIcon from "@material-ui/icons/TextRotateVertical";
 import ShareIcon from "@material-ui/icons/Share";
 import NewFolderIcon from "@material-ui/icons/CreateNewFolder";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import {
     navigateTo,
     navigateUp,
-    changeViewMethod,
     setNavigatorError,
     setNavigatorLoadingStatus,
     refreshFileList,
@@ -21,8 +16,6 @@ import {
     openCreateFolderDialog,
     openShareDialog,
     drawerToggleAction,
-    setShareUserPopover,
-    openResaveDialog,
     openCompressDialog
 } from "../../../actions/index";
 import explorer from "../../../redux/explorer";
@@ -33,8 +26,7 @@ import {
     Divider,
     Menu,
     MenuItem,
-    ListItemIcon,
-    IconButton
+    ListItemIcon
 } from "@material-ui/core";
 import PathButton from "./PathButton";
 import DropDown from "./DropDown";
@@ -45,6 +37,7 @@ import Avatar from "@material-ui/core/Avatar";
 import { Archive } from "@material-ui/icons";
 import { FilePlus } from "mdi-material-ui";
 import { openCreateFileDialog } from "../../../actions";
+import SubActions from "./SubActions";
 
 const mapStateToProps = state => {
     return {
@@ -65,12 +58,6 @@ const mapDispatchToProps = dispatch => {
         navigateUp: () => {
             dispatch(navigateUp());
         },
-        changeView: method => {
-            dispatch(changeViewMethod(method));
-        },
-        changeSort: method => {
-            dispatch(explorer.actions.changeSortMethod(method));
-        },
         setNavigatorError: (status, msg) => {
             dispatch(setNavigatorError(status, msg));
         },
@@ -98,12 +85,6 @@ const mapDispatchToProps = dispatch => {
         handleDesktopToggle: open => {
             dispatch(drawerToggleAction(open));
         },
-        setShareUserPopover: e => {
-            dispatch(setShareUserPopover(e));
-        },
-        openResave: key => {
-            dispatch(openResaveDialog(key));
-        },
         openCompressDialog: () => {
             dispatch(openCompressDialog());
         }
@@ -112,15 +93,6 @@ const mapDispatchToProps = dispatch => {
 
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
 
-const sortOptions = [
-    "文件名称正序",
-    "文件名称倒序",
-    "上传时间正序",
-    "上传时间倒序",
-    "文件大小正序",
-    "文件大小倒序"
-];
-
 const styles = theme => ({
     container: {
         [theme.breakpoints.down("xs")]: {
@@ -151,10 +123,6 @@ const styles = theme => ({
     expandMore: {
         color: "#8d8d8d"
     },
-    sideButton: {
-        padding: "8px",
-        marginRight: "5px"
-    },
     roundBorder: {
         borderRadius: "4px 4px 0 0"
     }
@@ -170,9 +138,7 @@ class NavigatorComponent extends Component {
         folders: [],
         anchorEl: null,
         hiddenMode: false,
-        anchorHidden: null,
-        anchorSort: null,
-        selectedIndex: 0
+        anchorHidden: null
     };
 
     constructor(props) {
@@ -318,10 +284,6 @@ class NavigatorComponent extends Component {
         this.setState({ anchorHidden: e.currentTarget });
     };
 
-    showSortOptions = e => {
-        this.setState({ anchorSort: e.currentTarget });
-    };
-
     performAction = e => {
         this.handleClose();
         if (e === "refresh") {
@@ -358,31 +320,6 @@ class NavigatorComponent extends Component {
         }
     };
 
-    toggleViewMethod = () => {
-        const newMethod =
-            this.props.viewMethod === "icon"
-                ? "list"
-                : this.props.viewMethod === "list"
-                ? "smallIcon"
-                : "icon";
-        Auth.SetPreference("view_method", newMethod);
-        this.props.changeView(newMethod);
-    };
-
-    handleMenuItemClick = (e, index) => {
-        this.setState({ selectedIndex: index, anchorEl: null });
-        const optionsTable = {
-            0: "namePos",
-            1: "nameRev",
-            2: "timePos",
-            3: "timeRev",
-            4: "sizePos",
-            5: "sizeRes"
-        };
-        this.props.changeSort(optionsTable[index]);
-        this.handleClose();
-    };
-
     render() {
         const { classes } = this.props;
         const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
@@ -540,86 +477,7 @@ class NavigatorComponent extends Component {
                             ))}
                     </div>
                     <div className={classes.optionContainer}>
-                        {this.props.viewMethod === "icon" && (
-                            <IconButton
-                                title="列表展示"
-                                className={classes.sideButton}
-                                onClick={this.toggleViewMethod}
-                            >
-                                <ViewListIcon fontSize="small" />
-                            </IconButton>
-                        )}
-                        {this.props.viewMethod === "list" && (
-                            <IconButton
-                                title="小图标展示"
-                                className={classes.sideButton}
-                                onClick={this.toggleViewMethod}
-                            >
-                                <ViewSmallIcon fontSize="small" />
-                            </IconButton>
-                        )}
-                        {this.props.viewMethod === "smallIcon" && (
-                            <IconButton
-                                title="大图标展示"
-                                className={classes.sideButton}
-                                onClick={this.toggleViewMethod}
-                            >
-                                <ViewModuleIcon fontSize="small" />
-                            </IconButton>
-                        )}
-
-                        <IconButton
-                            title="排序方式"
-                            className={classes.sideButton}
-                            onClick={this.showSortOptions}
-                        >
-                            <TextTotateVerticalIcon fontSize="small" />
-                        </IconButton>
-                        <Menu
-                            id="sort-menu"
-                            anchorEl={this.state.anchorSort}
-                            open={Boolean(this.state.anchorSort)}
-                            onClose={this.handleClose}
-                        >
-                            {sortOptions.map((option, index) => (
-                                <MenuItem
-                                    key={option}
-                                    selected={
-                                        index === this.state.selectedIndex
-                                    }
-                                    onClick={event =>
-                                        this.handleMenuItemClick(event, index)
-                                    }
-                                >
-                                    {option}
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                        {this.props.share && (
-                            <IconButton
-                                title={
-                                    "由 " +
-                                    this.props.share.creator.nick +
-                                    " 创建"
-                                }
-                                className={classes.sideButton}
-                                onClick={e =>
-                                    this.props.setShareUserPopover(
-                                        e.currentTarget
-                                    )
-                                }
-                                style={{ padding: 5 }}
-                            >
-                                <Avatar
-                                    style={{ height: 23, width: 23 }}
-                                    src={
-                                        "/api/v3/user/avatar/" +
-                                        this.props.share.creator.key +
-                                        "/s"
-                                    }
-                                />
-                            </IconButton>
-                        )}
+                        <SubActions isSmall share={this.props.share} />
                     </div>
                 </div>
                 <Divider />

src/component/FileManager/Navigator/SubActions.js

@@ -0,0 +1,141 @@
+import React, { useCallback, useState } from "react";
+import { IconButton, makeStyles, Menu, MenuItem } from "@material-ui/core";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import ViewSmallIcon from "@material-ui/icons/ViewComfy";
+import ViewModuleIcon from "@material-ui/icons/ViewModule";
+import TextTotateVerticalIcon from "@material-ui/icons/TextRotateVertical";
+import Avatar from "@material-ui/core/Avatar";
+import { useDispatch, useSelector } from "react-redux";
+import Auth from "../../../middleware/Auth";
+import { changeViewMethod, setShareUserPopover } from "../../../actions";
+import { changeSortMethod } from "../../../redux/explorer/action";
+
+const useStyles = makeStyles(theme => ({
+    sideButton: {
+        padding: "8px",
+        marginRight: "5px"
+    }
+}));
+
+const sortOptions = ["A-Z", "Z-A", "最早", "最新", "最小", "最大"];
+
+export default function SubActions({ isSmall, share }) {
+    const dispatch = useDispatch();
+    const viewMethod = useSelector(
+        state => state.viewUpdate.explorerViewMethod
+    );
+    const OpenLoadingDialog = useCallback(
+        method => dispatch(changeViewMethod(method)),
+        [dispatch]
+    );
+    const ChangeSortMethod = useCallback(
+        method => dispatch(changeSortMethod(method)),
+        [dispatch]
+    );
+    const SetShareUserPopover = useCallback(
+        e => dispatch(setShareUserPopover(e)),
+        [dispatch]
+    );
+    const [anchorSort, setAnchorSort] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const showSortOptions = e => {
+        setAnchorSort(e.currentTarget);
+    };
+    const handleMenuItemClick = (e, index) => {
+        setSelectedIndex(index);
+        const optionsTable = {
+            0: "namePos",
+            1: "nameRev",
+            2: "timePos",
+            3: "timeRev",
+            4: "sizePos",
+            5: "sizeRes"
+        };
+        ChangeSortMethod(optionsTable[index]);
+        setAnchorSort(null);
+    };
+
+    const toggleViewMethod = () => {
+        const newMethod =
+            viewMethod === "icon"
+                ? "list"
+                : viewMethod === "list"
+                ? "smallIcon"
+                : "icon";
+        Auth.SetPreference("view_method", newMethod);
+        OpenLoadingDialog(newMethod);
+    };
+
+    const classes = useStyles();
+    return (
+        <>
+            {viewMethod === "icon" && (
+                <IconButton
+                    title="列表展示"
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                >
+                    <ViewListIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+            {viewMethod === "list" && (
+                <IconButton
+                    title="小图标展示"
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                >
+                    <ViewSmallIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+
+            {viewMethod === "smallIcon" && (
+                <IconButton
+                    title="大图标展示"
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                >
+                    <ViewModuleIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+
+            <IconButton
+                title="排序方式"
+                className={classes.sideButton}
+                onClick={showSortOptions}
+            >
+                <TextTotateVerticalIcon
+                    fontSize={isSmall ? "small" : "default"}
+                />
+            </IconButton>
+            <Menu
+                id="sort-menu"
+                anchorEl={anchorSort}
+                open={Boolean(anchorSort)}
+                onClose={() => setAnchorSort(null)}
+            >
+                {sortOptions.map((option, index) => (
+                    <MenuItem
+                        key={option}
+                        selected={index === selectedIndex}
+                        onClick={event => handleMenuItemClick(event, index)}
+                    >
+                        {option}
+                    </MenuItem>
+                ))}
+            </Menu>
+            {share && (
+                <IconButton
+                    title={"由 " + share.creator.nick + " 创建"}
+                    className={classes.sideButton}
+                    onClick={e => SetShareUserPopover(e.currentTarget)}
+                    style={{ padding: 5 }}
+                >
+                    <Avatar
+                        style={{ height: 23, width: 23 }}
+                        src={"/api/v3/user/avatar/" + share.creator.key + "/s"}
+                    />
+                </IconButton>
+            )}
+        </>
+    );
+}

src/component/FileManager/SmallIcon.js

@@ -14,6 +14,7 @@ import { lighten } from "@material-ui/core/styles";
 import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
 import statusHelper from "../../utils/page";
 import Grow from "@material-ui/core/Grow";
+import { Folder } from "@material-ui/icons";
 
 const styles = theme => ({
     container: {
@@ -118,7 +119,12 @@ class SmallIconCompoment extends Component {
                     })}
                 >
                     {(!isSelected || !isMobile) && (
-                        <TypeIcon fileName={this.props.file.name} />
+                        <>
+                            {this.props.isFolder && <Folder />}
+                            {!this.props.isFolder && (
+                                <TypeIcon fileName={this.props.file.name} />
+                            )}
+                        </>
                     )}
                     {isSelected && isMobile && (
                         <Grow in={isSelected && isMobile}>