Remove renderVariant prop.

src/SnackbarProvider.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Slide from '@material-ui/core/Slide';
 import SnackbarContext from './SnackbarContext';
-import { TRANSITION_DELAY, TRANSITION_DOWN_DURATION, MESSAGES, iconVariant, RENDER_VARIANTS, SNACKBAR_INDENTS } from './utils/constants';
+import { TRANSITION_DELAY, TRANSITION_DOWN_DURATION, MESSAGES, iconVariant, originKeyExtractor } from './utils/constants';
 import SnackbarItem from './SnackbarItem';
 import SnackbarContainer from './SnackbarContainer';
 import warning from './utils/warning';
@@ -21,23 +21,6 @@ class SnackbarProvider extends Component {
 
     queue = [];
 
-    get offsets() {
-        const { snacks } = this.state;
-        return snacks.map((item, i) => {
-            let index = i;
-            const { view: viewOffset, snackbar: snackbarOffset } = this.props.dense
-                ? SNACKBAR_INDENTS.dense
-                : SNACKBAR_INDENTS.default;
-            let offset = viewOffset;
-            while (snacks[index - 1]) {
-                const snackHeight = snacks[index - 1].height || 48;
-                offset += snackHeight + snackbarOffset;
-                index -= 1;
-            }
-            return offset;
-        });
-    }
-
     /**
      * Adds a new snackbar to the queue to be presented.
      * @param {string} message - text of the notification
@@ -62,9 +45,10 @@ class SnackbarProvider extends Component {
         const id = key || new Date().getTime() + Math.random();
         const snack = {
             key: id,
-            message,
             ...options,
             open: true,
+            message,
+            anchorOrigin: options.anchorOrigin || this.props.anchorOrigin,
         };
 
         if (options.persist) {
@@ -185,43 +169,37 @@ class SnackbarProvider extends Component {
         if (this.props.onExited) this.props.onExited(event, key);
     };
 
-    /**
-     * Sets height for a given snackbar
-     * @param {number} height - height of snackbar after it's been rendered
-     * @param {number} key - id of the snackbar we want to remove
-     */
-    handleSetHeight = (key, height) => {
-        this.setState(({ snacks }) => ({
-            snacks: snacks.map(item => (
-                item.key === key ? { ...item, height } : { ...item }
-            )),
-        }));
-    };
-
     render() {
-        const { children, maxSnack, dense, renderVariant, anchorOrigin, ...props } = this.props;
-        const { contextValue, snacks } = this.state;
+        const { children, maxSnack, dense, ...props } = this.props;
+        const { contextValue } = this.state;
+
+        const categ = this.state.snacks.reduce((acc, current) => {
+            const category = originKeyExtractor(current.anchorOrigin);
+            const existingOfCategory = acc[category] || [];
+            return {
+                ...acc,
+                [category]: [...existingOfCategory, current],
+            };
+        }, {});
 
         return (
             <SnackbarContext.Provider value={contextValue}>
                 {children}
-                <SnackbarContainer renderVariant={renderVariant} anchorOrigin={anchorOrigin}>
-                    {snacks.map((snack, index) => (
-                        <SnackbarItem
-                            {...props}
-                            anchorOrigin={anchorOrigin}
-                            key={snack.key}
-                            snack={snack}
-                            offset={this.offsets[index]}
-                            iconVariant={Object.assign(iconVariant, this.props.iconVariant)}
-                            onClose={this.handleCloseSnack}
-                            onExited={this.handleExitedSnack}
-                            onSetHeight={this.handleSetHeight}
-                            renderVariant={renderVariant}
-                            dense={dense}
-                        />
-                    ))}
-                </SnackbarContainer>
+                {Object.entries(categ).map(([origin, snacks]) => (
+                    <SnackbarContainer key={origin} dense={dense} anchorOrigin={snacks[0].anchorOrigin}>
+                        {snacks.map(snack => (
+                            <SnackbarItem
+                                {...props}
+                                key={snack.key}
+                                dense={dense}
+                                snack={snack}
+                                iconVariant={Object.assign(iconVariant, this.props.iconVariant)}
+                                onClose={this.handleCloseSnack}
+                                onExited={this.handleExitedSnack}
+                            />
+                        ))}
+                    </SnackbarContainer>
+                ))}
             </SnackbarContext.Provider>
         );
     }
@@ -351,11 +329,6 @@ SnackbarProvider.propTypes = {
         PropTypes.number,
         PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
     ]),
-    /**
-     * "default" - render snackbars by default without wrapped (as in material-ui)
-     * "wrapped" - render snackbars in fixed wrapper
-     */
-    renderVariant: PropTypes.oneOf(RENDER_VARIANTS),
 };
 
 SnackbarProvider.defaultProps = {
@@ -370,7 +343,6 @@ SnackbarProvider.defaultProps = {
     },
     autoHideDuration: 5000,
     TransitionComponent: Slide,
-    renderVariant: RENDER_VARIANTS.default,
 };
 
 export default SnackbarProvider;