diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js index 2ea7aa12..22d1d14a 100644 --- a/__tests__/demo/demo-components/index.js +++ b/__tests__/demo/demo-components/index.js @@ -192,6 +192,41 @@ export function HidingColumns(props) { ); } +export function TestingNewActionHandlersProp(props) { + return ( + 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 22368882..c0965c37 100644 --- a/__tests__/demo/demo.js +++ b/__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(

Hiding Columns

+

TestingNewActionHandlersProp

+ +

Editable Rows

diff --git a/src/components/MTableAction/index.js b/src/components/MTableAction/index.js index f6c93141..f73ed37c 100644 --- a/src/components/MTableAction/index.js +++ b/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' ? ( {action.icon} @@ -52,6 +60,7 @@ function MTableAction(props) { color="inherit" disabled={disabled} onClick={handleOnClick} + {...eventHandlers} > {icon} 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