fix: disabled iconbutton style, menu behaviour

proohit · Mar 26, 2022 · 18bd695 · 18bd695
1 parent f9a7982
commit 18bd695
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/frontend/src/dashboard/components/WidgetHeader.tsx b/frontend/src/dashboard/components/WidgetHeader.tsx
@@ -13,6 +13,7 @@ import {
   FunctionComponent,
   MouseEvent as ReactMouseEvent,
   useState,
+  useEffect,
 } from 'react';
 import { widgetLabels } from '../constants/widgets';
 import { AvailableWidgets } from '../models/AvailableWidgets';
@@ -26,47 +27,53 @@ export type HeaderWidgetProps = Partial<WidgetProps> & {
 export const WidgetHeader: FunctionComponent<HeaderWidgetProps> = (props) => {
   const { title, widgetAdded, addableWidgets } = props;
   const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
-  const menuOpen = Boolean(menuAnchor);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   const openMenu = (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setMenuOpen(true);
     setMenuAnchor(event.currentTarget);
   };
 
   const closeMenu = () => {
+    setMenuOpen(false);
     setMenuAnchor(null);
   };
 
+  useEffect(() => {
+    if (!menuOpen && !!menuAnchor) {
+      return;
+    }
+    addableWidgets?.length === 0 && closeMenu();
+  }, [menuOpen, menuAnchor, addableWidgets]);
+
   return (
     <Grid xs={12} item>
       <AppBar color="primary" position="static" style={{ zIndex: 0 }}>
         <Toolbar variant="dense">
           <Typography variant="h6">{title}</Typography>
           <Grid xs item container justifyContent="flex-end">
-            {addableWidgets?.length > 0 && (
-              <>
-                <Tooltip title="Add Widget">
-                  <IconButton color="secondary" onClick={openMenu}>
-                    <AddBox />
-                  </IconButton>
-                </Tooltip>
-                <Menu
-                  anchorEl={menuAnchor}
-                  open={menuOpen}
-                  onClose={closeMenu}
-                  transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-                  anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-                >
-                  {addableWidgets.map((widgetId) => (
-                    <MenuItem
-                      key={widgetId}
-                      onClick={() => widgetAdded(widgetId)}
-                    >
-                      {widgetLabels[widgetId]}
-                    </MenuItem>
-                  ))}
-                </Menu>
-              </>
-            )}
+            <Tooltip title="Add Widget">
+              <IconButton
+                disabled={addableWidgets?.length <= 0}
+                color="secondary"
+                onClick={openMenu}
+              >
+                <AddBox />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              anchorEl={menuAnchor}
+              open={menuOpen}
+              onClose={closeMenu}
+              transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            >
+              {addableWidgets?.map((widgetId) => (
+                <MenuItem key={widgetId} onClick={() => widgetAdded(widgetId)}>
+                  {widgetLabels[widgetId]}
+                </MenuItem>
+              ))}
+            </Menu>
           </Grid>
         </Toolbar>
       </AppBar>

diff --git a/frontend/src/shared/globals/styles/AccTheme.ts b/frontend/src/shared/globals/styles/AccTheme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material';
+import { alpha, createTheme } from '@mui/material';
 
 export const AccTheme = createTheme({
   palette: {
@@ -67,5 +67,17 @@ export const AccTheme = createTheme({
         }),
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: ({ theme, ownerState }) => ({
+          '&.Mui-disabled': {
+            color:
+              ownerState.color === 'primary'
+                ? alpha(theme.palette.primary.main, 0.5)
+                : alpha(theme.palette.secondary.main, 0.5),
+          },
+        }),
+      },
+    },
   },
 });