Allow "onClose" and "onExited" callbacks on the SnackbarProvider and …

…on single snacks
iamhosseindhv · Nov 5, 2018 · a53a91d · a53a91d
1 parent 95047df
commit a53a91d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/src/SnackbarItem/SnackbarItem.js b/src/SnackbarItem/SnackbarItem.js
@@ -18,8 +18,8 @@ import {
 class SnackbarItem extends Component {
     handleClose = key => (event, reason) => {
         const { onClose } = this.props;
-        if (reason === 'clickaway') return;
-        onClose(key);
+
+        onClose(event, reason, key);
     };
 
     render() {

diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
@@ -91,24 +91,37 @@ class SnackbarProvider extends Component {
 
     /**
      * Hide a snackbar after its timeout.
-     * @param {number} key - id of the snackbar we want to hide
      */
-    handleCloseSnack = (key) => {
-        this.setState(({ snacks }) => ({
-            snacks: [
-                ...snacks.map(item => (item.key === key ? { ...item, open: false } : { ...item })),
-            ],
-        }));
+    handleCloseSnack = snackOnClose => (event, reason, key) => {
+        const { onClose } = this.props;
+
+        if (reason !== 'clickaway') {
+            this.setState(({ snacks }) => ({
+                snacks: [
+                    ...snacks
+                        .map(item => (item.key === key ? { ...item, open: false } : { ...item })),
+                ],
+            }));
+        }
+
+        if (snackOnClose) {
+            snackOnClose(event, reason, key);
+        }
+
+        if (onClose) {
+            onClose(event, reason, key);
+        }
     };
 
     /**
      * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),
      * it leaves the screen and immediately after leaving animation is done, this method
      * gets called. We remove the hidden snackbar from state and then display notifications
      * waiting in the queue (if any).
-     * @param {number} key - id of the snackbar we want to remove
      */
-    handleExitedSnack = (key) => {
+    handleExitedSnack = snackOnExited => (key) => {
+        const { onExited } = this.props;
+
         const enterDelay = TRANSITION_DELAY + TRANSITION_DOWN_DURATION + 40;
         this.setState(
             ({ snacks }) => ({
@@ -118,6 +131,14 @@ class SnackbarProvider extends Component {
             }),
             () => setTimeout(this.handleDisplaySnack, enterDelay),
         );
+
+        if (snackOnExited) {
+            snackOnExited(key);
+        }
+
+        if (onExited) {
+            onExited(key);
+        }
     };
 
     render() {
@@ -135,8 +156,8 @@ class SnackbarProvider extends Component {
                                 key={snack.key}
                                 level={index}
                                 snack={snack}
-                                onClose={this.handleCloseSnack}
-                                onExited={this.handleExitedSnack}
+                                onClose={this.handleCloseSnack(snack.onClose)}
+                                onExited={this.handleExitedSnack(snack.onExited)}
                             />
                         ))}
                     </Fragment>
@@ -153,10 +174,14 @@ SnackbarProvider.propTypes = {
      * on top of one another
      */
     maxSnack: PropTypes.number,
+    onClose: PropTypes.func,
+    onExited: PropTypes.func,
 };
 
 SnackbarProvider.defaultProps = {
     maxSnack: 3,
+    onClose: null,
+    onExited: null,
 };
 
 export default SnackbarProvider;