From 3a2eb732686a00c47abbd8b3c3111b3249431d43 Mon Sep 17 00:00:00 2001 From: ShawnYuan Date: Wed, 30 Aug 2023 11:37:33 +0800 Subject: [PATCH 1/3] feat: extract component `Sort` --- src/component/FileManager/Sort.js | 74 +++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/component/FileManager/Sort.js diff --git a/src/component/FileManager/Sort.js b/src/component/FileManager/Sort.js new file mode 100644 index 00000000..01788e67 --- /dev/null +++ b/src/component/FileManager/Sort.js @@ -0,0 +1,74 @@ +import React, { useState } from "react"; +import { IconButton, Menu, MenuItem } from "@material-ui/core"; +import TextTotateVerticalIcon from "@material-ui/icons/TextRotateVertical"; +import { useTranslation } from "react-i18next"; + +const SORT_TYPE = { + namePos: "namePos", + nameRev: "nameRev", + timePos: "timePos", + timeRev: "timeRev", + modifyTimePos: "modifyTimePos", + modifyTimeRev: "modifyTimeRev", + sizePos: "sizePos", + sizeRes: "sizeRes", +} + +const SORT_OPTIONS = [ + { value: SORT_TYPE.namePos, label: "A-Z" }, + { value: SORT_TYPE.nameRev, label: "Z-A" }, + { value: SORT_TYPE.timePos, label: "oldestUploaded" }, + { value: SORT_TYPE.timeRev, label: "newestUploaded" }, + { value: SORT_TYPE.modifyTimePos, label: "oldestModified" }, + { value: SORT_TYPE.modifyTimeRev, label: "newestModified" }, + { value: SORT_TYPE.sizePos, label: "smallest" }, + { value: SORT_TYPE.sizeRes, label: "largest" }, +] + +export default function Sort({ value, onChange, isSmall, inherit, className }) { + const { t } = useTranslation("application", { keyPrefix: "fileManager.sortMethods" }); + + const [anchorSort, setAnchorSort] = useState(false); + function showSortOptions(e) { + setAnchorSort(e.currentTarget); + } + + const [sortBy, setSortBy] = useState(value in SORT_TYPE ? value : '') + function onChangeSort(value) { + setSortBy(value) + onChange(value) + setAnchorSort(false); + } + return ( + <> + + + + setAnchorSort(null)} + > + { + SORT_OPTIONS.map((option, index) => ( + onChangeSort(option.value)} + > + {t(option.label)} + + )) + } + + + ) +} From 8d6cfeaae94b0ee160c1a283cf2ad33d040b3b1a Mon Sep 17 00:00:00 2001 From: ShawnYuan Date: Wed, 30 Aug 2023 11:42:23 +0800 Subject: [PATCH 2/3] feat: add sorting feature to `PathSelector` --- src/component/FileManager/PathSelector.js | 89 +++++++++++++++++------ 1 file changed, 66 insertions(+), 23 deletions(-) diff --git a/src/component/FileManager/PathSelector.js b/src/component/FileManager/PathSelector.js index 8946c37f..d9d998ef 100644 --- a/src/component/FileManager/PathSelector.js +++ b/src/component/FileManager/PathSelector.js @@ -15,9 +15,11 @@ import { MenuList, withStyles, } from "@material-ui/core"; +import Sort from './Sort'; import API from "../../middleware/Api"; import { toggleSnackbar } from "../../redux/explorer"; import { withTranslation } from "react-i18next"; +import { sortMethodFuncs } from "../../redux/explorer/action"; const mapStateToProps = (state) => { return { @@ -53,14 +55,27 @@ const styles = (theme) => ({ maxHeight: "330px", overflowY: " auto", }, + sortWrapper: { + textAlign: "right", + paddingRight: "30px", + }, + sortButton: { + padding: "0", + }, }); - class PathSelectorCompoment extends Component { state = { presentPath: "/", + sortBy: '', dirList: [], selectedTarget: null, }; + /** + * the source dir list from api `/directory` + * + * `state.dirList` is a sorted copy of it + */ + sourceDirList = [] componentDidMount = () => { const toBeLoad = this.props.presentPath; @@ -93,31 +108,11 @@ class PathSelectorCompoment extends Component { dirList.forEach((value) => { value.displayName = value.name; }); - if (toBeLoad === "/") { - dirList.unshift({ name: "/", path: "", displayName: "/" }); - } else { - let path = toBeLoad; - let name = toBeLoad; - const displayNames = ["fileManager.currentFolder", "fileManager.backToParentFolder"]; - for (let i = 0; i < 2; i++) { - const paths = path.split("/"); - name = paths.pop(); - name = name === "" ? "/" : name; - path = paths.join("/"); - dirList.unshift({ - name: name, - path: path, - displayName: this.props.t( - displayNames[i] - ), - }); - } - } + this.sourceDirList = dirList this.setState({ presentPath: toBeLoad, - dirList: dirList, selectedTarget: null, - }); + }, this.updateDirList); }) .catch((error) => { this.props.toggleSnackbar( @@ -134,6 +129,51 @@ class PathSelectorCompoment extends Component { this.props.onSelect(this.state.dirList[index]); }; + + /** + * change sort type + * @param {Event} event + */ + onChangeSort = (sortBy) => { + this.setState({ sortBy }, this.updateDirList) + }; + + /** + * sort dir list, and handle parent dirs + */ + updateDirList = () => { + const { state, sourceDirList } = this + const { sortBy, presentPath } = state + + // copy + const dirList = [...sourceDirList] + // sort + const sortMethod = sortMethodFuncs[sortBy] + if (sortMethod) dirList.sort(sortMethod) + + // add root/parent dirs to top + if (presentPath === "/") { + dirList.unshift({ name: "/", path: "", displayName: "/" }); + } else { + let path = presentPath; + let name = presentPath; + const displayNames = ["fileManager.currentFolder", "fileManager.backToParentFolder"]; + for (let i = 0; i < 2; i++) { + const paths = path.split("/"); + name = paths.pop(); + name = name === "" ? "/" : name; + path = paths.join("/"); + dirList.unshift({ + name: name, + path: path, + displayName: this.props.t( + displayNames[i] + ), + }); + } + } + this.setState({ dirList }) + } render() { const { classes, t } = this.props; @@ -157,6 +197,9 @@ class PathSelectorCompoment extends Component { return (
+
+ +
{this.state.dirList.map((value, index) => ( Date: Wed, 30 Aug 2023 11:45:22 +0800 Subject: [PATCH 3/3] feat: replace sort action with compoent `Sort` --- .../FileManager/Navigator/SubActions.js | 66 +++---------------- 1 file changed, 10 insertions(+), 56 deletions(-) diff --git a/src/component/FileManager/Navigator/SubActions.js b/src/component/FileManager/Navigator/SubActions.js index 4d648bea..5890e915 100644 --- a/src/component/FileManager/Navigator/SubActions.js +++ b/src/component/FileManager/Navigator/SubActions.js @@ -3,7 +3,6 @@ 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 DownloadIcon from "@material-ui/icons/CloudDownload"; import Avatar from "@material-ui/core/Avatar"; import { useDispatch, useSelector } from "react-redux"; @@ -14,6 +13,7 @@ import { FormatPageBreak } from "mdi-material-ui"; import pathHelper from "../../../utils/page"; import { changePageSize } from "../../../redux/viewUpdate/action"; import { useTranslation } from "react-i18next"; +import Sort from "../Sort"; const useStyles = makeStyles((theme) => ({ sideButton: { @@ -22,17 +22,6 @@ const useStyles = makeStyles((theme) => ({ }, })); -const sortOptions = [ - "A-Z", - "Z-A", - "oldestUploaded", - "newestUploaded", - "oldestModified", - "newestModified", - "smallest", - "largest", -]; - const paginationOption = ["50", "100", "200", "500", "1000"]; export default function SubActions({ isSmall, inherit }) { @@ -63,29 +52,14 @@ export default function SubActions({ isSmall, inherit }) { const ChangePageSize = useCallback((e) => dispatch(changePageSize(e)), [ dispatch, ]); - const [anchorSort, setAnchorSort] = useState(null); const [anchorPagination, setAnchorPagination] = useState(null); - const [selectedIndex, setSelectedIndex] = useState(0); - const showSortOptions = (e) => { - setAnchorSort(e.currentTarget); - }; const showPaginationOptions = (e) => { setAnchorPagination(e.currentTarget); }; - const handleMenuItemClick = (e, index) => { - setSelectedIndex(index); - const optionsTable = { - 0: "namePos", - 1: "nameRev", - 2: "timePos", - 3: "timeRev", - 4: "modifyTimePos", - 5: "modifyTimeRev", - 6: "sizePos", - 7: "sizeRes", - }; - ChangeSortMethod(optionsTable[index]); - setAnchorSort(null); + + /** change sort */ + const onChangeSort = (value) => { + ChangeSortMethod(value); }; const handlePaginationChange = (s) => { ChangePageSize(s); @@ -181,32 +155,12 @@ export default function SubActions({ isSmall, inherit }) { - - - - setAnchorSort(null)} - > - {sortOptions.map((option, index) => ( - handleMenuItemClick(event, index)} - > - {t("sortMethods." + option)} - - ))} - + onChange={onChangeSort} + /> {share && (