From 7f5148d490d0a847a389da976ae1ab4d7bd69507 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 1 Feb 2024 21:56:08 +0800 Subject: [PATCH] chore: clean dropdown --- web/src/components/Settings/MemberSection.tsx | 32 ++-------- web/src/components/Settings/SSOSection.tsx | 34 ++++------ .../components/Settings/StorageSection.tsx | 31 +++------ web/src/components/kit/Dropdown.tsx | 64 ------------------- web/src/less/common/date-picker.less | 50 --------------- 5 files changed, 30 insertions(+), 181 deletions(-) delete mode 100644 web/src/components/kit/Dropdown.tsx delete mode 100644 web/src/less/common/date-picker.less diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx index 5e676e023..2bdc2824a 100644 --- a/web/src/components/Settings/MemberSection.tsx +++ b/web/src/components/Settings/MemberSection.tsx @@ -1,4 +1,4 @@ -import { Button, Dropdown, Input, Menu, MenuButton, Radio, RadioGroup } from "@mui/joy"; +import { Button, Dropdown, Input, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy"; import { sortBy } from "lodash-es"; import React, { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -217,34 +217,16 @@ const MemberSection = () => { - - + {user.rowStatus === RowStatus.ACTIVE ? ( - + handleArchiveUserClick(user)}>{t("setting.member-section.archive-member")} ) : ( <> - - + handleRestoreUserClick(user)}>{t("common.restore")} + handleDeleteUserClick(user)}>{t("setting.member-section.delete-member")} )} diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx index 28d36b7bd..a04d29b52 100644 --- a/web/src/components/Settings/SSOSection.tsx +++ b/web/src/components/Settings/SSOSection.tsx @@ -1,4 +1,4 @@ -import { Button, Divider, List, ListItem } from "@mui/joy"; +import { Button, Divider, Dropdown, List, ListItem, Menu, MenuButton, MenuItem } from "@mui/joy"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { Link } from "react-router-dom"; @@ -7,8 +7,8 @@ import { useGlobalStore } from "@/store/module"; import { useTranslate } from "@/utils/i18n"; import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog"; import { showCommonDialog } from "../Dialog/CommonDialog"; +import Icon from "../Icon"; import LearnMore from "../LearnMore"; -import Dropdown from "../kit/Dropdown"; interface State { disablePasswordLogin: boolean; @@ -78,25 +78,17 @@ const SSOSection = () => {

- - - - - } - /> + + + + + + showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}> + {t("common.edit")} + + handleDeleteIdentityProvider(identityProvider)}>{t("common.delete")} + +
))} diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx index d79dd240d..788a09535 100644 --- a/web/src/components/Settings/StorageSection.tsx +++ b/web/src/components/Settings/StorageSection.tsx @@ -1,4 +1,4 @@ -import { Button, Divider, IconButton, List, ListItem, Radio, RadioGroup } from "@mui/joy"; +import { Button, Divider, Dropdown, IconButton, List, ListItem, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { Link } from "react-router-dom"; @@ -10,7 +10,6 @@ import { showCommonDialog } from "../Dialog/CommonDialog"; import Icon from "../Icon"; import LearnMore from "../LearnMore"; import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog"; -import Dropdown from "../kit/Dropdown"; const StorageSection = () => { const t = useTranslate(); @@ -100,25 +99,15 @@ const StorageSection = () => {

{storage.name}

- - - - - } - /> + + + + + + showCreateStorageServiceDialog(storage, fetchStorageList)}>{t("common.edit")} + handleDeleteStorage(storage)}>{t("common.delete")} + +
))} diff --git a/web/src/components/kit/Dropdown.tsx b/web/src/components/kit/Dropdown.tsx deleted file mode 100644 index de848529f..000000000 --- a/web/src/components/kit/Dropdown.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { ReactNode, useEffect, useRef } from "react"; -import useToggle from "react-use/lib/useToggle"; -import Icon from "../Icon"; - -interface Props { - trigger?: ReactNode; - actions?: ReactNode; - disabled?: boolean; - className?: string; - actionsClassName?: string; - positionClassName?: string; -} - -const Dropdown: React.FC = (props: Props) => { - const { trigger, actions, disabled, className, actionsClassName, positionClassName } = props; - const [dropdownStatus, toggleDropdownStatus] = useToggle(false); - const dropdownWrapperRef = useRef(null); - - useEffect(() => { - if (dropdownStatus) { - const handleClickOutside = (event: MouseEvent) => { - if (!dropdownWrapperRef.current?.contains(event.target as Node)) { - toggleDropdownStatus(false); - } - }; - window.addEventListener("click", handleClickOutside, { - capture: true, - once: true, - }); - } - }, [dropdownStatus]); - - const handleDropdownClick = () => { - if (disabled) { - return; - } - toggleDropdownStatus(); - }; - - return ( -
- {trigger ? ( - trigger - ) : ( - - )} -
- {actions} -
-
- ); -}; - -export default Dropdown; diff --git a/web/src/less/common/date-picker.less b/web/src/less/common/date-picker.less deleted file mode 100644 index f8bf58615..000000000 --- a/web/src/less/common/date-picker.less +++ /dev/null @@ -1,50 +0,0 @@ -.date-picker-wrapper { - @apply flex flex-col justify-start items-start p-4; - - > .date-picker-header { - @apply flex flex-row justify-center items-center w-full mb-2; - - > .btn-text { - @apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200; - } - - > .normal-text { - @apply mx-1 leading-6 font-mono; - } - } - - > .date-picker-day-container { - @apply flex flex-row justify-start items-start; - width: 280px; - flex-wrap: wrap; - - > .date-picker-day-header { - @apply flex flex-row justify-around items-center w-full; - - > .day-item { - @apply w-9 h-9 select-none flex flex-col justify-center items-center; - color: gray; - font-size: 13px; - margin: 2px 0; - } - } - - > .day-item { - @apply w-9 h-9 rounded-full text-sm select-none cursor-pointer flex flex-col justify-center items-center hover:bg-gray-200 dark:hover:bg-zinc-600; - margin: 2px; - - &.current { - @apply text-blue-600 !bg-blue-100 text-base font-medium; - } - - &.disabled { - @apply cursor-not-allowed; - } - - &.null { - background-color: unset; - cursor: unset; - } - } - } -}