Merge pull request #2640 from marmelab/buttons-events

[RFR] Allow to extend the buttons onClick handlers
marmelab · Dec 13, 2018 · 4adfeea · 4adfeea
2 parents 523145c + af8ca71
commit 4adfeea
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteButton.js
@@ -62,16 +62,21 @@ class BulkDeleteButton extends Component {
             selectedIds,
             startUndoable,
             undoable,
+            onClick,
         } = this.props;
         if (undoable) {
             startUndoable(crudDeleteMany(resource, selectedIds, basePath));
         } else {
             dispatchCrudDeleteMany(resource, selectedIds, basePath);
         }
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {
-        const { classes, label, icon, ...rest } = this.props;
+        const { classes, label, icon, onClick, ...rest } = this.props;
         return (
             <Button
                 onClick={this.handleClick}

diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.js b/packages/ra-ui-materialui/src/button/DeleteButton.js
@@ -23,6 +23,19 @@ const styles = theme => ({
     },
 });
 
+const sanitizeRestProps = ({
+    basePath,
+    classes,
+    dispatchCrudDeleteMany,
+    filterValues,
+    label,
+    resource,
+    selectedIds,
+    startUndoable,
+    undoable,
+    ...rest
+}) => rest;
+
 class DeleteButton extends Component {
     handleDelete = event => {
         event.stopPropagation();
@@ -34,6 +47,7 @@ class DeleteButton extends Component {
             basePath,
             redirect,
             undoable,
+            onClick,
         } = this.props;
         if (undoable) {
             startUndoable(
@@ -42,14 +56,20 @@ class DeleteButton extends Component {
         } else {
             dispatchCrudDelete(resource, record.id, record, basePath, redirect);
         }
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {
         const {
             label = 'ra.action.delete',
             classes = {},
             className,
-            icon
+            icon,
+            onClick,
+            ...rest
         } = this.props;
         return (
             <Button
@@ -61,6 +81,7 @@ class DeleteButton extends Component {
                     className
                 )}
                 key="button"
+                {...sanitizeRestProps(rest)}
             >
                 {icon}
             </Button>

diff --git a/packages/ra-ui-materialui/src/button/ExportButton.js b/packages/ra-ui-materialui/src/button/ExportButton.js
@@ -118,6 +118,7 @@ class ExportButton extends Component {
             maxResults,
             sort,
             resource,
+            onClick,
         } = this.props;
         dispatch(
             crudGetAll(
@@ -135,6 +136,10 @@ class ExportButton extends Component {
                         : downloadCSV(convertToCSV(data), resource)
             )
         );
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {

diff --git a/packages/ra-ui-materialui/src/button/RefreshButton.js b/packages/ra-ui-materialui/src/button/RefreshButton.js
@@ -19,8 +19,13 @@ class RefreshButton extends Component {
     };
 
     handleClick = event => {
+        const { refreshView, onClick } = this.props; 
         event.preventDefault();
-        this.props.refreshView();
+        refreshView();
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {

diff --git a/packages/ra-ui-materialui/src/button/RefreshIconButton.js b/packages/ra-ui-materialui/src/button/RefreshIconButton.js
@@ -22,8 +22,13 @@ class RefreshButton extends Component {
     };
 
     handleClick = event => {
+        const { refreshView, onClick } = this.props; 
         event.preventDefault();
-        this.props.refreshView();
+        refreshView();
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js
@@ -69,6 +69,7 @@ export class SaveButton extends Component {
             redirect,
             saving,
             showNotification,
+            onClick,
         } = this.props;
 
         if (saving) {
@@ -84,6 +85,10 @@ export class SaveButton extends Component {
             }
             handleSubmitWithRedirect(redirect)();
         }
+
+        if (typeof onClick === 'function') {
+            onClick();
+        }
     };
 
     render() {
@@ -99,6 +104,7 @@ export class SaveButton extends Component {
             translate,
             variant = 'raised',
             icon,
+            onClick,
             ...rest
         } = this.props;