feat(alert): added isOpen input and marked as OnPush (#2940)

valorkin · web-flow · commit af7597b39ab9 · 2017-11-03T16:27:12.000+02:00
* feat(alert): added isOpen input and marked as OnPush

* fix(alerts-test): fixed alert component test and few style issues

* demo(alert): add dissmissible toggle and dynamic content demo
diff --git a/demo/src/app/components/+alerts/alerts-section.list.ts b/demo/src/app/components/+alerts/alerts-section.list.ts
@@ -3,6 +3,7 @@ import { DemoAlertLinkComponent } from './demos/link/link';
 import { DemoAlertContentComponent } from './demos/content/content';
 import { DemoAlertDismissComponent } from './demos/dismiss/dismiss';
 import { DemoAlertDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html';
+import { DemoAlertDynamicContentComponent } from './demos/dynamic-content/dynamic-content';
 import { DemoAlertTimeoutComponent } from './demos/dismiss-on-timeout/dismiss-on-timeout';
 import { DemoAlertStylingGlobalComponent } from './demos/styling-global/styling-global';
 import { DemoAlertStylingLocalComponent } from './demos/styling-local/styling-local';
@@ -80,6 +81,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/dynamic-html/dynamic-html.html'),
         outlet: DemoAlertDynamicHtmlComponent
       },
+      {
+        title: 'Dynamic content',
+        anchor: 'dynamic-content',
+        description: `<p>Alerts fully support bindings.</p>`,
+        component: require('!!raw-loader?lang=typescript!./demos/dynamic-content/dynamic-content.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/dynamic-content/dynamic-content.html'),
+        outlet: DemoAlertDynamicContentComponent
+      },
       {
         title: 'Dismiss on timeout',
         anchor: 'dismiss-on-timeout',
diff --git a/demo/src/app/components/+alerts/demos/dismiss/dismiss.html b/demo/src/app/components/+alerts/demos/dismiss/dismiss.html
@@ -1,4 +1,5 @@
 <div *ngFor="let alert of alerts">
-  <alert [type]="alert.type" [dismissible]="true">{{ alert.msg }}</alert>
+  <alert [type]="alert.type" [dismissible]="dismissible">{{ alert.msg }}</alert>
 </div>
+<button type="button" class="btn btn-primary" (click)="dismissible = !dismissible">Toggle dismissible</button>
 <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
diff --git a/demo/src/app/components/+alerts/demos/dismiss/dismiss.ts b/demo/src/app/components/+alerts/demos/dismiss/dismiss.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   templateUrl: './dismiss.html'
 })
 export class DemoAlertDismissComponent {
+  dismissible = true;
   alerts: any = [
     {
       type: 'success',
diff --git a/demo/src/app/components/+alerts/demos/dynamic-content/dynamic-content.html b/demo/src/app/components/+alerts/demos/dynamic-content/dynamic-content.html
@@ -0,0 +1,8 @@
+<alert type="success">{{messages[index]}}</alert>
+
+<div *ngIf="index !== messages.length -1; else elseBlock">
+  <button class="btn btn-primary" (click)="changeText()">Change text</button>
+</div>
+<ng-template #elseBlock>
+  <button class="btn btn-primary" (click)="index = 0">Reset</button>
+</ng-template>
diff --git a/demo/src/app/components/+alerts/demos/dynamic-content/dynamic-content.ts b/demo/src/app/components/+alerts/demos/dynamic-content/dynamic-content.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-alert-content-html',
+  templateUrl: './dynamic-content.html'
+})
+export class DemoAlertDynamicContentComponent {
+  index = 0;
+  messages = [
+    'You successfully read this important alert message.',
+    'Now this text is different from what it was before. Go ahead and click the button one more time',
+    'Well done! Click reset button and you\'ll see the first message'
+  ];
+
+  changeText() {
+    if (this.messages.length - 1 !== this.index) {
+      this.index++;
+    }
+  }
+}
diff --git a/demo/src/app/components/+alerts/demos/index.ts b/demo/src/app/components/+alerts/demos/index.ts
@@ -7,13 +7,15 @@ import { DemoAlertTimeoutComponent } from './dismiss-on-timeout/dismiss-on-timeo
 import { DemoAlertStylingGlobalComponent } from './styling-global/styling-global';
 import { DemoAlertStylingLocalComponent } from './styling-local/styling-local';
 import { DemoAlertConfigComponent } from './config/config';
+import { DemoAlertDynamicContentComponent } from './dynamic-content/dynamic-content';
 
 export const DEMO_COMPONENTS = [
   DemoAlertBasicComponent,
   DemoAlertLinkComponent,
   DemoAlertContentComponent,
   DemoAlertDismissComponent,
   DemoAlertDynamicHtmlComponent,
+  DemoAlertDynamicContentComponent,
   DemoAlertTimeoutComponent,
   DemoAlertStylingGlobalComponent,
   DemoAlertStylingLocalComponent,
diff --git a/demo/src/app/components/+pagination/demos/pager/pager.ts b/demo/src/app/components/+pagination/demos/pager/pager.ts
@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'demo-pagination-pager',
-  templateUrl: './pager.html'
+  templateUrl: './pager.html',
+  styles: ['.pager li.btn:active { box-shadow: none; }'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DemoPaginationPagerComponent {
   totalItems: number = 64;
diff --git a/demo/src/app/components/+tooltip/demos/styling-local/styling-local.ts b/demo/src/app/components/+tooltip/demos/styling-local/styling-local.ts
@@ -6,14 +6,15 @@ import { Component } from '@angular/core';
   /* tslint:disable no-unused-css*/
   styles: [
     `
-:host >>> .tooltip-inner {
-  background-color: #009688;
-  color: #fff;
-}
-:host >>> .tooltip .tooltip-arrow {
-  border-bottom-color: #009688;
-}
-  `
+      :host >>> .tooltip-inner {
+        background-color: #009688;
+        color: #fff;
+      }
+      :host >>> .tooltip.top .tooltip-arrow:before,
+      :host >>> .tooltip.top .tooltip-arrow {
+        border-top-color: #009688;
+      }
+    `
   ]
 })
 export class DemoTooltipStylingLocalComponent {}
diff --git a/demo/src/assets/css/style.scss b/demo/src/assets/css/style.scss
@@ -111,6 +111,8 @@ a:hover {
 .main {
   display: flex;
   flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
 }
 /* entry */
 .entry {
@@ -452,6 +454,8 @@ a:hover {
 
 .nav-item {
   &.customClass {
+    float: right;
+
     &:first-child {
       margin-left: auto;
     }
diff --git a/src/alert/alert.component.html b/src/alert/alert.component.html
@@ -1,4 +1,4 @@
-<ng-template [ngIf]="!isClosed">
+<ng-template [ngIf]="isOpen">
   <div [class]="'alert alert-' + type" role="alert" [ngClass]="classes">
     <ng-template [ngIf]="dismissible">
       <button type="button" class="close" aria-label="Close" (click)="close()">
diff --git a/src/alert/alert.component.ts b/src/alert/alert.component.ts
@@ -1,10 +1,14 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit,
+  Output
+} from '@angular/core';
 import { AlertConfig } from './alert.config';
 import { OnChange } from '../utils/decorators';
 
 @Component({
   selector: 'alert,bs-alert',
-  templateUrl: './alert.component.html'
+  templateUrl: './alert.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AlertComponent implements OnInit {
   /** Alert type.
@@ -13,27 +17,29 @@ export class AlertComponent implements OnInit {
    */
   @Input() type = 'warning';
   /** If set, displays an inline "Close" button */
-  @OnChange()
-  @Input()
-  dismissible = false;
+  @OnChange()   @Input()   dismissible = false;
   /** Number in milliseconds, after which alert will be closed */
   @Input() dismissOnTimeout: number | string;
 
+  /** Is alert visible */
+  @Input() isOpen = true;
+
   /** This event fires immediately after close instance method is called,
    * $event is an instance of Alert component.
    */
   @Output() onClose = new EventEmitter<AlertComponent>();
   /** This event fires when alert closed, $event is an instance of Alert component */
   @Output() onClosed = new EventEmitter<AlertComponent>();
 
-  isClosed = false;
+
   classes = '';
   dismissibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  constructor(_config: AlertConfig) {
+  constructor(_config: AlertConfig, private changeDetection: ChangeDetectorRef) {
     Object.assign(this, _config);
     this.dismissibleChange.subscribe((dismissible: boolean) => {
       this.classes = this.dismissible ? 'alert-dismissible' : '';
+      this.changeDetection.markForCheck();
     });
   }
 
@@ -53,12 +59,13 @@ export class AlertComponent implements OnInit {
    * Closes an alert by removing it from the DOM.
    */
   close(): void {
-    if (this.isClosed) {
+    if (!this.isOpen) {
       return;
     }
 
     this.onClose.emit(this);
-    this.isClosed = true;
+    this.isOpen = false;
+    this.changeDetection.markForCheck();
     this.onClosed.emit(this);
   }
 }
diff --git a/src/spec/alert.component.spec.ts b/src/spec/alert.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AlertComponent } from '../alert/alert.component';
@@ -7,8 +7,8 @@ import { AlertModule } from '../alert/alert.module';
 
 @Component({selector: 'alert-test', template: ''})
 class TestAlertComponent extends AlertComponent {
-  constructor(config: AlertConfig) {
-    super(config);
+  constructor(config: AlertConfig, changeDetection: ChangeDetectorRef) {
+    super(config, changeDetection);
   }
 }
 
@@ -51,16 +51,16 @@ describe('Component: Alert', () => {
   it('should be dismissed by timeout', (done: () => void) => {
     context.dismissOnTimeout = 1000;
     context.onClosed.subscribe(() => {
-      expect(context.isClosed).toBeTruthy();
+      expect(context.isOpen).toBeFalsy();
       done();
     });
     context.ngOnInit();
   });
 
   it('should be closed by public method onClose', () => {
     context.ngOnInit();
-    expect(context.isClosed).toBeFalsy();
+    expect(context.isOpen).toBeTruthy();
     context.close();
-    expect(context.isClosed).toBeTruthy();
+    expect(context.isOpen).toBeFalsy();
   });
 });
diff --git a/src/spec/ng-bootstrap/alert.spec.ts b/src/spec/ng-bootstrap/alert.spec.ts
@@ -4,7 +4,7 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 import { createGenericTestComponent } from './test/common';
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { AlertModule, AlertComponent, AlertConfig } from '../../alert';
 
 @Component({
@@ -32,13 +32,17 @@ describe('ngb-alert', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestComponent],
-      imports: [AlertModule.forRoot()]
+      imports: [AlertModule.forRoot()],
+      providers: [
+        AlertComponent, ChangeDetectorRef
+      ]
     });
   });
 
   it('should initialize inputs with default values', () => {
     const defaultConfig = new AlertConfig();
-    const alertCmp = new AlertComponent(new AlertConfig());
+    /*const alertCmp = new AlertComponent(new AlertConfig());*/
+    const alertCmp = TestBed.get(AlertComponent);
 
     expect(alertCmp.dismissible).toBe(defaultConfig.dismissible);
     expect(alertCmp.type).toBe(defaultConfig.type);

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import { Component } from '@angular/core';`
`5`	`5`	`templateUrl: './dismiss.html'`
`6`	`6`	`})`
`7`	`7`	`export class DemoAlertDismissComponent {`
	`8`	`+ dismissible = true;`
`8`	`9`	`alerts: any = [`
`9`	`10`	`{`
`10`	`11`	`type: 'success',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<ng-template [ngIf]="!isClosed">`
	`1`	`+<ng-template [ngIf]="isOpen">`
`2`	`2`	`<div [class]="'alert alert-' + type" role="alert" [ngClass]="classes">`
`3`	`3`	`<ng-template [ngIf]="dismissible">`
`4`	`4`	`<button type="button" class="close" aria-label="Close" (click)="close()">`