feat: multiple selection (#703)

feat: multiple event selection

---------

Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com>
Co-authored-by: Alex <ac@omnivox.dk>

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event?: MouseEvent) => void | Promise<void>;
+  clickHandler: (event: MouseEvent) => void | Promise<void>;
   tooltip: string;
   openDelay?: number;
 }

apps/client/src/common/components/context-menu/ContextMenu.tsx

@@ -1,11 +1,13 @@
 // logic (with some modifications) culled from:
 // https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
 
-import { Fragment, ReactElement } from 'react';
-import { Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
 import { IconType } from '@react-icons/all-files';
 import { create } from 'zustand';
 
+import { ContextMenuOption } from './ContextMenuOption';
+
 import style from './ContextMenu.module.scss';
 
 type ContextMenuCoords = {
@@ -13,14 +15,23 @@ type ContextMenuCoords = {
   y: number;
 };
 
-export type Option = {
+export type OptionWithoutGroup = {
   label: string;
+  isDisabled?: boolean;
   icon: IconType;
   onClick: () => void;
   withDivider?: boolean;
-  isDisabled?: boolean;
 };
 
+export type OptionWithGroup = {
+  label: string;
+  group: Omit<OptionWithoutGroup, 'isGroup'>[];
+};
+
+export type Option = OptionWithoutGroup | OptionWithGroup;
+
+const isOptionWithGroup = (option: Option): option is OptionWithGroup => 'group' in option;
+
 type ContextMenuStore = {
   coords: ContextMenuCoords;
   options: Option[];
@@ -69,14 +80,17 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
           }}
         />
         <MenuList>
-          {options.map(({ label, icon: Icon, onClick, withDivider, isDisabled }, i) => (
-            <Fragment key={label}>
-              {withDivider && <MenuDivider />}
-              <MenuItem key={i} icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
-                {label}
-              </MenuItem>
-            </Fragment>
-          ))}
+          {options.map((option) =>
+            isOptionWithGroup(option) ? (
+              <MenuGroup key={option.label} title={option.label}>
+                {option.group.map((groupOption) => (
+                  <ContextMenuOption key={groupOption.label} {...groupOption} />
+                ))}
+              </MenuGroup>
+            ) : (
+              <ContextMenuOption key={option.label} {...option} />
+            ),
+          )}
         </MenuList>
       </Menu>
     </>

apps/client/src/common/components/context-menu/ContextMenuOption.tsx

@@ -0,0 +1,12 @@
+import { MenuDivider, MenuItem } from '@chakra-ui/react';
+
+import { OptionWithoutGroup } from './ContextMenu';
+
+export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
+  <>
+    {withDivider && <MenuDivider />}
+    <MenuItem icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+      {label}
+    </MenuItem>
+  </>
+);