From 860272029344ea642e746cd0b47c2b1cd79784cf Mon Sep 17 00:00:00 2001
From: ShawnYuan <ysh83737@hotmail.com>
Date: Wed, 30 Aug 2023 14:27:57 +0800
Subject: [PATCH] feat: extract component `Sort`

---
 src/component/FileManager/Sort.tsx | 74 ++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/component/FileManager/Sort.tsx

diff --git a/src/component/FileManager/Sort.tsx b/src/component/FileManager/Sort.tsx
new file mode 100644
index 0000000..27f5331
--- /dev/null
+++ b/src/component/FileManager/Sort.tsx
@@ -0,0 +1,74 @@
+import React, { MouseEventHandler, useState } from "react";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import TextTotateVerticalIcon from "@material-ui/icons/TextRotateVertical";
+import { useTranslation } from "react-i18next";
+
+enum 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<Element | null>(null);
+    const showSortOptions: MouseEventHandler<HTMLButtonElement> = (e) => {
+        setAnchorSort(e.currentTarget);
+    }
+    
+    const [sortBy, setSortBy] = useState<SORT_TYPE>(value in SORT_TYPE ? value : '')
+    function onChangeSort(value: SORT_TYPE) {
+        setSortBy(value)
+        onChange(value)
+        setAnchorSort(null);
+    }
+    return (
+        <>
+            <IconButton
+                title={t("sortMethod")}
+                className={className}
+                onClick={showSortOptions}
+                color={inherit ? "inherit" : "default"}
+            >
+                <TextTotateVerticalIcon
+                    fontSize={isSmall ? "small" : "default"}
+                />
+            </IconButton>
+            <Menu
+                id="sort-menu"
+                anchorEl={anchorSort}
+                open={Boolean(anchorSort)}
+                onClose={() => setAnchorSort(null)}
+            >
+                {
+                    SORT_OPTIONS.map((option, index) => (
+                        <MenuItem
+                            key={index}
+                            selected={option.value === sortBy}
+                            onClick={() => onChangeSort(option.value)}
+                        >
+                            {t(option.label)}
+                        </MenuItem>
+                    ))
+                }
+            </Menu>
+        </>
+    )
+}