diff --git a/src/component/FileManager/Explorer.js b/src/component/FileManager/Explorer.js
index 6e5bc2f..71424e4 100644
--- a/src/component/FileManager/Explorer.js
+++ b/src/component/FileManager/Explorer.js
@@ -1,7 +1,14 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import {navitateTo, changeContextMenu, navitateUp, setSelectedTarget, openRemoveDialog} from "../../actions/index";
+import {
+ navitateTo,
+ changeContextMenu,
+ navitateUp,
+ setSelectedTarget,
+ openRemoveDialog,
+ changeSortMethod, refreshFileList
+} from "../../actions/index";
import ObjectIcon from "./ObjectIcon";
import ContextMenu from "./ContextMenu";
import EmptyIcon from "@material-ui/icons/Unarchive";
@@ -25,6 +32,7 @@ import {
Button
} from "@material-ui/core";
import { GlobalHotKeys } from "react-hotkeys";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
const styles = theme => ({
paper: {
@@ -105,14 +113,25 @@ const styles = theme => ({
marginTop: "10px",
marginBottom: "10px"
},
- clickAway:{
+ clickAway: {
height: "100%",
- width: "100%",
+ width: "100%"
},
rootShare: {
height: "100%",
- minHeight: 500,
+ minHeight: 500
},
+ visuallyHidden: {
+ border: 0,
+ clip: "rect(0 0 0 0)",
+ height: 1,
+ margin: -1,
+ overflow: "hidden",
+ padding: 0,
+ position: "absolute",
+ top: 20,
+ width: 1
+ }
});
const mapStateToProps = state => {
@@ -127,7 +146,7 @@ const mapStateToProps = state => {
navigatorError: state.viewUpdate.navigatorError,
navigatorErrorMsg: state.viewUpdate.navigatorErrorMsg,
keywords: state.explorer.keywords,
- selected: state.explorer.selected,
+ selected: state.explorer.selected
};
};
@@ -146,43 +165,52 @@ const mapDispatchToProps = dispatch => {
setSelectedTarget: targets => {
dispatch(setSelectedTarget(targets));
},
- openRemoveDialog:()=>{
- dispatch(openRemoveDialog())
+ openRemoveDialog: () => {
+ dispatch(openRemoveDialog());
},
+ changeSort: method => {
+ dispatch(changeSortMethod(method));
+ }
};
};
class ExplorerCompoment extends Component {
+ constructor() {
+ super();
+ this.keyMap = {
+ DELETE_FILE: "del",
+ SELECT_ALL: "ctrl+a"
+ };
- constructor() {
- super();
- this.keyMap = {
- DELETE_FILE: "del",
- SELECT_ALL:"ctrl+a",
- };
-
- this.handlers = {
- DELETE_FILE: ()=>{
- if (this.props.selected.length > 0 && !this.props.share){
- this.props.openRemoveDialog();
- }
- },
- SELECT_ALL:(e)=>{
- e.preventDefault();
- if(this.props.selected.length >= this.props.dirList.length + this.props.fileList.length){
- this.props.setSelectedTarget([]);
- }else{
- this.props.setSelectedTarget([...this.props.dirList,...this.props.fileList]);
- }
-
- },
- };
- }
-
+ this.handlers = {
+ DELETE_FILE: () => {
+ if (this.props.selected.length > 0 && !this.props.share) {
+ this.props.openRemoveDialog();
+ }
+ },
+ SELECT_ALL: e => {
+ e.preventDefault();
+ if (
+ this.props.selected.length >=
+ this.props.dirList.length + this.props.fileList.length
+ ) {
+ this.props.setSelectedTarget([]);
+ } else {
+ this.props.setSelectedTarget([
+ ...this.props.dirList,
+ ...this.props.fileList
+ ]);
+ }
+ }
+ };
+ }
contextMenu = e => {
e.preventDefault();
- if (this.props.keywords === null && !pathHelper.isSharePage(this.props.location.pathname)) {
+ if (
+ this.props.keywords === null &&
+ !pathHelper.isSharePage(this.props.location.pathname)
+ ) {
if (!this.props.loading) {
this.props.changeContextMenu("empty", true);
}
@@ -193,9 +221,9 @@ class ExplorerCompoment extends Component {
this.away = 0;
}
- ClickAway = e =>{
+ ClickAway = e => {
let element = e.target;
- if (element.dataset.clickaway){
+ if (element.dataset.clickaway) {
this.props.setSelectedTarget([]);
}
};
@@ -205,7 +233,6 @@ class ExplorerCompoment extends Component {
const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
return (
-
-
-
+
+
{this.props.navigatorError && (
@@ -242,9 +269,8 @@ class ExplorerCompoment extends Component {
)}
-
{this.props.keywords === null &&
- isHomePage &&
+ isHomePage &&
this.props.dirList.length === 0 &&
this.props.fileList.length === 0 &&
!this.props.loading &&
@@ -276,7 +302,7 @@ class ExplorerCompoment extends Component {
)}
-
+
{this.props.viewMethod !== "list" &&
(this.props.dirList.length !== 0 ||
this.props.fileList.length !== 0) &&
@@ -352,7 +378,7 @@ class ExplorerCompoment extends Component {
)}
)}
-
+
{this.props.viewMethod === "list" &&
(this.props.dirList.length !== 0 ||
this.props.fileList.length !== 0) &&
@@ -360,20 +386,141 @@ class ExplorerCompoment extends Component {
- 名称
-
- 大小
+
+ {
+ this.props.changeSort(
+ this.props.sortMethod ===
+ "namePos"
+ ? "nameRev"
+ : "namePos"
+ );
+ }}
+ >
+ 名称
+ {this.props.sortMethod ===
+ "namePos" ||
+ this.props.sortMethod ===
+ "nameRev" ? (
+
+ {this.props.sortMethod ===
+ "nameRev"
+ ? "sorted descending"
+ : "sorted ascending"}
+
+ ) : null}
+
- 日期
+ {
+ this.props.changeSort(
+ this.props.sortMethod ===
+ "sizePos"
+ ? "sizeRes"
+ : "sizePos"
+ );
+ }}
+ >
+ 大小
+ {this.props.sortMethod ===
+ "sizePos" ||
+ this.props.sortMethod ===
+ "sizeRes" ? (
+
+ {this.props.sortMethod ===
+ "sizeRes"
+ ? "sorted descending"
+ : "sorted ascending"}
+
+ ) : null}
+
+
+
+ {
+ this.props.changeSort(
+ this.props.sortMethod ===
+ "timePos"
+ ? "timeRev"
+ : "timePos"
+ );
+ }}
+ >
+ 日期
+ {this.props.sortMethod ===
+ "timePos" ||
+ this.props.sortMethod ===
+ "timeRev" ? (
+
+ {this.props.sortMethod ===
+ "sizeRes"
+ ? "sorted descending"
+ : "sorted ascending"}
+
+ ) : null}
+
- {pathHelper.isMobile() && this.props.path!=="/" &&}
+ {pathHelper.isMobile() &&
+ this.props.path !== "/" && (
+
+ )}
{this.props.dirList.map((value, index) => (
))}
@@ -384,7 +531,6 @@ class ExplorerCompoment extends Component {
)}
-
);
}
}
diff --git a/src/component/FileManager/FileManager.js b/src/component/FileManager/FileManager.js
index c4d76ff..7403d20 100644
--- a/src/component/FileManager/FileManager.js
+++ b/src/component/FileManager/FileManager.js
@@ -10,7 +10,7 @@ import {decode} from "../../untils/index"
import { withStyles } from '@material-ui/core';
import {connect} from "react-redux";
import {
- changeSubTitle, closeAllModals, setSelectedTarget, toggleSnackbar,
+ changeSubTitle, closeAllModals, navitateTo, setSelectedTarget, toggleSnackbar,
} from "../../actions";
import {withRouter} from "react-router-dom";
const styles = theme => ({
@@ -35,6 +35,9 @@ const mapDispatchToProps = dispatch => {
closeAllModals: () => {
dispatch(closeAllModals());
},
+ navitateTo:path=>{
+ dispatch(navitateTo(path));
+ },
};
};
@@ -50,6 +53,7 @@ class FileManager extends Component {
componentWillUnmount() {
this.props.setSelectedTarget([]);
+ this.props.navitateTo("/");
this.props.closeAllModals();
}
diff --git a/src/component/FileManager/Navigator/Navigator.js b/src/component/FileManager/Navigator/Navigator.js
index 1f2ea3b..07ddacb 100644
--- a/src/component/FileManager/Navigator/Navigator.js
+++ b/src/component/FileManager/Navigator/Navigator.js
@@ -363,7 +363,6 @@ class NavigatorComponent extends Component {
};
this.props.changeSort(optionsTable[index]);
this.handleClose();
- this.props.refreshFileList();
};
render() {
diff --git a/src/reducers/index.js b/src/reducers/index.js
index d484146..9074b26 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -49,10 +49,41 @@ const cloudreveApp = (state = [], action) => {
}),
});
case 'CHANGE_SORT_METHOD':
+ let list = [...state.explorer.fileList,...state.explorer.dirList];
+ // eslint-disable-next-line
+ list.sort((a,b)=>{
+ switch (action.method) {
+ case "sizePos":
+ return a.size-b.size;
+ case "sizeRes":
+ return b.size-a.size;
+ case 'namePos':
+ return a.name.localeCompare(b.name);
+ case 'nameRev':
+ return b.name.localeCompare(a.name);
+ case 'timePos':
+ return Date.parse(a.date)-Date.parse(b.date);
+ case 'timeRev':
+ return Date.parse(b.date)-Date.parse(a.date);
+ default:
+ break;
+ }
+ })
+ var dirList = list.filter(function (x) {
+ return x.type === "dir";
+ });
+ var fileList = list.filter(function (x) {
+ return x.type === "file";
+ });
+
return Object.assign({}, state, {
viewUpdate: Object.assign({}, state.viewUpdate, {
sortMethod:action.method,
}),
+ explorer: Object.assign({}, state.explorer, {
+ fileList: fileList,
+ dirList: dirList,
+ }),
});
case 'CHANGE_CONTEXT_MENU':
if(state.viewUpdate.contextOpen && action.open){