From 1e5d6e76a5e6189053793c2c970feb3c11474221 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 18 Aug 2022 11:02:00 +0200 Subject: [PATCH 1/3] Add hook to ease menu implementation --- .../src/toolpad/AppEditor/PagePanel.tsx | 35 +++----------- .../toolpad-app/src/toolpad/ToolpadShell.tsx | 30 ++---------- packages/toolpad-app/src/utils/useMenu.ts | 46 +++++++++++++++++++ 3 files changed, 57 insertions(+), 54 deletions(-) create mode 100644 packages/toolpad-app/src/utils/useMenu.ts diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx index 0d683de6778..3bfabaafdbd 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx @@ -21,6 +21,7 @@ import HierarchyExplorer from './HierarchyExplorer'; import client from '../../api'; import { useDom } from '../DomLoader'; import JsonView from '../../components/JsonView'; +import useMenu from '../../utils/useMenu'; const PagePanelRoot = styled('div')({ display: 'flex', @@ -28,16 +29,8 @@ const PagePanelRoot = styled('div')({ }); function AppMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleAppMenuClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const handleAppMenuClose = () => { - setAnchorEl(null); - }; - const buttonId = React.useId(); - const menuId = React.useId(); + const { buttonProps, menuProps, onMenuClose } = useMenu(); + const dialogTitleId = React.useId(); const [viewDomDialogOpen, setViewDomDialogOpen] = React.useState(false); @@ -45,33 +38,19 @@ function AppMenu() { const dom = useDom(); const handleViewDomClick = React.useCallback(() => { - handleAppMenuClose(); + onMenuClose(); setViewDomDialogOpen(true); - }, []); + }, [onMenuClose]); const handleViewDomDialogClose = React.useCallback(() => setViewDomDialogOpen(false), []); return ( - + - + View DOM diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx index a287c641327..42697ed29c4 100644 --- a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx +++ b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx @@ -15,6 +15,7 @@ import { import HomeIcon from '@mui/icons-material/Home'; import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import useMenu from '../utils/useMenu'; const DOCUMENTATION_URL = 'https://mui.com/toolpad/getting-started/setup/'; const REPORT_BUG_URL = @@ -55,39 +56,16 @@ const ViewPort = styled('div')({ }); function UserFeedback() { - const menuId = React.useId(); - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; + const { buttonProps, menuProps } = useMenu(); return ( - + - + Documentation Report bug diff --git a/packages/toolpad-app/src/utils/useMenu.ts b/packages/toolpad-app/src/utils/useMenu.ts new file mode 100644 index 00000000000..3235d283766 --- /dev/null +++ b/packages/toolpad-app/src/utils/useMenu.ts @@ -0,0 +1,46 @@ +import { ButtonProps, MenuProps } from '@mui/material'; +import * as React from 'react'; + +export default function useMenu() { + const buttonId = React.useId(); + const menuId = React.useId(); + + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const onMenuClose = () => { + setAnchorEl(null); + }; + + const buttonProps = React.useMemo( + () => ({ + id: buttonId, + 'aria-controls': open ? menuId : undefined, + 'aria-haspopup': 'true', + 'aria-expanded': open ? 'true' : undefined, + onClick: handleClick, + }), + [buttonId, menuId, open], + ); + + const menuProps = React.useMemo( + () => ({ + id: menuId, + anchorEl, + open, + onClose: onMenuClose, + MenuListProps: { + 'aria-labelledby': buttonId, + }, + }), + [anchorEl, buttonId, menuId, open], + ); + + return { + buttonProps, + menuProps, + onMenuClose, + }; +} From c3f206e0a1f43f06f043e2cf474c4389bdba711b Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 18 Aug 2022 18:21:16 +0200 Subject: [PATCH 2/3] add labels --- packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx | 2 +- packages/toolpad-app/src/toolpad/ToolpadShell.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx index 3bfabaafdbd..67b773db255 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx @@ -46,7 +46,7 @@ function AppMenu() { return ( - + diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx index 42697ed29c4..f3c6bf639ff 100644 --- a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx +++ b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx @@ -61,7 +61,7 @@ function UserFeedback() { return ( - + From 9a3d1abbf439a4b8bef873b6f6e67a1d0a31f8dc Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Thu, 18 Aug 2022 18:23:37 +0200 Subject: [PATCH 3/3] The tooltip labels the button --- packages/toolpad-app/src/toolpad/ToolpadShell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx index f3c6bf639ff..42697ed29c4 100644 --- a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx +++ b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx @@ -61,7 +61,7 @@ function UserFeedback() { return ( - +