[Snackbar] Fix animation bug

mui · May 22, 2016 · 9ee3306 · 9ee3306
1 parent 5b1e341
commit 9ee3306
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js b/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
@@ -18,7 +18,6 @@ export default class SnackbarExampleSimple extends React.Component {
   }
 
   handleTouchTap = (message) => {
-
     this.setState({
       open: true,
       message: message,

diff --git a/src/Snackbar/Snackbar.js b/src/Snackbar/Snackbar.js
@@ -3,7 +3,7 @@ import transitions from '../styles/transitions';
 import ClickAwayListener from '../internal/ClickAwayListener';
 import SnackbarBody from './SnackbarBody';
 
-function getStyles(props, context, state) {
+function getStyles(props, context, state, component) {
   const {
     muiTheme: {
       baseTheme: {
@@ -16,6 +16,7 @@ function getStyles(props, context, state) {
   } = context;
 
   const {open} = state;
+  const isMultiline = component.messageElement && component.messageElement.offsetHeight > 20;
 
   const styles = {
     root: {
@@ -28,7 +29,7 @@ function getStyles(props, context, state) {
       visibility: open ? 'visible' : 'hidden',
       transform: open ?
         'translate3d(0, 0, 0)' :
-        `translate3d(0, ${desktopSubheaderHeight}px, 0)`,
+        `translate3d(0, ${isMultiline ? 80 : desktopSubheaderHeight}px, 0)`,
       transition: `${transitions.easeOut('400ms', 'transform')}, ${
         transitions.easeOut('400ms', 'visibility')}`,
     },
@@ -208,7 +209,7 @@ class Snackbar extends Component {
     } = this.state;
 
     const {prepareStyles} = this.context.muiTheme;
-    const styles = getStyles(this.props, this.context, this.state);
+    const styles = getStyles(this.props, this.context, this.state, this);
 
     return (
       <ClickAwayListener onClickAway={open && this.componentClickAway}>