Support contextmenu event binding for table rows

Peter Josling · Peter Josling · commit d14e5ba22e14 · 2018-10-23T20:05:27.000+01:00
Allows for right click as well as existing click + double click.
diff --git a/src/components/table/package.json b/src/components/table/package.json
@@ -41,6 +41,24 @@
                     }
                 ]
             },
+            {
+                "event": "row-contextmenu",
+                "description": "Emitted when a row is right clicked.",
+                "args": [
+                    {
+                        "arg": "item",
+                        "description": "Item data of the row being right clicked."
+                    },
+                    {
+                        "arg": "index",
+                        "description": "Index of the row being right clicked."
+                    },
+                    {
+                        "arg": "event",
+                        "description": "Native event object."
+                    }
+                ]
+            },
             {
                 "event": "row-hovered",
                 "description": "Emitted when a row is hovered.",
diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -249,6 +249,9 @@ export default {
               click: evt => {
                 this.rowClicked(evt, item, rowIndex)
               },
+              contextmenu: evt => {
+                this.rowContextmenu(evt, item, rowIndex)
+              },
               dblclick: evt => {
                 this.rowDblClicked(evt, item, rowIndex)
               },
@@ -926,6 +929,13 @@ export default {
       }
       this.$emit('row-hovered', item, index, e)
     },
+    rowContextmenu (e, item, index) {
+      if (this.stopIfBusy(e)) {
+        // If table is busy (via provider) then don't propagate
+        return
+      }
+      this.$emit('row-contextmenu', item, index, e)
+    },
     headClicked (e, field) {
       if (this.stopIfBusy(e)) {
         // If table is busy (via provider) then don't propagate
diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js
@@ -404,6 +404,25 @@ describe('table', async () => {
     }
   })
 
+  it('each data row should emit a row-contextmenu event when right clicked', async () => {
+    const { app: { $refs } } = window
+    const vm = $refs.table_paginated
+
+    const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
+    expect(tbody).toBeDefined()
+    if (tbody) {
+      const trs = [...tbody.children]
+      expect(trs.length).toBe(vm.perPage)
+      trs.forEach((tr, idx) => {
+        const spy = jest.fn()
+        vm.$on('row-contextmenu', spy)
+        tr.dispatchEvent(new MouseEvent('contextmenu', {button: 2}))
+        vm.$off('row-contextmenu', spy)
+        expect(spy).toHaveBeenCalled()
+      })
+    }
+  })
+
   it('each header th should emit a head-clicked event when clicked', async () => {
     const { app: { $refs } } = window
     const vm = $refs.table_paginated
