Add new prop to allow dense margins (#86)

* Remove onClickAction from rest object

* Fixes #58 - Add new prop  to allow dense margins

CHANGELOG.md

@@ -3,8 +3,9 @@
 
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
-**@cwbuecheler @mpash @martinmckenna**
+**@cwbuecheler @mpash @khhan1993 @Fs00 @martinmckenna**
 * Rename `InjectedSnackbarProps` to `withSnackbarProps` in type defs [#59](https://github.com/iamhosseindhv/notistack/issues/59)
+* Add new prop `dense` to allow dense margins for snackbars (suitable for mobiles) [#58](https://github.com/iamhosseindhv/notistack/issues/58)
 * Improve performance and prevent unnecessary child re-rendering [#39](https://github.com/iamhosseindhv/notistack/issues/39)
 
 

README.md

@@ -82,20 +82,23 @@ Or see the code for a minimal working example: [codesandbox](https://codesandbox
 All material-ui Snackbar props will get passed down to a Snackbar component. See Material-ui [docs](https://material-ui.com/api/snackbar/) for more info.
 ```javascript
 // Maximum number of snackbars that can be stacked on top of eachother.
-maxSnack            type: number          required: true        default: 3
+maxSnack            type: number          required: false        default: 3
 
 // The little icon that is displayed in a snackbar
 iconVariant         type: any             required: false       default: Material design icons
 
-// hide or display icon variant of a snackbar
+// Hide or display icon variant of a snackbar
 hideIconVariant     type: boolean         required: false       default: false
 
-// event fired when user clicks on action button (if any)
-onClickAction       type: func            required: false       default: dismiss the snackbar
+// Event fired when user clicks on action button (if any)
+onClickAction       type: func            required: false       default: Dismiss the snackbar
 
 // Do not allow snackbars with the same message to be displayed multiple times
 preventDuplicate    type: boolean         required: false       default: false
 
+// Denser margins for snackbars. Recommended to be used on mobile devices
+dense               type: boolean         required: false       default: false
+
 // Example of a Mui-Snackbar prop
 transitionDuration={{ exit: 380, enter: 400 }}
 ```

index.d.ts

@@ -36,6 +36,7 @@ export interface SnackbarProviderProps extends Omit<SnackbarProps, 'open' | 'mes
     hideIconVariant?: boolean;
     onClickAction?: Function;
     preventDuplicate?: boolean;
+    dense?: boolean;
 }
 
 export const SnackbarProvider: React.ComponentType<SnackbarProviderProps>;

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;

src/SnackbarProvider.js

@@ -13,13 +13,21 @@ class SnackbarProvider extends Component {
 
     queue = [];
 
+    get margins() {
+        let offsets = { view: 20, snackbar: 12 };
+        if (this.props.dense) {
+            offsets = { view: 0, snackbar: 8 };
+        }
+        return offsets;
+    }
+
     get offsets() {
         const { snacks } = this.state;
         return snacks.map((item, i) => {
             let index = i;
-            let offset = 20;
+            let offset = this.margins.view;
             while (snacks[index - 1]) {
-                offset += snacks[index - 1].height + 16;
+                offset += snacks[index - 1].height + this.margins.snackbar;
                 index -= 1;
             }
             return offset;
@@ -206,7 +214,7 @@ class SnackbarProvider extends Component {
     };
 
     render() {
-        const { children, maxSnack, ...props } = this.props;
+        const { children, maxSnack, dense, ...props } = this.props;
         const { snacks } = this.state;
 
         return (
@@ -238,20 +246,21 @@ class SnackbarProvider extends Component {
 SnackbarProvider.propTypes = {
     children: PropTypes.element.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;