EDS Data Grid Feature: onRowContextMenu (#3658)

* Feature: onRowContextMenu added * onRowContextMenu - updated storybook with menu
equinor · Oct 21, 2024 · 5058acf · 5058acf
1 parent c5167d9
commit 5058acf
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 1 deletion.
diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
@@ -2,6 +2,8 @@ import {
   Button,
   Checkbox,
   Divider,
+  Icon,
+  Menu,
   Pagination,
   Paper,
   TextField,
@@ -35,6 +37,7 @@ import {
 } from './stories/columns'
 import { data, summaryData } from './stories/data'
 import { Virtualizer } from './types'
+import { external_link } from '@equinor/eds-icons'
 
 const meta: Meta<typeof EdsDataGrid<Photo>> = {
   title: 'EDS Data grid',
@@ -286,6 +289,104 @@ RowSelection.args = {
   columnResizeMode: 'onChange',
 } satisfies Partial<EdsDataGridProps<Photo>>
 
+const SimpleMenu = ({
+  text,
+  top,
+  left,
+  onHide,
+}: {
+  text: string
+  top: number
+  left: number
+  onHide: () => void
+}): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  return (
+    <div
+      id="anchor"
+      ref={setAnchorEl}
+      style={{
+        position: 'absolute',
+        top: top,
+        left: left,
+      }}
+    >
+      <Menu
+        open
+        id="menu-as"
+        aria-labelledby="anchor-as"
+        onClose={onHide}
+        anchorEl={anchorEl}
+        placement="right-start"
+      >
+        <Menu.Section title={text}>
+          <Menu.Item
+            as="a"
+            onClick={onHide}
+            href="https://eds.equinor.com/"
+            target="_blank"
+            style={{ justifyContent: 'space-between' }}
+          >
+            <Typography group="navigation" variant="menu_title" as="span">
+              EDS homepage
+            </Typography>
+            <Icon data={external_link} size={16} />
+          </Menu.Item>
+          <Menu.Item
+            as="a"
+            onClick={onHide}
+            href="https://equinor.com/"
+            target="_blank"
+            style={{ justifyContent: 'space-between' }}
+          >
+            <Typography group="navigation" variant="menu_title" as="span">
+              Equinor.com
+            </Typography>
+            <Icon data={external_link} size={16} />
+          </Menu.Item>
+        </Menu.Section>
+      </Menu>
+    </div>
+  )
+}
+
+export const RowContextMenu: StoryFn<EdsDataGridProps<Photo>> = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuProps, setMenuProps] = useState<{
+    text: string
+    top: number
+    left: number
+    onHide: () => void
+  } | null>(null)
+
+  const showMenu = (
+    row: Row<Photo>,
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setMenuProps({
+      text: `Menu for row id: ${row.original.id}`,
+      top: event.pageY,
+      left: event.pageX,
+      onHide: () => setIsOpen(false),
+    })
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      <Typography>Right click a row to open a basic popup.</Typography>
+      <Divider />
+      <br />
+      {isOpen && <SimpleMenu {...menuProps} />}
+      <EdsDataGrid {...args} onRowContextMenu={showMenu} />
+    </>
+  )
+}
+
+RowContextMenu.args = {} satisfies Partial<EdsDataGridProps<Photo>>
+
 export const Paging: StoryFn<EdsDataGridProps<Photo>> = (args) => {
   return <EdsDataGrid {...args} />
 }

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -91,6 +91,7 @@ export function EdsDataGrid<T>({
   setExpansionState,
   getSubRows,
   defaultColumn,
+  onRowContextMenu,
   onRowClick,
   onCellClick,
   enableFooter,
@@ -459,6 +460,11 @@ export function EdsDataGrid<T>({
                     <TableRow
                       key={virtualItem.index}
                       row={row}
+                      onContextMenu={
+                        onRowContextMenu
+                          ? (event) => onRowContextMenu(row, event)
+                          : undefined
+                      }
                       onClick={
                         onRowClick
                           ? (event) => onRowClick(row, event)
@@ -491,6 +497,11 @@ export function EdsDataGrid<T>({
                   <TableRow
                     key={row.id}
                     row={row}
+                    onContextMenu={
+                      onRowContextMenu
+                        ? (event) => onRowContextMenu(row, event)
+                        : undefined
+                    }
                     onClick={
                       onRowClick ? (event) => onRowClick(row, event) : undefined
                     }

diff --git a/packages/eds-data-grid-react/src/EdsDataGridProps.ts b/packages/eds-data-grid-react/src/EdsDataGridProps.ts
@@ -210,6 +210,16 @@ type FilterProps = {
 }
 
 type HandlersProps<T> = {
+  /**
+   *
+   * @param row the current row
+   * @param event The right-click event
+   * @returns
+   */
+  onRowContextMenu?: (
+    row: Row<T>,
+    event: MouseEvent<HTMLTableRowElement>,
+  ) => unknown
   /**
    * Row click handler.
    *

diff --git a/packages/eds-data-grid-react/src/components/TableRow.tsx b/packages/eds-data-grid-react/src/components/TableRow.tsx
@@ -11,7 +11,12 @@ type Props<T> = {
   onCellClick?: EdsDataGridProps<T>['onCellClick']
 } & HTMLAttributes<HTMLTableRowElement>
 
-export function TableRow<T>({ row, onCellClick, onClick }: Props<T>) {
+export function TableRow<T>({
+  row,
+  onCellClick,
+  onClick,
+  onContextMenu,
+}: Props<T>) {
   const { rowClass, rowStyle } = useTableContext()
 
   return (
@@ -21,6 +26,7 @@ export function TableRow<T>({ row, onCellClick, onClick }: Props<T>) {
       }}
       className={`${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`}
       onClick={onClick}
+      onContextMenu={onContextMenu}
     >
       {row.getVisibleCells().map((cell) => (
         <TableBodyCell

diff --git a/packages/eds-data-grid-react/src/tests/EdsDataGrid.test.tsx b/packages/eds-data-grid-react/src/tests/EdsDataGrid.test.tsx
@@ -300,6 +300,27 @@ describe('EdsDataGrid', () => {
       await userEvent.click(screen.getAllByRole('row')[1])
       expect(spy).toHaveBeenCalledTimes(1)
     })
+    it('right-click should call onRowSelectionChange if enableRowSelection is set', async () => {
+      const spy = jest.fn()
+      render(
+        <EdsDataGrid
+          enableRowSelection
+          onRowSelectionChange={spy}
+          onRowContextMenu={(row) =>
+            row.getCanSelect() ? row.toggleSelected() : null
+          }
+          columns={columns}
+          rows={data}
+        />,
+      )
+
+      await userEvent.pointer({
+        keys: '[MouseRight]',
+        target: screen.getAllByRole('row')[1],
+      })
+
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('Paging', () => {