> & { WrappedComponent: React.ComponentType };
+export function withSnackbar
(component: React.ComponentType
):
+ React.ComponentClass> & { WrappedComponent: React.ComponentType };
+
export function useSnackbar(): InjectedNotistackProps;
export type ClassNameMap = Record;
-/** all MUI props, including class keys for notistack and MUI with additional notistack props */
-export interface SnackbarProviderProps
- extends Omit {
+// all material-ui props, including class keys for notistack and material-ui with additional notistack props
+export interface SnackbarProviderProps extends Omit {
classes?: Partial>;
- maxSnack: number;
- iconVariant?: React.ComponentType;
+ maxSnack?: number;
+ iconVariant?: Partial>;
hideIconVariant?: boolean;
onClickAction?: Function;
preventDuplicate?: boolean;
+ dense?: boolean;
}
export const SnackbarProvider: React.ComponentType;
diff --git a/package-lock.json b/package-lock.json
index cf3b6d85..912e994d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "notistack",
- "version": "0.4.3",
+ "version": "0.5.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index f1158e13..234ed6f2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "notistack",
- "version": "0.4.3",
- "description": "Highly customisable notification snackbars (Highly customizable notification snackbars (toasts) that can be stacked on top of each other) that can be stacked on top of each other",
+ "version": "0.5.1",
+ "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "build/index",
"license": "MIT",
"author": {
@@ -62,7 +62,6 @@
"react",
"javascript",
"material-ui",
- "material ui",
"toast",
"redux",
"snackbar",
diff --git a/src/SnackbarItem/SnackbarItem.js b/src/SnackbarItem/SnackbarItem.js
index a27f6447..ce7d6e60 100644
--- a/src/SnackbarItem/SnackbarItem.js
+++ b/src/SnackbarItem/SnackbarItem.js
@@ -59,7 +59,15 @@ class SnackbarItem extends Component {
} = this.props;
const { action: contentAction, className, ...otherContentProps } = ContentProps;
- const { key, variant = 'default', persist, ...singleSnackProps } = snack;
+
+ const {
+ key,
+ persist,
+ variant = 'default',
+ onClickAction: singleOnClickAction,
+ ...singleSnackProps
+ } = snack;
+
const icon = iconVariant[variant];
const contentProps = {
@@ -68,7 +76,7 @@ class SnackbarItem extends Component {
action: snack.action || contentAction || action,
};
- let onClickHandler = snack.action ? snack.onClickAction : onClickAction;
+ let onClickHandler = snack.action ? singleOnClickAction : onClickAction;
onClickHandler = onClickHandler || this.handleClose(key);
const anchOrigin = singleSnackProps.anchorOrigin || anchorOrigin;
diff --git a/src/SnackbarItem/SnackbarItem.styles.js b/src/SnackbarItem/SnackbarItem.styles.js
index 1a205a1f..db01a331 100644
--- a/src/SnackbarItem/SnackbarItem.styles.js
+++ b/src/SnackbarItem/SnackbarItem.styles.js
@@ -13,7 +13,7 @@ export const styles = theme => ({
fontFamily: theme.typography.fontFamily,
},
lessPadding: {
- paddingLeft: theme.spacing.unit * 2.5,
+ paddingLeft: 8 * 2.5,
},
variantSuccess: {
backgroundColor: green[600],
diff --git a/src/SnackbarProvider.js b/src/SnackbarProvider.js
index 26b15705..bae0bd90 100644
--- a/src/SnackbarProvider.js
+++ b/src/SnackbarProvider.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SnackbarContext, SnackbarContextNext } from './SnackbarContext';
import { TRANSITION_DELAY, TRANSITION_DOWN_DURATION, MESSAGES } from './utils/constants';
@@ -7,9 +7,16 @@ import warning from './utils/warning';
class SnackbarProvider extends Component {
- state = {
- snacks: [],
- };
+ constructor(props) {
+ super(props);
+ this.state = {
+ snacks: [],
+ contextValue: {
+ handleEnqueueSnackbar: this.handleEnqueueSnackbar,
+ handleCloseSnackbar: this.handleDismissSnack,
+ },
+ };
+ }
queue = [];
@@ -17,9 +24,13 @@ class SnackbarProvider extends Component {
const { snacks } = this.state;
return snacks.map((item, i) => {
let index = i;
- let offset = 20;
+ const { view: viewOffset, snackbar: snackbarOffset } = this.props.dense
+ ? { view: 0, snackbar: 4 }
+ : { view: 20, snackbar: 12 };
+ let offset = viewOffset;
while (snacks[index - 1]) {
- offset += snacks[index - 1].height + 16;
+ const snackHeight = snacks[index - 1].height || 48;
+ offset += snackHeight + snackbarOffset;
index -= 1;
}
return offset;
@@ -206,29 +217,24 @@ class SnackbarProvider extends Component {
};
render() {
- const { children, maxSnack, ...props } = this.props;
- const { snacks } = this.state;
+ const { children, maxSnack, dense, ...props } = this.props;
+ const { contextValue, snacks } = this.state;
return (
-
-
- {children}
- {snacks.map((snack, index) => (
-
- ))}
-
+
+ {children}
+ {snacks.map((snack, index) => (
+
+ ))}
);
@@ -236,22 +242,23 @@ class SnackbarProvider extends Component {
}
SnackbarProvider.propTypes = {
- children: PropTypes.element.isRequired,
+ children: PropTypes.node.isRequired,
/**
- * Maximum snackbars that can be stacked
- * on top of one another
+ * Maximum snackbars that can be stacked on top of one another.
*/
+ dense: PropTypes.bool,
maxSnack: PropTypes.number,
+ preventDuplicate: PropTypes.bool,
onClose: PropTypes.func,
onExited: PropTypes.func,
- preventDuplicate: PropTypes.bool,
};
SnackbarProvider.defaultProps = {
maxSnack: 3,
+ dense: false,
+ preventDuplicate: false,
onClose: undefined,
onExited: undefined,
- preventDuplicate: false,
};
export default SnackbarProvider;
diff --git a/src/withSnackbar.js b/src/withSnackbar.js
index 4c33c9e4..4c3f14f7 100644
--- a/src/withSnackbar.js
+++ b/src/withSnackbar.js
@@ -1,21 +1,27 @@
import React from 'react';
import { SnackbarContext, SnackbarContextNext } from './SnackbarContext';
-const withSnackbar = Component => props => (
-
- {handlePresentSnackbar => (
-
- {context => (
-
- )}
-
- )}
-
-);
+const withSnackbar = (Component) => {
+ const WrappedComponent = props => (
+
+ {handlePresentSnackbar => (
+
+ {context => (
+
+ )}
+
+ )}
+
+ );
+
+ WrappedComponent.displayName = `withSnackbar(${Component.displayName || Component.name || 'Component'})`;
+
+ return WrappedComponent;
+};
export default withSnackbar;