From 30c6b53ebedb2ab4a9f8d21eb3fb3d93f1f82c64 Mon Sep 17 00:00:00 2001 From: Kacper Polak Date: Fri, 28 Oct 2016 14:50:30 +0200 Subject: [PATCH 1/5] Autho Hide Duration for SnackBar --- src/demo-app/snack-bar/snack-bar-demo.html | 9 +++++++++ src/demo-app/snack-bar/snack-bar-demo.ts | 8 +++++++- src/lib/snack-bar/snack-bar-config.ts | 5 ++++- src/lib/snack-bar/snack-bar-ref.ts | 6 ++++++ src/lib/snack-bar/snack-bar.ts | 6 ++++++ 5 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index 232a83f6a643..b1b24f1b1f3e 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -10,6 +10,15 @@

SnackBar demo

[(ngModel)]="actionButtonLabel"> +
+ +

Auto hide after duration

+ + +
\ No newline at end of file diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 72a8710984c6..6bc33973540c 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/src/demo-app/snack-bar/snack-bar-demo.ts @@ -10,13 +10,19 @@ export class SnackBarDemo { message: string = 'Snack Bar opened.'; actionButtonLabel: string = 'Retry'; action: boolean = false; + autoHide: boolean = false; + autoHideMs: number | boolean; constructor( public snackBar: MdSnackBar, public viewContainerRef: ViewContainerRef) { } open() { - let config = new MdSnackBarConfig(this.viewContainerRef); + let autoHide: number | boolean = false; + if(this.autoHide) { + autoHide = this.autoHideMs + } + let config = new MdSnackBarConfig(this.viewContainerRef, autoHide); this.snackBar.open(this.message, this.action && this.actionButtonLabel, config); } } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 8eaebb8202cc..e03b8c912c54 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -12,7 +12,10 @@ export class MdSnackBarConfig { /** The view container to place the overlay for the snack bar into. */ viewContainerRef: ViewContainerRef; - constructor(viewContainerRef: ViewContainerRef) { + autoHideDuration: number | boolean; + + constructor(viewContainerRef: ViewContainerRef, autoHideDuration: number | boolean = false) { this.viewContainerRef = viewContainerRef; + this.autoHideDuration = autoHideDuration; } } diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index 5b088df78c4f..d38de32230bf 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -19,6 +19,8 @@ export class MdSnackBarRef { /** Subject for notifying the user that the snack bar has closed. */ private _afterClosed: Subject = new Subject(); + autoHide: number; + constructor(instance: T, containerInstance: MdSnackBarContainer, private _overlayRef: OverlayRef) { @@ -36,6 +38,10 @@ export class MdSnackBarRef { this._afterClosed.complete(); }); } + // Clear autohide interval + if(this.autoHide) { + clearInterval(this.autoHide); + } } /** Gets an observable that is notified when the snack bar is finished closing. */ diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index e2f2c5003c4a..5f73380debf5 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -56,6 +56,12 @@ export class MdSnackBar { } else { mdSnackBarRef.containerInstance.enter(); } + // Auto dismiss after timeout. + if(config.autoHideDuration) { + mdSnackBarRef.autoHide = setTimeout(() => { + mdSnackBarRef.dismiss(); + }, config.autoHideDuration); + } this._live.announce(config.announcementMessage, config.politeness); this._snackBarRef = mdSnackBarRef; return this._snackBarRef; From 3883e456e30376319f6701bc49ee15f4988d869a Mon Sep 17 00:00:00 2001 From: Kacper Polak Date: Fri, 28 Oct 2016 15:00:48 +0200 Subject: [PATCH 2/5] Update docs for snack-bar --- src/lib/snack-bar/README.md | 5 +++-- src/lib/snack-bar/snack-bar-config.ts | 6 ++++++ src/lib/snack-bar/snack-bar.ts | 2 -- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md index 96f39ce98467..d5369e8a0986 100644 --- a/src/lib/snack-bar/README.md +++ b/src/lib/snack-bar/README.md @@ -15,7 +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. | - +| `autoHideDuration: number | boolean` | The number of milliseconds to wait before automatically dismissing. If no value is specified the snackbar will dismiss normally. | ### Example The service can be injected in a component. @@ -30,7 +30,8 @@ export class MyComponent { viewContainerRef: ViewContainerRef) {} failedAttempt() { - config = new MdSnackBarConfig(this.viewContainerRef); + // This snackbar will dissmiss after 3s (3000ms) + config = new MdSnackBarConfig(this.viewContainerRef, 3000); this.snackBar.open('It didn\'t quite work!', 'Try Again', config); } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index e03b8c912c54..a8b28721e4ff 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -12,6 +12,12 @@ export class MdSnackBarConfig { /** The view container to place the overlay for the snack bar into. */ viewContainerRef: ViewContainerRef; + /* + * The number of milliseconds to wait before automatically dismissing. + * If no value is specified the snackbar will dismiss normally. + * If a value is provided the snackbar can still be dismissed normally. + * If a snackbar is dismissed before the timer expires, the timer will be cleared. + */ autoHideDuration: number | boolean; constructor(viewContainerRef: ViewContainerRef, autoHideDuration: number | boolean = false) { diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 5f73380debf5..26c0e199dc5f 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -21,8 +21,6 @@ import {MdSnackBarRef} from './snack-bar-ref'; import {MdSnackBarContainer} from './snack-bar-container'; import {SimpleSnackBar} from './simple-snack-bar'; -// TODO(josephperrott): Automate dismiss after timeout. - /** * Service to dispatch Material Design snack bar messages. From 81d01b740d78ee77e690f30e42dd88f73ff6c964 Mon Sep 17 00:00:00 2001 From: Kacper Polak Date: Fri, 28 Oct 2016 15:20:38 +0200 Subject: [PATCH 3/5] tslint fix --- src/lib/snack-bar/snack-bar-ref.ts | 2 +- src/lib/snack-bar/snack-bar.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index d38de32230bf..f4e5e9c6e8fb 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -39,7 +39,7 @@ export class MdSnackBarRef { }); } // Clear autohide interval - if(this.autoHide) { + if( this.autoHide ) { clearInterval(this.autoHide); } } diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 26c0e199dc5f..25e03c754fc7 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -55,7 +55,7 @@ export class MdSnackBar { mdSnackBarRef.containerInstance.enter(); } // Auto dismiss after timeout. - if(config.autoHideDuration) { + if( config.autoHideDuration ) { mdSnackBarRef.autoHide = setTimeout(() => { mdSnackBarRef.dismiss(); }, config.autoHideDuration); From b165c1e7efc65ff1c2cd838a381127bfa7874de7 Mon Sep 17 00:00:00 2001 From: Kacper Polak Date: Fri, 28 Oct 2016 15:33:09 +0200 Subject: [PATCH 4/5] tslint fix --- src/lib/snack-bar/snack-bar-ref.ts | 2 +- src/lib/snack-bar/snack-bar.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index f4e5e9c6e8fb..d1fcf77dcdb6 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -39,7 +39,7 @@ export class MdSnackBarRef { }); } // Clear autohide interval - if( this.autoHide ) { + if(this.autoHide !== false) { clearInterval(this.autoHide); } } diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 25e03c754fc7..2ef7a92a48b6 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -55,7 +55,7 @@ export class MdSnackBar { mdSnackBarRef.containerInstance.enter(); } // Auto dismiss after timeout. - if( config.autoHideDuration ) { + if(config.autoHideDuration !== false) { mdSnackBarRef.autoHide = setTimeout(() => { mdSnackBarRef.dismiss(); }, config.autoHideDuration); From 7a1a871b55b20c7826b7d290f0b1202701844ef5 Mon Sep 17 00:00:00 2001 From: Kacper Polak Date: Fri, 28 Oct 2016 15:38:04 +0200 Subject: [PATCH 5/5] Format "if" for tslint and add semicolon --- src/demo-app/snack-bar/snack-bar-demo.ts | 4 ++-- src/lib/snack-bar/snack-bar-ref.ts | 2 +- src/lib/snack-bar/snack-bar.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 6bc33973540c..c19d9044464b 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/src/demo-app/snack-bar/snack-bar-demo.ts @@ -19,8 +19,8 @@ export class SnackBarDemo { open() { let autoHide: number | boolean = false; - if(this.autoHide) { - autoHide = this.autoHideMs + if (this.autoHide) { + autoHide = this.autoHideMs; } let config = new MdSnackBarConfig(this.viewContainerRef, autoHide); this.snackBar.open(this.message, this.action && this.actionButtonLabel, config); diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index d1fcf77dcdb6..a24385c88a8c 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -39,7 +39,7 @@ export class MdSnackBarRef { }); } // Clear autohide interval - if(this.autoHide !== false) { + if (this.autoHide) { clearInterval(this.autoHide); } } diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 2ef7a92a48b6..ed469b6a4fb7 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -55,7 +55,7 @@ export class MdSnackBar { mdSnackBarRef.containerInstance.enter(); } // Auto dismiss after timeout. - if(config.autoHideDuration !== false) { + if (config.autoHideDuration) { mdSnackBarRef.autoHide = setTimeout(() => { mdSnackBarRef.dismiss(); }, config.autoHideDuration);