Right click menu

src/assets/icons/Cut.tsx

@@ -0,0 +1,10 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import { mdiContentCut } from "@mdi/js";
+
+export default function Cut(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d={mdiContentCut} />
+    </SvgIcon>
+  );
+}

src/assets/icons/Paste.tsx

@@ -0,0 +1,10 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import { mdiContentPaste } from "@mdi/js";
+
+export default function Paste(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d={mdiContentPaste} />
+    </SvgIcon>
+  );
+}

src/components/Table/ColumnMenu/index.tsx

@@ -51,6 +51,7 @@ type SelectedColumnHeader = {
   column: Column<any> & { [key: string]: any };
   anchorEl: PopoverProps["anchorEl"];
 };
+
 export type ColumnMenuRef = {
   selectedColumnHeader: SelectedColumnHeader | null;
   setSelectedColumnHeader: React.Dispatch<

src/components/Table/ContextMenu/MenuContent.tsx

@@ -0,0 +1,42 @@
+import { Menu } from "@mui/material";
+import MenuRow, { IMenuRow } from "./MenuRow";
+
+interface IMenuContents {
+  anchorEl: HTMLElement;
+  open: boolean;
+  handleClose: () => void;
+  items: IMenuRow[];
+}
+
+export function MenuContents({
+  anchorEl,
+  open,
+  handleClose,
+  items,
+}: IMenuContents) {
+  const handleContext = (e: React.MouseEvent) => e.preventDefault();
+  return (
+    <Menu
+      id="cell-context-menu"
+      aria-labelledby="cell-context-menu"
+      anchorEl={anchorEl}
+      open={open}
+      onClose={handleClose}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left",
+      }}
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      sx={{ "& .MuiMenu-paper": { backgroundColor: "background.default" } }}
+      MenuListProps={{ disablePadding: true }}
+      onContextMenu={handleContext}
+    >
+      {items.map((item, indx: number) => (
+        <MenuRow key={indx} {...item} />
+      ))}
+    </Menu>
+  );
+}

src/components/Table/ContextMenu/MenuRow.tsx

@@ -0,0 +1,17 @@
+import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
+
+export interface IMenuRow {
+  onClick: () => void;
+  icon: JSX.Element;
+  label: string;
+  disabled?: boolean;
+}
+
+export default function MenuRow({ onClick, icon, label, disabled }: IMenuRow) {
+  return (
+    <MenuItem disabled={disabled} onClick={onClick}>
+      <ListItemIcon>{icon} </ListItemIcon>
+      <ListItemText> {label} </ListItemText>
+    </MenuItem>
+  );
+}

src/components/Table/ContextMenu/index.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import _find from "lodash/find";
+import { PopoverProps } from "@mui/material";
+
+import { getFieldProp } from "@src/components/fields";
+import { useProjectContext } from "@src/contexts/ProjectContext";
+
+import { MenuContents } from "./MenuContent";
+
+export type SelectedCell = {
+  rowIndex: number;
+  colIndex: number;
+};
+
+export type ContextMenuRef = {
+  selectedCell: SelectedCell;
+  setSelectedCell: React.Dispatch<React.SetStateAction<SelectedCell | null>>;
+  anchorEl: HTMLElement | null;
+  setAnchorEl: React.Dispatch<
+    React.SetStateAction<PopoverProps["anchorEl"] | null>
+  >;
+};
+
+export default function ContextMenu() {
+  const { contextMenuRef, tableState }: any = useProjectContext();
+  const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+  const [selectedCell, setSelectedCell] = React.useState<any | null>();
+  const open = Boolean(anchorEl);
+  const handleClose = () => setAnchorEl(null);
+
+  if (contextMenuRef)
+    contextMenuRef.current = {
+      anchorEl,
+      setAnchorEl,
+      selectedCell,
+      setSelectedCell,
+    } as {};
+
+  const selectedColIndex = selectedCell?.colIndex;
+  const selectedCol = _find(tableState?.columns, { index: selectedColIndex });
+  const getActions =
+    getFieldProp("contextMenuActions", selectedCol?.type) ||
+    function empty() {};
+  const actions = getActions() || [];
+  const hasNoActions = Boolean(actions.length === 0);
+
+  if (!contextMenuRef.current || !open || hasNoActions) return <></>;
+  return (
+    <MenuContents
+      anchorEl={anchorEl}
+      open={open}
+      handleClose={handleClose}
+      items={actions}
+    />
+  );
+}

src/components/Table/TableRow.tsx

@@ -1,3 +1,4 @@
+import { useProjectContext } from "@src/contexts/ProjectContext";
 import { Fragment } from "react";
 import { Row, RowRendererProps } from "react-data-grid";
 
@@ -8,9 +9,27 @@ export default function TableRow(props: RowRendererProps<any>) {
     return (
       <Fragment key={props.row.id}>
         <OutOfOrderIndicator top={props.top} height={props.height} />
-        <Row {...props} />
+        <ContextMenu>
+          <Row {...props} />
+        </ContextMenu>
       </Fragment>
     );
 
-  return <Row {...props} />;
+  return (
+    <ContextMenu>
+      <Row {...props} />
+    </ContextMenu>
+  );
 }
+
+const ContextMenu = (props: any) => {
+  const { contextMenuRef }: any = useProjectContext();
+  function handleClick(e: any) {
+    e.preventDefault();
+    const input = e?.target as HTMLElement;
+    if (contextMenuRef?.current) {
+      contextMenuRef?.current?.setAnchorEl(input);
+    }
+  }
+  return <span onContextMenu={(e) => handleClick(e)}>{props.children}</span>;
+};

src/components/Table/index.tsx

@@ -19,6 +19,7 @@ import TableContainer, { OUT_OF_ORDER_MARGIN } from "./TableContainer";
 import TableHeader from "../TableHeader";
 import ColumnHeader from "./ColumnHeader";
 import ColumnMenu from "./ColumnMenu";
+import ContextMenu from "./ContextMenu";
 import FinalColumnHeader from "./FinalColumnHeader";
 import FinalColumn from "./formatters/FinalColumn";
 import TableRow from "./TableRow";
@@ -48,6 +49,7 @@ export default function Table() {
     tableState,
     tableActions,
     dataGridRef,
+    contextMenuRef,
     sideDrawerRef,
     updateCell,
   } = useProjectContext();
@@ -262,6 +264,13 @@ export default function Table() {
                   });
                 }
               }}
+              onSelectedCellChange={({ rowIdx, idx }) => {
+                console.log("firing");
+                contextMenuRef?.current?.setSelectedCell({
+                  rowIndex: rowIdx,
+                  colIndex: idx,
+                });
+              }}
             />
           </DndProvider>
         ) : (
@@ -270,6 +279,7 @@ export default function Table() {
       </TableContainer>
 
       <ColumnMenu />
+      <ContextMenu />
       <BulkActions
         selectedRows={selectedRows}
         columns={columns}

src/components/fields/Email/index.tsx

@@ -6,6 +6,8 @@ import EmailIcon from "@mui/icons-material/MailOutlined";
 import BasicCell from "../_BasicCell/BasicCellValue";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "../ShortText/Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
+
 const SideDrawerField = lazy(
   () =>
     import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-Email" */)
@@ -20,6 +22,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <EmailIcon />,
   description: "Email address. Not validated.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,

src/components/fields/LongText/index.tsx

@@ -6,6 +6,7 @@ import LongTextIcon from "@mui/icons-material/Notes";
 import BasicCell from "./BasicCell";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "../ShortText/Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -23,6 +24,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <LongTextIcon />,
   description: "Text displayed on multiple lines.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,

src/components/fields/Number/index.tsx

@@ -6,6 +6,7 @@ import NumberIcon from "@src/assets/icons/Number";
 import BasicCell from "./BasicCell";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "./Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 const SideDrawerField = lazy(
   () =>
     import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-Number" */)
@@ -20,6 +21,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <NumberIcon />,
   description: "Numeric value.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,

src/components/fields/Phone/index.tsx

@@ -6,6 +6,7 @@ import PhoneIcon from "@mui/icons-material/PhoneOutlined";
 import BasicCell from "../_BasicCell/BasicCellValue";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "../ShortText/Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -21,6 +22,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <PhoneIcon />,
   description: "Phone number stored as text. Not validated.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,

src/components/fields/RichText/index.tsx

@@ -5,6 +5,7 @@ import withHeavyCell from "../_withTableCell/withHeavyCell";
 import RichTextIcon from "@mui/icons-material/TextFormat";
 import BasicCell from "../_BasicCell/BasicCellNull";
 import withSideDrawerEditor from "@src/components/Table/editors/withSideDrawerEditor";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 
 const TableCell = lazy(
   () => import("./TableCell" /* webpackChunkName: "TableCell-RichText" */)
@@ -25,6 +26,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <RichTextIcon />,
   description: "HTML edited with a rich text editor.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withHeavyCell(BasicCell, TableCell),
   TableEditor: withSideDrawerEditor(TableCell),
   SideDrawerField,

src/components/fields/ShortText/index.tsx

@@ -7,6 +7,7 @@ import BasicCell from "../_BasicCell/BasicCellValue";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 
 import { filterOperators } from "./Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 const SideDrawerField = lazy(
   () =>
     import(
@@ -26,6 +27,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <ShortTextIcon />,
   description: "Text displayed on a single line.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,

src/components/fields/Status/ConditionModalContent.tsx

@@ -62,7 +62,6 @@ export default function ConditionModalContent({
       {type === "number" && (
         <Grid container direction="row" justifyContent="space-between">
           <div style={{ width: "45%" }}>
-            {console.log(operatorOptions)}
             <MultiSelect
               options={operatorOptions}
               onChange={(v) => handleUpdate("operator")(v)}

src/components/fields/Url/index.tsx

@@ -6,6 +6,7 @@ import UrlIcon from "@mui/icons-material/Link";
 import TableCell from "./TableCell";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "../ShortText/Filter";
+import BasicContextMenuActions from "../_BasicCell/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -21,6 +22,7 @@ export const config: IFieldConfig = {
   initializable: true,
   icon: <UrlIcon />,
   description: "Web address. Not validated.",
+  contextMenuActions: BasicContextMenuActions,
   TableCell: withBasicCell(TableCell),
   TableEditor: TextEditor,
   SideDrawerField,