diff --git a/.eslintrc b/.eslintrc index 7c0edce0..1086b7f0 100644 --- 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 index 6a5e7ed4..50aa4326 100644 --- a/src/SnackbarItem/SnackbarItem.js +++ b/src/SnackbarItem/SnackbarItem.js @@ -9,7 +9,7 @@ import { capitalise, defaultAnchorOrigin, getTransitionDirection, - muiClasses, + getMuiClasses, TransitionComponent, variantIcon, } from './SnackbarItem.util'; @@ -17,11 +17,18 @@ import { 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)} > ({ ...muiClasses, base: { diff --git a/src/SnackbarItem/SnackbarItem.util.js b/src/SnackbarItem/SnackbarItem.util.js index 840d20d1..3a2b2266 100644 --- 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 index ef80698f..56ff0ce5 100644 --- 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;