diff --git a/src/snackbar.jsx b/src/snackbar.jsx
index 1b30908d4992ea..1872231a7afa38 100644
--- a/src/snackbar.jsx
+++ b/src/snackbar.jsx
@@ -1,5 +1,4 @@
import React from 'react';
-import StylePropable from './mixins/style-propable';
import Transitions from './styles/transitions';
import ClickAwayable from './mixins/click-awayable';
import FlatButton from './flat-button';
@@ -7,6 +6,66 @@ import getMuiTheme from './styles/getMuiTheme';
import ContextPure from './mixins/context-pure';
import StyleResizable from './mixins/style-resizable';
+function getStyles(props, state) {
+ const {
+ muiTheme: {
+ baseTheme,
+ snackbar,
+ zIndex,
+ },
+ open,
+ } = state;
+
+ const {
+ desktopGutter,
+ desktopSubheaderHeight,
+ } = baseTheme.spacing;
+
+ const isSmall = state.deviceSize === StyleResizable.statics.Sizes.SMALL;
+
+ const styles = {
+ root: {
+ position: 'fixed',
+ left: 0,
+ display: 'flex',
+ right: 0,
+ bottom: 0,
+ zIndex: zIndex.snackbar,
+ visibility: open ? 'visible' : 'hidden',
+ transform: open ? 'translate3d(0, 0, 0)' : `translate3d(0, ${desktopSubheaderHeight}px, 0)`,
+ transition: `${Transitions.easeOut('400ms', 'transform')}, ${
+ Transitions.easeOut('400ms', 'visibility')}`,
+ },
+ body: {
+ backgroundColor: snackbar.backgroundColor,
+ padding: `0 ${desktopGutter}px`,
+ height: desktopSubheaderHeight,
+ lineHeight: `${desktopSubheaderHeight}px`,
+ borderRadius: isSmall ? 0 : 2,
+ maxWidth: isSmall ? 'inherit' : 568,
+ minWidth: isSmall ? 'inherit' : 288,
+ flexGrow: isSmall ? 1 : 0,
+ margin: 'auto',
+ },
+ content: {
+ fontSize: 14,
+ color: snackbar.textColor,
+ opacity: open ? 1 : 0,
+ transition: open ? Transitions.easeOut('500ms', 'opacity', '100ms') : Transitions.easeOut('400ms', 'opacity'),
+ },
+ action: {
+ color: snackbar.actionColor,
+ float: 'right',
+ marginTop: 6,
+ marginRight: -16,
+ marginLeft: desktopGutter,
+ backgroundColor: 'transparent',
+ },
+ };
+
+ return styles;
+}
+
const Snackbar = React.createClass({
propTypes: {
@@ -74,13 +133,11 @@ const Snackbar = React.createClass({
muiTheme: React.PropTypes.object,
},
- //for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [
- StylePropable,
StyleResizable,
ClickAwayable,
ContextPure,
@@ -89,7 +146,7 @@ const Snackbar = React.createClass({
statics: {
getRelevantContextKeys(muiTheme) {
const theme = muiTheme.snackbar;
- const spacing = muiTheme.rawTheme.spacing;
+ const spacing = muiTheme.baseTheme.spacing;
return {
textColor: theme.textColor,
@@ -133,9 +190,8 @@ const Snackbar = React.createClass({
},
componentWillReceiveProps(nextProps, nextContext) {
- const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({
- muiTheme: newMuiTheme,
+ muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
if (this.state.open && nextProps.open === this.props.open &&
@@ -200,68 +256,6 @@ const Snackbar = React.createClass({
}
},
- getStyles() {
- const {
- textColor,
- backgroundColor,
- desktopGutter,
- desktopSubheaderHeight,
- actionColor,
- } = this.constructor.getRelevantContextKeys(this.state.muiTheme);
-
- const isSmall = this.state.deviceSize === this.constructor.Sizes.SMALL;
-
- const styles = {
- root: {
- position: 'fixed',
- left: 0,
- display: 'flex',
- right: 0,
- bottom: 0,
- zIndex: this.state.muiTheme.zIndex.snackbar,
- visibility: 'hidden',
- transform: `translate3d(0, ${desktopSubheaderHeight}px, 0)`,
- transition: `${Transitions.easeOut('400ms', 'transform')}, ${
- Transitions.easeOut('400ms', 'visibility')}`,
- },
- rootWhenOpen: {
- visibility: 'visible',
- transform: 'translate3d(0, 0, 0)',
- },
- body: {
- backgroundColor: backgroundColor,
- padding: `0 ${desktopGutter}px`,
- height: desktopSubheaderHeight,
- lineHeight: `${desktopSubheaderHeight}px`,
- borderRadius: isSmall ? 0 : 2,
- maxWidth: isSmall ? 'inherit' : 568,
- minWidth: isSmall ? 'inherit' : 288,
- flexGrow: isSmall ? 1 : 0,
- margin: 'auto',
- },
- content: {
- fontSize: 14,
- color: textColor,
- opacity: 0,
- transition: Transitions.easeOut('400ms', 'opacity'),
- },
- contentWhenOpen: {
- opacity: 1,
- transition: Transitions.easeOut('500ms', 'opacity', '100ms'),
- },
- action: {
- color: actionColor,
- float: 'right',
- marginTop: 6,
- marginRight: -16,
- marginLeft: desktopGutter,
- backgroundColor: 'transparent',
- },
- };
-
- return styles;
- },
-
_setAutoHideTimer() {
const autoHideDuration = this.props.autoHideDuration;
@@ -285,37 +279,28 @@ const Snackbar = React.createClass({
...others,
} = this.props;
- const styles = this.getStyles();
-
const {
- open,
action,
message,
+ muiTheme: {
+ prepareStyles,
+ },
} = this.state;
- const rootStyles = open ?
- this.mergeStyles(styles.root, styles.rootWhenOpen, style) :
- this.mergeStyles(styles.root, style);
-
- let actionButton;
- if (action) {
- actionButton = (
-