Merge pull request #181 from pouryapb/master

Added onMouseEnter and onMouseLeave listeners to action

__tests__/demo/demo-components/index.js

@@ -192,6 +192,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' },

__tests__/demo/demo.js

@@ -22,6 +22,7 @@ import { render } from 'react-dom';
 import {
   Basic,
   OneDetailPanel,
+  TestingNewActionHandlersProp,
   BulkEdit,
   BulkEditWithDetailPanel,
   ExportData,
@@ -59,6 +60,9 @@ render(
     <h1>Hiding Columns</h1>
     <HidingColumns />
 
+    <h1>TestingNewActionHandlersProp</h1>
+    <TestingNewActionHandlersProp />
+
     <h1>Editable Rows</h1>
     <EditableRow />
 

src/components/MTableAction/index.js

@@ -36,6 +36,14 @@ function MTableAction(props) {
       }
     };
 
+    // 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' ? (
         <Icon {...action.iconProps}>{action.icon}</Icon>
@@ -52,6 +60,7 @@ function MTableAction(props) {
         color="inherit"
         disabled={disabled}
         onClick={handleOnClick}
+        {...eventHandlers}
       >
         {icon}
       </IconButton>

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