From 5fa1830ee77f2c609eab253e2ef8340f5a8808d8 Mon Sep 17 00:00:00 2001
From: Pourya Pourbagheri <34511048+pouryapb@users.noreply.github.com>
Date: Sun, 2 May 2021 02:15:47 +0430
Subject: [PATCH 1/3] added mouseEnter and mouseLeave listeners to action

---
 src/components/MTableAction/index.js | 16 ++++++++++++++++
 src/prop-types.js                    |  2 ++
 2 files changed, 18 insertions(+)

diff --git a/src/components/MTableAction/index.js b/src/components/MTableAction/index.js
index f6c93141..acf7ccc8 100644
--- a/src/components/MTableAction/index.js
+++ b/src/components/MTableAction/index.js
@@ -36,6 +36,20 @@ function MTableAction(props) {
       }
     };
 
+    const handleOnMouseEnter = (event) => {
+      if (action.onMouseEnter) {
+        action.onMouseEnter(event, props.data);
+        event.stopPropagation();
+      }
+    };
+
+    const handleOnMouseLeave = (event) => {
+      if (action.OnMouseLeave) {
+        action.OnMouseLeave(event, props.data);
+        event.stopPropagation();
+      }
+    };
+
     const icon =
       typeof action.icon === 'string' ? (
         <Icon {...action.iconProps}>{action.icon}</Icon>
@@ -52,6 +66,8 @@ function MTableAction(props) {
         color="inherit"
         disabled={disabled}
         onClick={handleOnClick}
+        onMouseEnter={handleOnMouseEnter}
+        onMouseLeave={handleOnMouseLeave}
       >
         {icon}
       </IconButton>
diff --git a/src/prop-types.js b/src/prop-types.js
index 7a8156e0..57156eb7 100644
--- a/src/prop-types.js
+++ b/src/prop-types.js
@@ -26,6 +26,8 @@ export const propTypes = {
         ]),
         tooltip: PropTypes.string,
         onClick: PropTypes.func.isRequired,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
         iconProps: PropTypes.object,
         disabled: PropTypes.bool,
         hidden: PropTypes.bool

From ee3a9658ab93a305778381169850f9d5d13a9ea1 Mon Sep 17 00:00:00 2001
From: Pourya Pourbagheri <34511048+pouryapb@users.noreply.github.com>
Date: Sun, 2 May 2021 02:24:10 +0430
Subject: [PATCH 2/3] typo!

---
 src/components/MTableAction/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MTableAction/index.js b/src/components/MTableAction/index.js
index acf7ccc8..4e323a67 100644
--- a/src/components/MTableAction/index.js
+++ b/src/components/MTableAction/index.js
@@ -44,8 +44,8 @@ function MTableAction(props) {
     };
 
     const handleOnMouseLeave = (event) => {
-      if (action.OnMouseLeave) {
-        action.OnMouseLeave(event, props.data);
+      if (action.onMouseLeave) {
+        action.onMouseLeave(event, props.data);
         event.stopPropagation();
       }
     };

From ffebe751050dd9d899e75919f93d6d8e68eb3a75 Mon Sep 17 00:00:00 2001
From: Matt Oestreich <21092343+oze4@users.noreply.github.com>
Date: Sat, 1 May 2021 18:49:26 -0500
Subject: [PATCH 3/3] spread all handlers

add handlers prop, so consumer can supply any event they wish, not just onMouseEnter or onMouseLeave. Keeping the legacy 'onClick' prop (the one outside of 'handlers') for legacy reasons
---
 __tests__/demo/demo-components/index.js | 35 +++++++++++++++++++++++++
 __tests__/demo/demo.js                  |  4 +++
 src/components/MTableAction/index.js    | 23 ++++++----------
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
index 8dbba97f..8f8219ce 100644
--- a/__tests__/demo/demo-components/index.js
+++ b/__tests__/demo/demo-components/index.js
@@ -95,6 +95,41 @@ export function HidingColumns(props) {
   );
 }
 
+export function TestingNewActionHandlersProp(props) {
+  return (
+    <MaterialTable
+      actions={[
+        {
+          icon: 'save',
+          tooltip: 'Save User',
+          //onClick: (event, rowData) => alert('You saved ' + rowData.name),
+          handlers: {
+            onMouseEnter: (event, props) => {
+              console.log({ from: 'handlers.onMouseEnter', event, props });
+            },
+            onMouseLeave: (event, props) => {
+              console.log({ from: 'handlers.onMouseLeave', event, props });
+            },
+            onClick: (event, props) => console.log('onclick', { event, props })
+          }
+        }
+      ]}
+      data={[
+        { name: 'jack', id: 1 },
+        { name: 'nancy', id: 2 }
+      ]}
+      columns={[
+        {
+          field: 'name',
+          title: 'Name',
+          hiddenByColumnsButton: true
+        },
+        { field: 'id', title: 'Identifier', type: 'numeric' }
+      ]}
+    />
+  );
+}
+
 /*
 const global_cols = [
   { title: 'Name', field: 'name' },
diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
index 8f71084d..b943c5b9 100644
--- a/__tests__/demo/demo.js
+++ b/__tests__/demo/demo.js
@@ -22,6 +22,7 @@ import { render } from 'react-dom';
 import {
   Basic,
   OneDetailPanel,
+  TestingNewActionHandlersProp,
   ExportData,
   CustomExport,
   EditableRow,
@@ -51,6 +52,9 @@ render(
     <h1>Hiding Columns</h1>
     <HidingColumns />
 
+    <h1>TestingNewActionHandlersProp</h1>
+    <TestingNewActionHandlersProp />
+
     <h1>Editable Rows</h1>
     <EditableRow />
 
diff --git a/src/components/MTableAction/index.js b/src/components/MTableAction/index.js
index 4e323a67..f73ed37c 100644
--- a/src/components/MTableAction/index.js
+++ b/src/components/MTableAction/index.js
@@ -36,19 +36,13 @@ function MTableAction(props) {
       }
     };
 
-    const handleOnMouseEnter = (event) => {
-      if (action.onMouseEnter) {
-        action.onMouseEnter(event, props.data);
-        event.stopPropagation();
-      }
-    };
-
-    const handleOnMouseLeave = (event) => {
-      if (action.onMouseLeave) {
-        action.onMouseLeave(event, props.data);
-        event.stopPropagation();
-      }
-    };
+    // You may provide events via the "action.handers" prop. It is an object.
+    // The event name is the key, and the value is the handler func.
+    const handlers = action.handlers || {};
+    const eventHandlers = Object.entries(handlers).reduce((o, [k, v]) => {
+      o[k] = (e) => v(e, props.data);
+      return o;
+    }, {});
 
     const icon =
       typeof action.icon === 'string' ? (
@@ -66,8 +60,7 @@ function MTableAction(props) {
         color="inherit"
         disabled={disabled}
         onClick={handleOnClick}
-        onMouseEnter={handleOnMouseEnter}
-        onMouseLeave={handleOnMouseLeave}
+        {...eventHandlers}
       >
         {icon}
       </IconButton>