Merge pull request #699 from layer5io/dragon-slayer875/master

Add ellispis action menu and fix cursor styles

Author: leecalcote

src/custom/ResponsiveDataTable.tsx

@@ -1,6 +1,64 @@
-import { Theme, ThemeProvider, createTheme } from '@mui/material';
+import { Theme, ThemeProvider, createTheme, styled, useTheme } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
+import { ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
+import { EllipsisIcon } from '../icons/Ellipsis';
+import TooltipIcon from './TooltipIcon';
+
+export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? '0.5' : '1',
+  display: 'flex',
+  '& svg': {
+    cursor: disabled ? 'not-allowed' : 'pointer'
+  }
+}));
+
+export const DataTableEllipsisMenu: React.FC<{
+  actionsList: NonNullable<Column['options']>['actionsList'];
+}> = ({ actionsList }) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const theme = useTheme();
+
+  return (
+    <>
+      <TooltipIcon title="View Actions" onClick={handleClick} icon={<EllipsisIcon />} arrow />
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        sx={{
+          ' .MuiPaper-root': {
+            background: theme.palette.background.surfaces
+          }
+        }}
+      >
+        {actionsList &&
+          actionsList.map((action, index) => (
+            <IconWrapper key={index} disabled={action.disabled}>
+              <MenuItem
+                sx={{ width: '-webkit-fill-available' }}
+                key={index}
+                onClick={action.onClick}
+                disabled={action.disabled}
+              >
+                <ListItemIcon>{action.icon}</ListItemIcon>
+                <ListItemText>{action.title}</ListItemText>
+              </MenuItem>
+            </IconWrapper>
+          ))}
+      </Menu>
+    </>
+  );
+};
 
 const dataTableTheme = (theme: Theme) =>
   createTheme({
@@ -115,6 +173,15 @@ const dataTableTheme = (theme: Theme) =>
             }
           }
         }
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: {
+            '&.Mui-disabled': {
+              cursor: 'not-allowed'
+            }
+          }
+        }
       }
     }
   });
@@ -129,6 +196,12 @@ export interface Column {
     display?: boolean;
     sortDescFirst?: boolean;
     customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
+    actionsList?: {
+      title: string;
+      icon: JSX.Element;
+      onClick: () => void;
+      disabled?: boolean;
+    }[];
   };
 }
 

src/custom/TooltipIcon.tsx

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/material/styles';
 import React from 'react';
 import { IconButton } from '../base/IconButton';
-import Tooltip from '../patches/Tooltip';
+import { CustomTooltip } from './CustomTooltip';
 
 interface TooltipIconProps {
   title: string;
@@ -19,7 +19,7 @@ export function TooltipIcon({
   arrow = false
 }: TooltipIconProps): JSX.Element {
   return (
-    <Tooltip title={title} arrow={arrow}>
+    <CustomTooltip title={title} arrow={arrow}>
       <IconButton
         onClick={onClick}
         sx={{
@@ -35,7 +35,7 @@ export function TooltipIcon({
       >
         {icon}
       </IconButton>
-    </Tooltip>
+    </CustomTooltip>
   );
 }
 

src/custom/index.tsx

@@ -33,7 +33,10 @@ import { LearningCard } from './LearningCard';
 import { RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
-import ResponsiveDataTable, { ResponsiveDataTableProps } from './ResponsiveDataTable';
+import ResponsiveDataTable, {
+  DataTableEllipsisMenu,
+  ResponsiveDataTableProps
+} from './ResponsiveDataTable';
 import SearchBar, { SearchBarProps } from './SearchBar';
 import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
@@ -58,6 +61,7 @@ export {
   CustomDialog,
   CustomImage,
   CustomTooltip,
+  DataTableEllipsisMenu,
   EmptyState,
   ErrorBoundary,
   Fallback,

src/icons/Ellipsis/Ellipsisicon.tsx

@@ -0,0 +1,23 @@
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const EllipsisIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      width={width}
+      height={height}
+      fill={props.fill || 'currentColor'}
+      {...props}
+    >
+      <path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
+    </svg>
+  );
+};
+
+export default EllipsisIcon;

src/icons/Ellipsis/index.tsx

@@ -0,0 +1 @@
+export { default as EllipsisIcon } from './Ellipsisicon';

src/theme/components/iconbutton.modifier.ts

@@ -5,6 +5,18 @@ export const MuiIconButton: Components<Theme>['MuiIconButton'] = {
     root: {
       '@media (max-width: 400px)': {
         padding: '2px'
+      },
+      '&.Mui-disabled': {
+        '&:hover': {
+          cursor: 'not-allowed'
+        }
+      },
+      '& .MuiSvgIcon-root': {
+        '&.Mui-disabled': {
+          '&:hover': {
+            cursor: 'not-allowed'
+          }
+        }
       }
     }
   }