Pure <Snackbar>

components/snackbar/index.jsx

@@ -10,20 +10,22 @@ class Snackbar extends React.Component {
     icon: React.PropTypes.string,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
+    onTimeout: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
 
-  state = {
-    active: false
+  handleClick = (event) => {
+    this.props.onClick(event, this);
   };
 
-  handleClick = (event) => {
-    this.setState({active: false});
-    if (this.props.onClick) {
-      this.props.onClick(event, this);
+  componentDidUpdate () {
+    if (this.props.active && this.props.timeout) {
+      setTimeout(() => {
+        this.props.onTimeout(event, this);
+      }, this.props.timeout * 1000);
     }
-  };
+  }
 
   renderButton () {
     if (this.props.action) {
@@ -32,7 +34,7 @@ class Snackbar extends React.Component {
           className={style.button}
           kind='flat'
           label={this.props.action}
-          onClick={this.handleClick}
+          onClick={this.props.onClick ? this.handleClick : null}
         />
       );
     }
@@ -40,7 +42,7 @@ class Snackbar extends React.Component {
 
   render () {
     let className = `${style.root} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
+    if (this.props.active) className += ` ${style.active}`;
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
@@ -51,19 +53,6 @@ class Snackbar extends React.Component {
       </div>
     );
   }
-
-  hide () {
-    this.setState({active: false});
-  }
-
-  show () {
-    this.setState({active: true});
-    if (this.props.timeout) {
-      setTimeout(() => {
-        this.setState({ active: false });
-      }, this.props.timeout * 1000);
-    }
-  }
 }
 
 export default Snackbar;

components/snackbar/readme.md

@@ -42,13 +42,6 @@ class SnackbarTest extends React.Component {
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
+| `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
-
-## Methods
-
-The Snackbar, in a similar way to the Dialog and Drawer holds state to check whether it's being displayed or not. It exposes methods to hide and show it manually:
-
-- `hide` used to hide the Snackbar.
-- `show` used to show the Snackbar.
-

docs/app/components/layout/main/modules/examples/snackbar_example_1.txt

@@ -1,24 +1,36 @@
 class SnackbarTest extends React.Component {
-  handleClick = () => {
-    this.refs.snackbar.show();
+  handleSnackbarClick = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
   };
 
-  handleSnackbarClick = () => {
-    this.refs.snackbar.hide();
+  handleSnackbarTimeout = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleClick = () => {
+    this.setState({ active: true });
+  };
+
+  state = {
+    active: false
   };
 
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
         <Snackbar
-          action='Nice'
+          action='Dismiss'
+          active={this.state.active}
           icon='question-answer'
-          label='A new developer started using React Toolbox'
+          label='Snackbar action cancel'
+          timeout={2}
           onClick={this.handleSnackbarClick}
-          ref='snackbar'
-          type='accept'
-      />
+          onTimeout={this.handleSnackbarTimeout}
+          type='cancel'
+        />
       </section>
     );
   }

spec/components/snackbar.jsx

@@ -3,12 +3,23 @@ import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
 class SnackbarTest extends React.Component {
-  handleClick = (event, snackbar) => {
-    console.log('handleClick', event, snackbar);
+
+  handleSnackbarClick = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
   };
 
-  handleSnackbar = () => {
-    this.refs.snackbar.show();
+  handleSnackbarTimeout = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleClick = () => {
+    this.setState({ active: true });
+  };
+
+  state = {
+    active: false
   };
 
   render () {
@@ -16,13 +27,15 @@ class SnackbarTest extends React.Component {
       <section>
         <h5>Snackbars & Toasts</h5>
         <p>lorem ipsum...</p>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
+        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
         <Snackbar
-          ref='snackbar'
           action='Dismiss'
+          active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
-          onClick={this.handleClick}
+          timeout={2}
+          onClick={this.handleSnackbarClick}
+          onTimeout={this.handleSnackbarTimeout}
           type='cancel'
         />
       </section>