click-away / 修复图像预览排序

src/component/FileManager/Explorer.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { navitateTo, changeContextMenu, navitateUp } from "../../actions/index";
+import {navitateTo, changeContextMenu, navitateUp, setSelectedTarget} from "../../actions/index";
 import ObjectIcon from "./ObjectIcon";
 import ContextMenu from "./ContextMenu";
 import EmptyIcon from "@material-ui/icons/Unarchive";
@@ -103,7 +103,11 @@ const styles = theme => ({
         marginLeft: "20px",
         marginTop: "10px",
         marginBottom: "10px"
-    }
+    },
+    clickAway:{
+        height: "100%",
+        width: "100%",
+    },
 });
 
 const mapStateToProps = state => {
@@ -117,7 +121,8 @@ const mapStateToProps = state => {
         loading: state.viewUpdate.navigatorLoading,
         navigatorError: state.viewUpdate.navigatorError,
         navigatorErrorMsg: state.viewUpdate.navigatorErrorMsg,
-        keywords: state.explorer.keywords
+        keywords: state.explorer.keywords,
+        selected: state.explorer.selected,
     };
 };
 
@@ -132,7 +137,10 @@ const mapDispatchToProps = dispatch => {
         },
         navitateUp: () => {
             dispatch(navitateUp());
-        }
+        },
+        setSelectedTarget: targets => {
+            dispatch(setSelectedTarget(targets));
+        },
     };
 };
 
@@ -147,6 +155,17 @@ class ExplorerCompoment extends Component {
         }
     };
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        this.away = 0;
+    }
+
+    ClickAway = e =>{
+        let element = e.target;
+        if (element.dataset.clickaway){
+            this.props.setSelectedTarget([]);
+        }
+    };
+
     render() {
         const { classes } = this.props;
 
@@ -154,6 +173,8 @@ class ExplorerCompoment extends Component {
             
             <div
                 onContextMenu={this.contextMenu}
+                onClick={this.ClickAway}
+                data-clickAway={"true"}
                 className={classNames(
                     {
                         [classes.root]: this.props.viewMethod !== "list",
@@ -240,12 +261,14 @@ class ExplorerCompoment extends Component {
                                 !this.props.loading && (
                                     <div>
                                         <Typography
+                                            data-clickAway={"true"}
                                             variant="body2"
                                             className={classes.typeHeader}
                                         >
                                             文件夹
                                         </Typography>
                                         <Grid
+                                            data-clickAway={"true"}
                                             container
                                             spacing={0}
                                             alignItems="flex-start"
@@ -272,12 +295,14 @@ class ExplorerCompoment extends Component {
                                 !this.props.loading && (
                                     <div>
                                         <Typography
+                                            data-clickAway={"true"}
                                             variant="body2"
                                             className={classes.typeHeader}
                                         >
                                             文件
                                         </Typography>
                                         <Grid
+                                            data-clickAway={"true"}
                                             container
                                             spacing={0}
                                             alignItems="flex-start"

src/component/FileManager/ImgPreview.js

@@ -34,15 +34,14 @@ class ImgPreviewCompoment extends Component {
 
     componentWillReceiveProps = nextProps => {
         let items = [];
+        let firstOne = 0;
         if (nextProps.first !== null) {
-            var firstOne;
             // eslint-disable-next-line
             nextProps.other.map(value => {
                 let fileType = value.name
                     .split(".")
                     .pop()
                     .toLowerCase();
-
                 if (imgPreviewSuffix.indexOf(fileType) !== -1) {
                     let newImg = {
                         title: value.name,
@@ -57,14 +56,13 @@ class ImgPreviewCompoment extends Component {
                         value.path === nextProps.first.path &&
                         value.name === nextProps.first.name
                     ) {
-                        firstOne = newImg;
-                    } else {
-                        items.push(newImg);
+                        firstOne = items.length;
                     }
+                    items.push(newImg);
                 }
             });
-            items.unshift(firstOne);
             this.setState({
+                photoIndex:firstOne,
                 items: items,
                 isOpen: true
             });

src/component/FileManager/ObjectIcon.js

@@ -26,6 +26,7 @@ import DropWarpper from "./DnD/DropWarpper"
 import {
     useLocation
   } from "react-router-dom";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 const useStyles = makeStyles(theme => ({
     container: {
@@ -215,7 +216,7 @@ export default function ObjectIcon(props) {
             const dropResult = monitor.getDropResult();
             if (item && dropResult) {
                 if (dropResult.folder){
-                    if (item.object.id != dropResult.folder.id || item.object.type != dropResult.folder.type){
+                    if (item.object.id !== dropResult.folder.id || item.object.type !== dropResult.folder.type){
                         DragAndDrop(item.object,dropResult.folder);
                     }
                 }