Angular v4 setup (scttcper#78)

* update packages, add @angular/animations * add mob-appearance with webkit-appearance * attempt to fix travis * bump packages * OpaqueToken -> InjectionToken for angular 4 * 4.0 rc2 * add breaking changes and remove animation module from toastr module * more specific * upgrade packages * rc.3 * fix tests * leave as opaque token so v2 isn't broken right away * realize 5.0.2 to next branch * change pink toast transition * change opacity * customize toasts further and add a toast show method for custom toasts * cleanup from merge * add tests for pink toast * move to test * upgrade rc.5 * reorder imports * upgrade angular cli * upgrade yarn * fix typescript * prepare v5 for master * coverage setup * update packages * fix travis * update readme * add comments on toastr config
Kuazark · Mar 24, 2017 · a4bad0c · a4bad0c
1 parent 3ac696c
commit a4bad0c
Show file tree

Hide file tree

Showing 25 changed files with 458 additions and 390 deletions.
diff --git a/.codecov.yml b/.codecov.yml
@@ -0,0 +1,10 @@
+coverage:
+  status:
+    default:
+      threshold: null
+  patch:
+    default:
+    threshold: null
+  changes:
+    default:
+    threshold: null
diff --git a/.travis.yml b/.travis.yml
@@ -12,6 +12,8 @@ before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+install:
+  - yarn
 script:
   - ./node_modules/.bin/ng test --single-run --code-coverage --no-progress
 after_success:

diff --git a/README.md b/README.md
@@ -1,6 +1,4 @@
 # ngx-toastr 🍞 (formerly toastr-ng2)
-> Renamed toastr-ng2 to ngx-toastr. Please point your package.json to the new name for continued updates.  
-
 [![NPM version][npm-image]][npm-url]
 [![build status][travis-img]][travis-url]
 [![coverage status][coverage-img]][coverage-url]
@@ -15,17 +13,21 @@
 [greenkeeper-image]: https://badges.greenkeeper.io/scttcper/ngx-toastr.svg
 [greenkeeper-url]: https://greenkeeper.io/  
 
-For Angular v4 support install `npm install ngx-toastr@next` and see the breaking changes on https://github.com/scttcper/ngx-toastr/tree/ng4rc readme
-
 __DEMO__: https://scttcper.github.io/ngx-toastr/
 
+## ngx-toastr V4 to V5 breaking changes
+- Supports Angular v4 and drops support for anything lower than 2.4.x
+- In order to support Angular v4 animations you should:  
+  - Install animations `npm install @angular/animations --save`  
+  - Add `import { BrowserAnimationsModule } from '@angular/platform-browser/animations';` and import in root NgModule  
+
 ## Features
 - Toast Component Injection without being passed `ViewContainerRef`
 - No use of `*ngFor`. Fewer dirty checks and higher performance.
 - AoT compilation and lazy loading compatible
 - Component inheritance for custom toasts
 - SystemJS rollup bundle ✓
-- Animations using angular 2's [Web Animations API](https://angular.io/docs/ts/latest/guide/animations.html) (pollyfill needed for older devices)
+- Animations using Angular's [Web Animations API](https://angular.io/docs/ts/latest/guide/animations.html) (pollyfill needed for older devices)
 - Output toasts to a target directive
 
 ## Install  
@@ -99,7 +101,7 @@ preventDuplicates: boolean = false; // block duplicate messages
 
 ### ToastConfig (Individual Toast options)
 ```typescript
-toastComponent = Toast; // the angular 2 component that will be used
+toastComponent = Toast; // the Angular component that will be used
 closeButton: boolean = false; // show close button
 timeOut: number = 5000; // time to live
 enableHtml: boolean = false; // allow html in message. (UNSAFE)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-toastr",
-  "description": "Toastr for Angular 2",
+  "description": "Toastr for Angular",
   "homepage": "https://github.com/scttcper/ngx-toastr",
   "bugs": "https://github.com/scttcper/ngx-toastr/issues",
   "repository": {
@@ -20,39 +20,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.9",
-    "@angular/compiler": "^2.4.9",
-    "@angular/core": "^2.4.9",
-    "@angular/forms": "^2.4.9",
-    "@angular/platform-browser": "^2.4.9",
-    "@angular/platform-browser-dynamic": "^2.4.9",
-    "@angular/router": "^3.4.9",
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.random": "^3.2.0",
     "rxjs": "^5.2.0",
-    "zone.js": "^0.8.1"
+    "zone.js": "^0.8.5"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.2",
-    "@angular/compiler-cli": "^2.4.9",
-    "@types/jasmine": "^2.5.45",
-    "@types/lodash.clonedeep": "^4.5.1",
-    "@types/lodash.random": "^3.2.1",
-    "@types/node": "^7.0.8",
-    "codelyzer": "3.0.0-beta.0",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@types/jasmine": "^2.5.46",
+    "@types/lodash.clonedeep": "^4.5.2",
+    "@types/lodash.random": "^3.2.2",
+    "@types/node": "^7.0.10",
+    "codelyzer": "^3.0.0-beta.4",
     "jasmine-core": "^2.5.2",
     "jasmine-spec-reporter": "^3.2.0",
     "karma": "^1.5.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.0.0",
     "protractor": "^5.1.1",
-    "rollup": "^0.41.5",
-    "ts-node": "^3.0.0",
+    "rollup": "^0.41.6",
+    "ts-node": "^3.0.2",
     "tslint": "^4.5.1",
     "typescript": "^2.2.1"
   }

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,9 +1,13 @@
-import 'rxjs/add/operator/toPromise';
 import { TestBed, async } from '@angular/core/testing';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+
 import { ToastrModule, ActiveToast } from 'ngx-toastr';
 
 import { AppComponent } from './app.component';
+import { PinkToast } from './pink.toast';
 
 describe('AppComponent', () => {
   beforeEach(() => {
@@ -16,6 +20,8 @@ describe('AppComponent', () => {
           enableHtml: true,
         }),
         FormsModule,
+        BrowserAnimationsModule,
+        AppTestModule,
       ],
       declarations: [AppComponent],
     });
@@ -27,7 +33,6 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-
   it('should trigger onShown', (done) => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
@@ -50,9 +55,6 @@ describe('AppComponent', () => {
     const opened: ActiveToast = app.openToast();
     opened.onTap.toPromise()
       .then(() => {
-        // console.info(opened.toastRef)
-        // const toast = fixture.debugElement.queryAll(By.css('toast-success'))[0];
-        // toast.nativeElement.click();
         done();
       });
       opened.portal._component.tapToast();
@@ -76,4 +78,30 @@ describe('AppComponent', () => {
     expect(opened.portal._component.options.timeOut).toBe(0);
     done();
   });
+  it('should trigger onShown for openPinkToast', (done) => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    const opened: ActiveToast = app.openPinkToast();
+    opened.onShown.toPromise().then(() => {
+      done();
+    });
+  });
+  it('should trigger onHidden for openPinkToast', (done) => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    const opened: ActiveToast = app.openPinkToast();
+    opened.onHidden.toPromise().then(() => {
+      done();
+    });
+  });
 });
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ToastrModule,
+  ],
+  entryComponents: [PinkToast],
+  declarations: [PinkToast],
+})
+class AppTestModule { }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component, VERSION } from '@angular/core';
 import * as _ from 'lodash';
 
-import { PinkToast } from './pink.toast';
 import { ToastrConfig, ToastrService } from 'ngx-toastr';
 
+import { PinkToast } from './pink.toast';
+
 const quotes = [
   {
     title: 'Title',
@@ -68,15 +69,15 @@ export class AppComponent {
   openPinkToast() {
     const opt = _.cloneDeep(this.options);
     opt.toastComponent = PinkToast;
-    opt.toastClass = 'toast toast-pink';
+    opt.toastClass = '';
     let m = this.message;
     let t = this.title;
     if (!this.title.length && !this.message.length) {
       const randomMessage = quotes[_.random(0, quotes.length - 1)];
       m = randomMessage.message;
       t = randomMessage.title;
     }
-    const inserted = this.toastrService.success(m, t, opt);
+    const inserted = this.toastrService.show(m, t, opt);
     if (inserted) {
       this.lastInserted.push(inserted.toastId);
     }

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,6 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 import { ToastrModule } from 'ngx-toastr';
 
 import { AppComponent } from './app.component';
@@ -15,6 +17,7 @@ import { PinkToast } from './pink.toast';
   imports: [
     BrowserModule,
     FormsModule,
+    BrowserAnimationsModule,
     ToastrModule.forRoot(),
     // ToastContainerModule.forRoot(),
   ],

diff --git a/src/app/pink.toast.ts b/src/app/pink.toast.ts
@@ -1,10 +1,10 @@
 import {
   Component,
   trigger,
-  state,
   transition,
   animate,
   style,
+  keyframes,
   ApplicationRef,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -14,39 +14,69 @@ import { Toast, ToastData, ToastrService, ToastRef } from 'ngx-toastr';
   selector: '[pink-toast-component]',
   styles: [`
     :host {
-      background-color: #fa39c3;
+      background-color: #FF69B4;
+      position: relative;
+      overflow: hidden;
+      margin: 0 0 6px;
+      padding: 10px 10px 10px 10px;
+      width: 300px;
+      border-radius: 3px 3px 3px 3px;
+      color: #FFFFFF;
     }
   `],
   template: `
-  <button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button">
-    &times;
-  </button>
-  <div *ngIf="title" class="{{options.titleClass}}" [attr.aria-label]="title">
-    {{title}}
+  <div class="row">
+    <div class="col-9">
+      <div *ngIf="title" class="{{options.titleClass}}" [attr.aria-label]="title">
+        {{title}}
+      </div>
+      <div *ngIf="message && options.enableHtml" class="{{options.messageClass}}" [innerHTML]="message"></div>
+      <div *ngIf="message && !options.enableHtml" class="{{options.messageClass}}" [attr.aria-label]="message">
+        {{message}}
+      </div>
+    </div>
+    <div class="col-3 text-right">
+      <a *ngIf="!options.closeButton" class="btn btn-pink btn-sm" (click)="action($event)">
+        {{undoString}}
+      </a>
+      <a *ngIf="options.closeButton" (click)="remove()" class="btn btn-pink btn-sm">
+        close
+      </a>
+    </div>
   </div>
-  <div *ngIf="message && options.enableHtml" class="{{options.messageClass}}" [innerHTML]="message"></div>
-  <div *ngIf="message && !options.enableHtml" class="{{options.messageClass}}" [attr.aria-label]="message">
-    {{message}}
-  </div>
-  <a class="btn btn-pink btn-sm" (click)="action($event)">{{undoString}}</a>
   <div *ngIf="options.progressBar">
     <div class="toast-progress" [style.width.%]="width"></div>
   </div>
   `,
   animations: [
     trigger('flyInOut', [
-      state('inactive', style({
-        display: 'none',
-        transform: 'translateX(200%)'
-      })),
-      state('active', style({
-        transform: 'translateX(0%)'
-      })),
-      state('removed', style({
-        transform: 'translateX(200%)'
-      })),
-      transition('inactive <=> active', animate('150ms linear')),
-      transition('active <=> removed', animate('150ms linear')),
+      transition('inactive <=> active', animate('400ms ease-out', keyframes([
+        style({
+          transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
+          opacity: 0,
+        }),
+        style({
+          transform: 'skewX(20deg)',
+          opacity: 1,
+        }),
+        style({
+          transform: 'skewX(-5deg)',
+          opacity: 1,
+        }),
+        style({
+          transform: 'none',
+          opacity: 1,
+        }),
+      ]))),
+      transition('active <=> removed', animate('400ms ease-out', keyframes([
+        style({
+          opacity: 1,
+        }),
+        style({
+          transform: 'translate3d(100%, 0, 0) skewX(30deg)',
+          opacity: 0,
+        }),
+      ]))),
     ]),
   ],
 })

diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -1,7 +1,7 @@
 // The file contents for the current environment will overwrite these during build.
 // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `angular-cli.json`.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
   production: false

diff --git a/src/index.html b/src/index.html
@@ -2,10 +2,10 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>ngx-toastr</title>
+  <title>ngx-toastr Toastr for Angular</title>
   <base href="/">
 
-  <meta name="description" content="Angular 2 Toastr">
+  <meta name="description" content="Angular Toastr">
   <meta name="keywords" content="Angular2,ng2,toastr,angular,toast,notification,ngmodule">
   <meta name="author" content="@scttcper">