Add timeout to snackbar

Author: josephperrott

src/demo-app/snack-bar/snack-bar-demo.html

@@ -10,6 +10,15 @@ <h1>SnackBar demo</h1>
                 [(ngModel)]="actionButtonLabel"></md-input>
     </md-checkbox>
   </div>
+  <div>
+    <md-checkbox [(ngModel)]="setAutoHide">
+      <p *ngIf="!setAutoHide">Auto hide after duration</p>
+      <md-input type="number" class="demo-button-label-input"
+                *ngIf="setAutoHide"
+                 placeholder="Auto Hide Duration in ms"
+                 [(ngModel)]="autoHide"></md-input>
+    </md-checkbox>
+  </div>
 </div>
 
 <button md-raised-button (click)="open()">OPEN</button>

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdSnackBar} from '@angular/material';
+import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -10,11 +10,15 @@ export class SnackBarDemo {
   message: string = 'Snack Bar opened.';
   actionButtonLabel: string = 'Retry';
   action: boolean = false;
+  setAutoHide: boolean = true;
+  autoHide: number = 0;
 
   constructor(
       public snackBar: MdSnackBar) { }
 
   open() {
-    this.snackBar.open(this.message, this.action && this.actionButtonLabel);
+    let config = new MdSnackBarConfig();
+    config.autoHide = this.autoHide;
+    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

src/lib/snack-bar/README.md

@@ -15,6 +15,7 @@
 | `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. |
 | `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. |
 | `announcementMessage: string` | The message to announce with the snack bar. |
+| `dismiss: number` | The length of time in milliseconds to wait before autodismissing the snack bar. |
 
 
 ### Example

src/lib/snack-bar/snack-bar-config.ts

@@ -13,4 +13,7 @@ export class MdSnackBarConfig {
 
   /** The view container to place the overlay for the snack bar into. */
   viewContainerRef?: ViewContainerRef = null;
+
+  /** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
+  dismiss?: number = 0;
 }

src/lib/snack-bar/snack-bar.spec.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core/testing';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
 import {MdSnackBar, MdSnackBarModule} from './snack-bar';
+import {MdSnackBarConfig} from './snack-bar-config';
 import {OverlayContainer, MdLiveAnnouncer} from '../core';
 import {SimpleSnackBar} from './simple-snack-bar';
 
@@ -280,13 +281,30 @@ describe('MdSnackBar', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      viewContainerFixture.whenStable().then(() => {
-        expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
-        expect(actionObservableCompleted).toBeTruthy('Expected the snack bar to notify of action');
-      });
+      expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
+      expect(actionObservableCompleted).toBeTruthy('Expected the snack bar to notify of action');
 
       tick(500);
     }));
+
+    it('should dismiss automatically after a specified timeout', fakeAsync(() => {
+      let dismissObservableCompleted = false;
+      let config = new MdSnackBarConfig();
+      config.dismiss = 250;
+      let snackBarRef = snackBar.open('content', 'test', config);
+      snackBarRef.afterDismissed().subscribe(null, null, () => {
+        dismissObservableCompleted = true;
+      });
+
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+      expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed');
+
+      tick(1000);
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+      expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
+    }));
 });
 
 @Directive({selector: 'dir-with-view-container'})

src/lib/snack-bar/snack-bar.ts

@@ -22,8 +22,6 @@ import {MdSnackBarContainer} from './snack-bar-container';
 import {SimpleSnackBar} from './simple-snack-bar';
 import {extendObject} from '../core/util/object-extend';
 
-// TODO(josephperrott): Automate dismiss after timeout.
-
 
 /**
  * Service to dispatch Material Design snack bar messages.
@@ -64,6 +62,12 @@ export class MdSnackBar {
     } else {
       snackBarRef.containerInstance.enter();
     }
+
+    // TODO(josephperrott): Set dismiss setTimeout after the snackbar finishes entering the view.
+    if (config.dismiss > 0) {
+      setTimeout(() => snackBarRef.dismiss(), config.dismiss);
+    }
+
     this._live.announce(config.announcementMessage, config.politeness);
     this._snackBarRef = snackBarRef;
     return this._snackBarRef;