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){