From 636e0880dde30b1410a1a55fab8024d7619bbef4 Mon Sep 17 00:00:00 2001 From: hinashi Date: Mon, 30 Oct 2023 17:57:30 +0900 Subject: [PATCH] Added material-ui-popup-state library --- frontend/src/components/Header.tsx | 158 ++++++++++------------------- package-lock.json | 26 +++++ package.json | 1 + 3 files changed, 80 insertions(+), 105 deletions(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 460cee30f..c44ffff48 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -17,25 +17,12 @@ import { } from "@mui/material"; import { OverridableComponent } from "@mui/material/OverridableComponent"; import { styled } from "@mui/material/styles"; +import PopupState, { bindHover, bindMenu } from "material-ui-popup-state"; +import HoverMenu from "material-ui-popup-state/HoverMenu"; import React, { FC, MouseEvent, useMemo, useState } from "react"; import { Link } from "react-router-dom"; import { useInterval } from "react-use"; -import { useSimpleSearch } from "../hooks/useSimpleSearch"; -import { aironeApiClientV2 } from "../repository/AironeApiClientV2"; -import { - JobOperations, - JobRefreshIntervalMilliSec, - JobStatuses, -} from "../services/Constants"; -import { - getLatestCheckDate, - jobTargetLabel, - updateLatestCheckDate, -} from "../services/JobUtil"; - -import { SearchBox } from "./common/SearchBox"; - import { jobsPath, userPath, @@ -47,8 +34,21 @@ import { rolesPath, topPath, } from "Routes"; +import { SearchBox } from "components/common/SearchBox"; +import { useSimpleSearch } from "hooks/useSimpleSearch"; import { postLogout } from "repository/AironeAPIClient"; +import { aironeApiClientV2 } from "repository/AironeApiClientV2"; +import { + JobOperations, + JobRefreshIntervalMilliSec, + JobStatuses, +} from "services/Constants"; import { DjangoContext } from "services/DjangoContext"; +import { + getLatestCheckDate, + jobTargetLabel, + updateLatestCheckDate, +} from "services/JobUtil"; const Frame = styled(Box)(({}) => ({ width: "100%", @@ -117,12 +117,6 @@ export const Header: FC = () => { const [query, submitQuery] = useSimpleSearch(); - const timerDict: any = {}; - const [anchorDict, setAnchorDict] = useState< - Record - >({}); - const [settingAnchorEl, setSettingAnchorEl] = - useState(); const [userAnchorEl, setUserAnchorEl] = useState(); const [jobAnchorEl, setJobAnchorEl] = useState(); const [latestCheckDate, setLatestCheckDate] = useState( @@ -162,29 +156,6 @@ export const Header: FC = () => { setLatestCheckDate(getLatestCheckDate()); }; - // These processings are compromised ones to close Header menus when mouse leave from Menu-button. - // There would be more good solution. please fix it. - const handleCloseMenu = (anchorKey: string) => { - if (timerDict[anchorKey]) { - setAnchorDict({ ...anchorDict, [anchorKey]: null }); - timerDict[anchorKey] = null; - } - }; - const setCloseTimer = (anchorKey: string) => { - if (!timerDict[anchorKey]) { - const timerId = setTimeout(() => { - handleCloseMenu(anchorKey); - }, 1500); - timerDict[anchorKey] = timerId; - } - }; - const clearCloseTimer = (anchorKey: string) => { - if (timerDict[anchorKey]) { - clearTimeout(timerDict[anchorKey]); - timerDict[anchorKey] = null; - } - }; - return ( @@ -206,71 +177,48 @@ export const Header: FC = () => { - - setAnchorDict({ ...anchorDict, basic: null })} - MenuListProps={{ - onMouseLeave: () => - setAnchorDict({ ...anchorDict, basic: null }), - onMouseOver: () => clearCloseTimer("basic"), - }} - autoFocus={false} - keepMounted - > - - ユーザ管理 - - - グループ管理 - - - ロール管理 - - + + {(popupState) => ( + + + + + ユーザ管理 + + + グループ管理 + + + ロール管理 + + + + )} + {/* If there is another menu settings are passed from Server, this represent another menu*/} {djangoContext?.extendedHeaderMenus.map((menu, index) => ( - - - - setAnchorDict({ ...anchorDict, [menu.name]: null }) - } - MenuListProps={{ - onMouseLeave: () => - setAnchorDict({ ...anchorDict, [menu.name]: null }), - onMouseOver: () => clearCloseTimer(menu.name), - }} - autoFocus={false} - keepMounted - > - {menu.children.map((child, index) => ( - - {child.name} - - ))} - - + + {(popupState) => ( + + + + {menu.children.map((child, index) => ( + + {child.name} + + ))} + + + )} + ))} diff --git a/package-lock.json b/package-lock.json index 798c66d1e..966e38a65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "ip-num": "^1.4.0", "js-cookie": "^2.2.1", "js-file-download": "^0.4.12", + "material-ui-popup-state": "^5.0.10", "notistack": "^2.0.3", "react-beautiful-dnd": "^13.1.1", "react-copy-to-clipboard": "^5.1.0", @@ -13371,6 +13372,20 @@ "tmpl": "1.0.5" } }, + "node_modules/material-ui-popup-state": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.10.tgz", + "integrity": "sha512-gd0DI8skwCSdth/j/yndoIwNkS2eDusosTe5hyPZ3jbrMzDkbQBs+tBbwapQ9hLfgiVLwICd1mwyerUV9Y5Elw==", + "dependencies": { + "@babel/runtime": "^7.20.6", + "@mui/material": "^5.0.0", + "classnames": "^2.2.6", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -26881,6 +26896,17 @@ "tmpl": "1.0.5" } }, + "material-ui-popup-state": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.10.tgz", + "integrity": "sha512-gd0DI8skwCSdth/j/yndoIwNkS2eDusosTe5hyPZ3jbrMzDkbQBs+tBbwapQ9hLfgiVLwICd1mwyerUV9Y5Elw==", + "requires": { + "@babel/runtime": "^7.20.6", + "@mui/material": "^5.0.0", + "classnames": "^2.2.6", + "prop-types": "^15.7.2" + } + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", diff --git a/package.json b/package.json index f351b88c1..06055533c 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "ip-num": "^1.4.0", "js-cookie": "^2.2.1", "js-file-download": "^0.4.12", + "material-ui-popup-state": "^5.0.10", "notistack": "^2.0.3", "react-beautiful-dnd": "^13.1.1", "react-copy-to-clipboard": "^5.1.0",