Add support to for onClose and onExited props.

iamhosseindhv · Nov 19, 2018 · 728e004 · 728e004
1 parent e7eea87
commit 728e004
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 26 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -18,6 +18,7 @@
             "error",
             4
         ],
+        "react/destructuring-assignment": 0,
         "react/forbid-prop-types": 0,
         "react/sort-comp": 0,
         "react/jsx-filename-extension": [

diff --git a/src/SnackbarItem/SnackbarItem.js b/src/SnackbarItem/SnackbarItem.js
@@ -9,19 +9,26 @@ import {
     capitalise,
     defaultAnchorOrigin,
     getTransitionDirection,
-    muiClasses,
+    getMuiClasses,
     TransitionComponent,
     variantIcon,
 } from './SnackbarItem.util';
 
 
 class SnackbarItem extends Component {
     handleClose = key => (event, reason) => {
-        const { onClose } = this.props;
+        const { onClose, snack: { onClose: singleOnClose } } = this.props;
         if (reason === 'clickaway') return;
+        if (singleOnClose) singleOnClose(key);
         onClose(key);
     };
 
+    handleExited = key => () => {
+        const { onExited, snack: { onExited: singleOnExited } } = this.props;
+        if (singleOnExited) singleOnExited(key);
+        onExited(key);
+    };
+
     render() {
         const {
             classes,
@@ -33,7 +40,6 @@ class SnackbarItem extends Component {
             level,
             snack,
             style,
-            onExited,
             onClickAction,
             ...other
         } = this.props;
@@ -68,9 +74,9 @@ class SnackbarItem extends Component {
                 {...other}
                 {...singleSnackProps}
                 open={snack.open}
-                classes={muiClasses(classes)}
+                classes={getMuiClasses(classes)}
                 onClose={this.handleClose(key)}
-                onExited={() => onExited(key)}
+                onExited={this.handleExited(key)}
             >
                 <SnackbarContent
                     className={classNames(

diff --git a/src/SnackbarItem/SnackbarItem.styles.js b/src/SnackbarItem/SnackbarItem.styles.js
@@ -1,20 +1,11 @@
 import green from '@material-ui/core/colors/green';
 import amber from '@material-ui/core/colors/amber';
+import { muiClasses } from './SnackbarItem.util';
 import {
     TRANSITION_DELAY,
     TRANSITION_DOWN_DURATION,
 } from '../utils/constants';
 
-const muiClasses = {
-    root: {},
-    anchorOriginTopCenter: {},
-    anchorOriginBottomCenter: {},
-    anchorOriginTopRight: {},
-    anchorOriginBottomRight: {},
-    anchorOriginTopLeft: {},
-    anchorOriginBottomLeft: {},
-};
-
 const styles = theme => ({
     ...muiClasses,
     base: {

diff --git a/src/SnackbarItem/SnackbarItem.util.js b/src/SnackbarItem/SnackbarItem.util.js
@@ -57,15 +57,15 @@ const defaultAnchorOrigin = {
     horizontal: 'left',
 };
 
-const notistackClasses = [
-    'base',
-    'variantSuccess',
-    'variantError',
-    'variantInfo',
-    'variantWarning',
-    'message',
-    'icon',
-];
+const muiClasses = {
+    root: {},
+    anchorOriginTopCenter: {},
+    anchorOriginBottomCenter: {},
+    anchorOriginTopRight: {},
+    anchorOriginBottomRight: {},
+    anchorOriginTopLeft: {},
+    anchorOriginBottomLeft: {},
+};
 
 /**
  * returns transition direction according the the given anchor origin
@@ -89,9 +89,9 @@ const capitalise = text => text.charAt(0).toUpperCase() + text.slice(1);
  * in material-ui snackbar classes prop
  * @param {object} classes
  */
-const muiClasses = classes => (
+const getMuiClasses = classes => (
     Object.keys(classes)
-        .filter(key => !notistackClasses.includes(key))
+        .filter(key => muiClasses[key] !== undefined)
         .reduce((obj, key) => ({
             ...obj,
             [key]: classes[key],
@@ -102,6 +102,7 @@ export {
     capitalise,
     defaultAnchorOrigin,
     getTransitionDirection,
+    getMuiClasses,
     muiClasses,
     TransitionComponent,
     variantIcon,

diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
@@ -99,6 +99,8 @@ class SnackbarProvider extends Component {
                 ...snacks.map(item => (item.key === key ? { ...item, open: false } : { ...item })),
             ],
         }));
+
+        if (this.props.onClose) this.props.onClose(key);
     };
 
     /**
@@ -118,6 +120,8 @@ class SnackbarProvider extends Component {
             }),
             () => setTimeout(this.handleDisplaySnack, enterDelay),
         );
+
+        if (this.props.onExited) this.props.onExited(key);
     };
 
     render() {
@@ -153,10 +157,14 @@ SnackbarProvider.propTypes = {
      * on top of one another
      */
     maxSnack: PropTypes.number,
+    onClose: PropTypes.func,
+    onExited: PropTypes.func,
 };
 
 SnackbarProvider.defaultProps = {
     maxSnack: 3,
+    onClose: undefined,
+    onExited: undefined,
 };
 
 export default SnackbarProvider;