Add proptypes to notifications and duration prop

Author: donnieberg

components/SLDSNotification/index.js

@@ -14,12 +14,38 @@ const classNames = require("classnames");
 import SLDSButton from "../SLDSButton";
 import {Icon} from "../SLDSIcons";
 
+const displayName = 'SLDSNotification';
+const propTypes = {
+  className: React.PropTypes.string,
+  content: React.PropTypes.node,
+  dismissible: React.PropTypes.bool,
+  duration: React.PropTypes.number,
+  icon: React.PropTypes.string,
+  onDismiss: React.PropTypes.func,
+  texture: React.PropTypes.bool,
+  theme: React.PropTypes.oneOf(["success", "warning", "error", "offline"]),
+  variant: React.PropTypes.oneOf(["alert", "toast"]),
+};
+
+const defaultProps = {
+  dismissible: true,
+};
+
 class SLDSNotification extends React.Component {
   constructor(props){
     super(props);
     this.state = { isOpen: true };
   }
 
+  componentDidMount() {
+    if(this.props.duration) {
+      const that = this;
+      setTimeout(function() {
+        that.setState({ isOpen: false});
+      }, that.props.duration);
+    }
+  }
+
   renderIcon(){
     if(this.props.icon){
       let classes = "";
@@ -57,7 +83,7 @@ class SLDSNotification extends React.Component {
 
   onDismiss(){
     if(this.props.onDismiss) this.props.onDismiss();
-    this.setState({isOpen:false});
+    this.setState({isOpen: false});
   }
 
   renderAlertContent(){
@@ -94,34 +120,25 @@ class SLDSNotification extends React.Component {
 
   render(){
     if(this.state.isOpen){
-    return(
-      <div className="slds-notify-container">
-        <div className={this.getClassName()} role="alert">
-          <span className="slds-assistive-text">{this.props.theme}</span>
-          {this.renderClose()}
-          {this.renderAlertContent()}
-          {this.renderToastContent()}
+      return (
+        <div className="slds-notify-container">
+          <div className={this.getClassName()} role="alert">
+            <span className="slds-assistive-text">{this.props.theme}</span>
+            {this.renderClose()}
+            {this.renderAlertContent()}
+            {this.renderToastContent()}
+          </div>
         </div>
-      </div>
-    );
+      );
     }else{
       return null;
     }
   }
 }
-SLDSNotification.propTypes = {
-  content: React.PropTypes.node,
-  icon: React.PropTypes.string,
-  variant: React.PropTypes.oneOf(["alert", "toast"]),
-  theme: React.PropTypes.oneOf(["success", "warning", "error", "offline"]),
-  texture: React.PropTypes.bool,
-  dismissible: React.PropTypes.bool,
-  onDismiss: React.PropTypes.func,
-};
 
-SLDSNotification.defaultProps = {
-  dismissible: true
-};
+SLDSNotification.displayName = displayName;
+SLDSNotification.propTypes = propTypes;
+SLDSNotification.defaultProps = defaultProps;
 
 module.exports = SLDSNotification;
 

demo/pages/HomePage/NotificationSection.jsx

@@ -22,7 +22,8 @@ module.exports = React.createClass( {
 
   getInitialState () {
     return {
-      modalIsOpen: false
+      modalIsOpen: false,
+      toastsAreOpen: true,
     };
   },
 
@@ -89,9 +90,14 @@ module.exports = React.createClass( {
           Notification
           </a>
         </h3>
-        <h4>
-          * All notifications are fixed and centered at the top of the screen.
-        </h4>
+        <ul className="slds-p-vertical--medium">
+          <li>
+            <h4>* All notifications are fixed and centered at the top of the screen.</h4>
+          </li>
+          <li>
+            <h4>* Toasts default duration is five seconds and will then disappear.</h4>
+          </li>
+        </ul>
         <PrismCode className='language-markup'>
           {require('raw-loader!../../code-snippets/SLDSNotification.txt')}
         </PrismCode>
@@ -102,6 +108,9 @@ module.exports = React.createClass( {
               <div className="slds-p-bottom--small">
                 {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />}
               </div>
+              <div className="slds-p-bottom--small">
+                {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} duration={5000} onDismiss={this.dismissToast} />}
+              </div>
               <div className="slds-p-bottom--small">
                 {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />}
               </div>
@@ -113,7 +122,6 @@ module.exports = React.createClass( {
 
           <div className="slds-p-vertical--small">
             <h4 className="slds-text-heading--small ">Toasts</h4>
-
             <div className="demo-only" style={toastStyle}>
               Base
               {this.state.modalIsOpen ? null: <SLDSNotification variant='toast' theme='success' icon='notification' content={successMsg} onDismiss={this.dismissToast} />}