From 22384d3325a593b324f3d5419647b97f75a2cc1c Mon Sep 17 00:00:00 2001 From: Ben Feely Date: Wed, 4 Apr 2018 18:29:47 -0700 Subject: [PATCH] A bunch of updates to the demo site including PERF triangle for Angular. --- .angular-cli.json | 84 ++++++------- apps/demo/src/app/app-routing.module.ts | 33 +++++ apps/demo/src/app/app.component.css | 0 apps/demo/src/app/app.component.html | 29 +---- apps/demo/src/app/app.component.scss | 7 ++ apps/demo/src/app/app.component.ts | 19 +-- apps/demo/src/app/app.module.ts | 11 +- .../src/app/components/components.module.ts | 20 ++++ .../src/app/components/dot/dot.component.html | 12 ++ .../src/app/components/dot/dot.component.scss | 14 +++ .../app/components/dot/dot.component.spec.ts | 28 +++++ .../src/app/components/dot/dot.component.ts | 26 ++++ .../triangle/triangle.component.html | 11 ++ .../triangle/triangle.component.scss | 13 ++ .../triangle/triangle.component.spec.ts | 28 +++++ .../components/triangle/triangle.component.ts | 113 ++++++++++++++++++ .../angular-perf/angular-perf.component.html | 4 + .../angular-perf/angular-perf.component.scss | 4 + .../angular-perf.component.spec.ts | 25 ++++ .../angular-perf/angular-perf.component.ts | 15 +++ .../src/app/containers/containers.module.ts | 19 +++ .../containers/fabric/fabric.component.html | 25 ++++ .../containers/fabric/fabric.component.scss | 22 ++++ .../fabric/fabric.component.spec.ts | 25 ++++ .../app/containers/fabric/fabric.component.ts | 34 ++++++ .../containers/landing/landing.component.html | 3 + .../containers/landing/landing.component.scss | 4 + .../landing/landing.component.spec.ts | 25 ++++ .../containers/landing/landing.component.ts | 15 +++ .../material/material.component.html | 1 + .../material/material.component.scss | 4 + .../material/material.component.spec.ts | 25 ++++ .../containers/material/material.component.ts | 15 +++ .../mixed-perf/mixed-perf.component.html | 4 + .../mixed-perf/mixed-perf.component.scss | 4 + .../mixed-perf/mixed-perf.component.spec.ts | 25 ++++ .../mixed-perf/mixed-perf.component.ts | 15 +++ .../react-components.module.ts | 25 ++++ .../react-dot/react-dot.component.spec.ts | 28 +++++ .../react-dot/react-dot.component.ts | 77 ++++++++++++ .../components/fabric-button.component.css | 4 + .../src/components/fabric-button.component.ts | 6 +- 42 files changed, 814 insertions(+), 87 deletions(-) create mode 100644 apps/demo/src/app/app-routing.module.ts delete mode 100644 apps/demo/src/app/app.component.css create mode 100644 apps/demo/src/app/app.component.scss create mode 100644 apps/demo/src/app/components/components.module.ts create mode 100644 apps/demo/src/app/components/dot/dot.component.html create mode 100644 apps/demo/src/app/components/dot/dot.component.scss create mode 100644 apps/demo/src/app/components/dot/dot.component.spec.ts create mode 100644 apps/demo/src/app/components/dot/dot.component.ts create mode 100644 apps/demo/src/app/components/triangle/triangle.component.html create mode 100644 apps/demo/src/app/components/triangle/triangle.component.scss create mode 100644 apps/demo/src/app/components/triangle/triangle.component.spec.ts create mode 100644 apps/demo/src/app/components/triangle/triangle.component.ts create mode 100644 apps/demo/src/app/containers/angular-perf/angular-perf.component.html create mode 100644 apps/demo/src/app/containers/angular-perf/angular-perf.component.scss create mode 100644 apps/demo/src/app/containers/angular-perf/angular-perf.component.spec.ts create mode 100644 apps/demo/src/app/containers/angular-perf/angular-perf.component.ts create mode 100644 apps/demo/src/app/containers/containers.module.ts create mode 100644 apps/demo/src/app/containers/fabric/fabric.component.html create mode 100644 apps/demo/src/app/containers/fabric/fabric.component.scss create mode 100644 apps/demo/src/app/containers/fabric/fabric.component.spec.ts create mode 100644 apps/demo/src/app/containers/fabric/fabric.component.ts create mode 100644 apps/demo/src/app/containers/landing/landing.component.html create mode 100644 apps/demo/src/app/containers/landing/landing.component.scss create mode 100644 apps/demo/src/app/containers/landing/landing.component.spec.ts create mode 100644 apps/demo/src/app/containers/landing/landing.component.ts create mode 100644 apps/demo/src/app/containers/material/material.component.html create mode 100644 apps/demo/src/app/containers/material/material.component.scss create mode 100644 apps/demo/src/app/containers/material/material.component.spec.ts create mode 100644 apps/demo/src/app/containers/material/material.component.ts create mode 100644 apps/demo/src/app/containers/mixed-perf/mixed-perf.component.html create mode 100644 apps/demo/src/app/containers/mixed-perf/mixed-perf.component.scss create mode 100644 apps/demo/src/app/containers/mixed-perf/mixed-perf.component.spec.ts create mode 100644 apps/demo/src/app/containers/mixed-perf/mixed-perf.component.ts create mode 100644 apps/demo/src/app/react-components/react-components.module.ts create mode 100644 apps/demo/src/app/react-components/react-dot/react-dot.component.spec.ts create mode 100644 apps/demo/src/app/react-components/react-dot/react-dot.component.ts create mode 100644 libs/fabric/src/components/fabric-button.component.css diff --git a/.angular-cli.json b/.angular-cli.json index bef2eeb..dbf4282 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -1,33 +1,7 @@ { "$schema": "./node_modules/@nrwl/schematics/src/schema.json", "project": { - "name": "angular-react", - "npmScope": "angular-react", - "latestMigration": "20180328-add-nx-lint" - }, - "e2e": { - "protractor": { - "config": "./protractor.conf.js" - } - }, - "lint": [ - { - "project": "./tsconfig.spec.json", - "exclude": "**/node_modules/**" - }, - { - "project": "apps/demo/src/tsconfig.app.json", - "exclude": "**/node_modules/**" - }, - { - "project": "apps/demo/e2e/tsconfig.e2e.json", - "exclude": "**/node_modules/**" - } - ], - "test": { - "karma": { - "config": "./karma.conf.js" - } + "name": "angular-react" }, "apps": [ { @@ -53,8 +27,7 @@ "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" - }, - "tags": [] + } }, { "name": "demo-from-packages", @@ -79,42 +52,63 @@ "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" - }, - "tags": [] + } }, { "name": "core", - "root": "libs/core/src", - "test": "../../../test.js", "appRoot": "", - "tags": [] + "root": "libs/core/src", + "test": "../../../test.js" }, { "name": "fabric", - "root": "libs/fabric/src", - "test": "../../../test.js", "appRoot": "", - "tags": [] + "root": "libs/fabric/src", + "test": "../../../test.js" }, { "name": "material", - "root": "libs/material/src", - "test": "../../../test.js", "appRoot": "", - "tags": [] + "root": "libs/material/src", + "test": "../../../test.js" }, { "name": "$workspaceRoot", - "root": ".", - "appRoot": "" + "appRoot": "", + "root": "." } ], + "e2e": { + "protractor": { + "config": "./protractor.conf.js" + } + }, + "lint": [ + { + "project": "./tsconfig.spec.json", + "exclude": "**/node_modules/**" + }, + { + "project": "apps/demo/src/tsconfig.app.json", + "exclude": "**/node_modules/**" + }, + { + "project": "apps/demo/e2e/tsconfig.e2e.json", + "exclude": "**/node_modules/**" + } + ], + "test": { + "karma": { + "config": "./karma.conf.js" + } + }, "defaults": { + "styleExt": "scss", + "component": { + }, "schematics": { "collection": "@nrwl/schematics" - }, - "styleExt": "css", - "component": {} + } }, "warnings": { "typescriptMismatch": false diff --git a/apps/demo/src/app/app-routing.module.ts b/apps/demo/src/app/app-routing.module.ts new file mode 100644 index 0000000..110d95e --- /dev/null +++ b/apps/demo/src/app/app-routing.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { LandingComponent } from './containers/landing/landing.component'; +import { AngularPerfComponent } from './containers/angular-perf/angular-perf.component'; +import { MixedPerfComponent } from './containers/mixed-perf/mixed-perf.component'; +import { FabricComponent } from './containers/fabric/fabric.component'; +import { MaterialComponent } from './containers/material/material.component'; + + +const routes: Routes = [ + { path: 'landing', redirectTo: '' }, + { path: '', component: LandingComponent }, + { path: 'perf', children: [ + { path: 'angular', component: AngularPerfComponent }, + { path: 'mixed', component: MixedPerfComponent }, + ] }, + { path: 'components', children: [ + { path: 'fabric', component: FabricComponent }, + { path: 'material', component: MaterialComponent }, + ] }, +]; + +@NgModule({ + imports: [ + RouterModule.forRoot(routes) + ], + exports: [ + RouterModule + ], + declarations: [] +}) +export class AppRoutingModule { } diff --git a/apps/demo/src/app/app.component.css b/apps/demo/src/app/app.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html index 3b28e97..c2b84bf 100644 --- a/apps/demo/src/app/app.component.html +++ b/apps/demo/src/app/app.component.html @@ -1,24 +1,7 @@ -

Angular React Demo

+Landing +Angular Perf +Material Perf +Fabric Components +Material Components - - - - - + diff --git a/apps/demo/src/app/app.component.scss b/apps/demo/src/app/app.component.scss new file mode 100644 index 0000000..04564a9 --- /dev/null +++ b/apps/demo/src/app/app.component.scss @@ -0,0 +1,7 @@ +:host { + display: block; + + a { + margin-right: 10px; + } +} diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts index 9eb0654..e7a5b89 100644 --- a/apps/demo/src/app/app.component.ts +++ b/apps/demo/src/app/app.component.ts @@ -4,27 +4,12 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { - disabled = true; - dialogHidden = true; - constructor() { } - ngOnInit() { - } + ngOnInit() { } - toggle() { - this.disabled = !this.disabled; - } - - toggleDialog() { - this.dialogHidden = !this.dialogHidden; - } - - click() { - console.log('clicked'); - } } diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts index d8ae1ac..43179e9 100644 --- a/apps/demo/src/app/app.module.ts +++ b/apps/demo/src/app/app.module.ts @@ -2,9 +2,13 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NxModule } from '@nrwl/nx'; -import { AngularReactBrowserModule } from '@angular-react/core'; +import { AngularReactBrowserModule, registerElement } from '@angular-react/core'; import { AngularReactFabricModule } from '@angular-react/fabric'; import { AppComponent } from './app.component'; +import { ComponentsModule } from './components/components.module'; +import { ReactComponentsModule } from './react-components/react-components.module'; +import { AppRoutingModule } from './app-routing.module'; +import { ContainersModule } from './containers/containers.module'; @NgModule({ @@ -12,6 +16,11 @@ import { AppComponent } from './app.component'; AngularReactBrowserModule, NxModule.forRoot(), AngularReactFabricModule, + AppRoutingModule, + + ContainersModule, + ComponentsModule, + ReactComponentsModule, ], declarations: [AppComponent], bootstrap: [AppComponent] diff --git a/apps/demo/src/app/components/components.module.ts b/apps/demo/src/app/components/components.module.ts new file mode 100644 index 0000000..1b7f91f --- /dev/null +++ b/apps/demo/src/app/components/components.module.ts @@ -0,0 +1,20 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DotComponent } from './dot/dot.component'; +import { ReactComponentsModule } from '../react-components/react-components.module'; +import { TriangleComponent } from './triangle/triangle.component'; +import { AngularReactFabricModule } from '@angular-react/fabric'; + + + +const components = [ + DotComponent, + TriangleComponent, +]; + +@NgModule({ + imports: [CommonModule, AngularReactFabricModule, ReactComponentsModule], + declarations: components, + exports: components, +}) +export class ComponentsModule { } diff --git a/apps/demo/src/app/components/dot/dot.component.html b/apps/demo/src/app/components/dot/dot.component.html new file mode 100644 index 0000000..4d63c21 --- /dev/null +++ b/apps/demo/src/app/components/dot/dot.component.html @@ -0,0 +1,12 @@ +
+ {{ text }} +
diff --git a/apps/demo/src/app/components/dot/dot.component.scss b/apps/demo/src/app/components/dot/dot.component.scss new file mode 100644 index 0000000..781db9e --- /dev/null +++ b/apps/demo/src/app/components/dot/dot.component.scss @@ -0,0 +1,14 @@ +:host div { + display: block; + position: absolute; + text-align: center; + background-color: #ddd; + color: #222; + border-radius: 50%; + cursor: pointer; +} + +:host div.hover { + background-color: #0078D4; + color: #fff; +} diff --git a/apps/demo/src/app/components/dot/dot.component.spec.ts b/apps/demo/src/app/components/dot/dot.component.spec.ts new file mode 100644 index 0000000..f33bcd1 --- /dev/null +++ b/apps/demo/src/app/components/dot/dot.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { DotComponent } from './dot.component'; + +describe('DotComponent', () => { + let component: DotComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DotComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DotComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/components/dot/dot.component.ts b/apps/demo/src/app/components/dot/dot.component.ts new file mode 100644 index 0000000..6b86285 --- /dev/null +++ b/apps/demo/src/app/components/dot/dot.component.ts @@ -0,0 +1,26 @@ +import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; + +@Component({ + selector: 'app-dot', + templateUrl: './dot.component.html', + styleUrls: ['./dot.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DotComponent { + + @Input() x: string; + @Input() y: string; + @Input() size: string; + @Input() text: string; + + hover = false; + + onMouseEnter(ev) { + this.hover = true; + } + + onMouseLeave(ev) { + this.hover = false; + } + +} diff --git a/apps/demo/src/app/components/triangle/triangle.component.html b/apps/demo/src/app/components/triangle/triangle.component.html new file mode 100644 index 0000000..18ce74c --- /dev/null +++ b/apps/demo/src/app/components/triangle/triangle.component.html @@ -0,0 +1,11 @@ + + +
+ +
diff --git a/apps/demo/src/app/components/triangle/triangle.component.scss b/apps/demo/src/app/components/triangle/triangle.component.scss new file mode 100644 index 0000000..5cad981 --- /dev/null +++ b/apps/demo/src/app/components/triangle/triangle.component.scss @@ -0,0 +1,13 @@ +:host { + display: block; + + .container { + position: absolute; + transform-origin: 0 0; + left: 50%; + top: 50%; + width: 10px; + height: 10px; + background: #eee; + } +} diff --git a/apps/demo/src/app/components/triangle/triangle.component.spec.ts b/apps/demo/src/app/components/triangle/triangle.component.spec.ts new file mode 100644 index 0000000..9d6b38d --- /dev/null +++ b/apps/demo/src/app/components/triangle/triangle.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { TriangleComponent } from './triangle.component'; + +describe('TriangleComponent', () => { + let component: TriangleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TriangleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TriangleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/components/triangle/triangle.component.ts b/apps/demo/src/app/components/triangle/triangle.component.ts new file mode 100644 index 0000000..3be619d --- /dev/null +++ b/apps/demo/src/app/components/triangle/triangle.component.ts @@ -0,0 +1,113 @@ +import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, OnInit, ViewEncapsulation } from '@angular/core'; +import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; + +@Component({ + selector: 'app-triangle', + templateUrl: './triangle.component.html', + styleUrls: ['./triangle.component.scss'], +}) +export class TriangleComponent implements OnInit { + + seconds = 0; + start; + elapsed; + scale = 3; + dots; + isActive; + + callback; + interval; + + constructor() { } + + ngOnInit() { + this.dots = (new SierpinskiTriangle({x: 0, y: 0, s: 1000}, 25)).getDots(); + + this.begin(); + } + + update(elapsed) { + const t = (elapsed / 1000) % 10; + const scale = 1 + (t > 5 ? 10 - t : t) / 10; + this.scale = scale / 2.1; + } + + begin() { + this.isActive = true; + + this.interval = setInterval(() => { + this.seconds = (this.seconds % 10) + 1; + }, 1000); + + this.start = new Date().getTime(); + + const callback = () => { + this.update(Date.now() - this.start); + if (this.isActive) { + requestAnimationFrame(callback); + } + } + callback(); + } + + stop() { + this.isActive = false; + clearInterval(this.interval); + } + + toggle() { + if (this.isActive) { + this.stop(); + } else { + this.begin(); + } + } + +} + +class SierpinskiTriangle { + + triangles: Array | any = []; + dot: SierpinskiTriangleDot; + + constructor({ x, y, s }, targetSize) { + if (s <= targetSize) { + this.dot = new SierpinskiTriangleDot( + x - (targetSize / 2), + y - (targetSize / 2), + targetSize + ); + } else { + const newSize = s / 2; + s /= 2; + this.triangles = [ + new SierpinskiTriangle({x, y: y - (s / 2), s}, targetSize), + new SierpinskiTriangle({x: x - s, y: y + (s / 2), s}, targetSize), + new SierpinskiTriangle({x: x + s, y: y + (s / 2), s}, targetSize) + ]; + } + } + + getDots() { + return this.triangles.reduce( (acc, t) => [...acc, ...t.getDots(), ...(t.dot || [])], []); + } + +} + +class SierpinskiTriangleDot { + + get x() { + return this._x + 'px'; + } + + get y() { + return this._y + 'px'; + } + + get size() { + return this._size * 0.9 + 'px'; + } + + constructor(private _x, private _y, private _size) { } + +} diff --git a/apps/demo/src/app/containers/angular-perf/angular-perf.component.html b/apps/demo/src/app/containers/angular-perf/angular-perf.component.html new file mode 100644 index 0000000..0c85891 --- /dev/null +++ b/apps/demo/src/app/containers/angular-perf/angular-perf.component.html @@ -0,0 +1,4 @@ +

Angular Perf Demo

+

Pure Angular View

+ + diff --git a/apps/demo/src/app/containers/angular-perf/angular-perf.component.scss b/apps/demo/src/app/containers/angular-perf/angular-perf.component.scss new file mode 100644 index 0000000..f3faac5 --- /dev/null +++ b/apps/demo/src/app/containers/angular-perf/angular-perf.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + +} diff --git a/apps/demo/src/app/containers/angular-perf/angular-perf.component.spec.ts b/apps/demo/src/app/containers/angular-perf/angular-perf.component.spec.ts new file mode 100644 index 0000000..3dcc043 --- /dev/null +++ b/apps/demo/src/app/containers/angular-perf/angular-perf.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AngularPerfComponent } from './angular-perf.component'; + +describe('AngularPerfComponent', () => { + let component: AngularPerfComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AngularPerfComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AngularPerfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/containers/angular-perf/angular-perf.component.ts b/apps/demo/src/app/containers/angular-perf/angular-perf.component.ts new file mode 100644 index 0000000..fb36581 --- /dev/null +++ b/apps/demo/src/app/containers/angular-perf/angular-perf.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-angular-perf', + templateUrl: './angular-perf.component.html', + styleUrls: ['./angular-perf.component.scss'] +}) +export class AngularPerfComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/apps/demo/src/app/containers/containers.module.ts b/apps/demo/src/app/containers/containers.module.ts new file mode 100644 index 0000000..54a7bf6 --- /dev/null +++ b/apps/demo/src/app/containers/containers.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AngularPerfComponent } from './angular-perf/angular-perf.component'; +import { MixedPerfComponent } from './mixed-perf/mixed-perf.component'; +import { FabricComponent } from './fabric/fabric.component'; +import { MaterialComponent } from './material/material.component'; +import { LandingComponent } from './landing/landing.component'; +import { ComponentsModule } from '../components/components.module'; +import { AngularReactFabricModule } from '@angular-react/fabric'; + +@NgModule({ + imports: [ + CommonModule, + ComponentsModule, + AngularReactFabricModule, + ], + declarations: [AngularPerfComponent, MixedPerfComponent, FabricComponent, MaterialComponent, LandingComponent] +}) +export class ContainersModule { } diff --git a/apps/demo/src/app/containers/fabric/fabric.component.html b/apps/demo/src/app/containers/fabric/fabric.component.html new file mode 100644 index 0000000..faac7ec --- /dev/null +++ b/apps/demo/src/app/containers/fabric/fabric.component.html @@ -0,0 +1,25 @@ +

Microsoft Fabric Components

+ +
    +
  • + + +
    • +
  • + + {{ sampleContent }} +
    • +
  • + + +
    • +
+ + + + diff --git a/apps/demo/src/app/containers/fabric/fabric.component.scss b/apps/demo/src/app/containers/fabric/fabric.component.scss new file mode 100644 index 0000000..40a265b --- /dev/null +++ b/apps/demo/src/app/containers/fabric/fabric.component.scss @@ -0,0 +1,22 @@ +:host { + + fabric-button { + margin-right: 20px; + } + + ul { + list-style: none; + + li { + margin-bottom: 10px; + + span.button-height { + line-height: 30px; + } + } + } +} +:host { + display: block; + +} diff --git a/apps/demo/src/app/containers/fabric/fabric.component.spec.ts b/apps/demo/src/app/containers/fabric/fabric.component.spec.ts new file mode 100644 index 0000000..a5c4def --- /dev/null +++ b/apps/demo/src/app/containers/fabric/fabric.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FabricComponent } from './fabric.component'; + +describe('FabricComponent', () => { + let component: FabricComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FabricComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FabricComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/containers/fabric/fabric.component.ts b/apps/demo/src/app/containers/fabric/fabric.component.ts new file mode 100644 index 0000000..9e513cb --- /dev/null +++ b/apps/demo/src/app/containers/fabric/fabric.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fabric', + templateUrl: './fabric.component.html', + styleUrls: ['./fabric.component.scss'] +}) +export class FabricComponent implements OnInit { + + disabled = true; + dialogHidden = true; + sampleContentCounter = 0; + + get sampleContent() { + return `Button clicked ${this.sampleContentCounter} times.`; + } + + constructor() { } + + ngOnInit() { } + + toggle() { + this.disabled = !this.disabled; + } + + toggleDialog() { + this.dialogHidden = !this.dialogHidden; + } + + click() { + this.sampleContentCounter += 1; + } + +} diff --git a/apps/demo/src/app/containers/landing/landing.component.html b/apps/demo/src/app/containers/landing/landing.component.html new file mode 100644 index 0000000..7fb63ce --- /dev/null +++ b/apps/demo/src/app/containers/landing/landing.component.html @@ -0,0 +1,3 @@ +

+ landing works! +

diff --git a/apps/demo/src/app/containers/landing/landing.component.scss b/apps/demo/src/app/containers/landing/landing.component.scss new file mode 100644 index 0000000..f3faac5 --- /dev/null +++ b/apps/demo/src/app/containers/landing/landing.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + +} diff --git a/apps/demo/src/app/containers/landing/landing.component.spec.ts b/apps/demo/src/app/containers/landing/landing.component.spec.ts new file mode 100644 index 0000000..fc4cff8 --- /dev/null +++ b/apps/demo/src/app/containers/landing/landing.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LandingComponent } from './landing.component'; + +describe('LandingComponent', () => { + let component: LandingComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LandingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LandingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/containers/landing/landing.component.ts b/apps/demo/src/app/containers/landing/landing.component.ts new file mode 100644 index 0000000..0a884c5 --- /dev/null +++ b/apps/demo/src/app/containers/landing/landing.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-landing', + templateUrl: './landing.component.html', + styleUrls: ['./landing.component.scss'] +}) +export class LandingComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/apps/demo/src/app/containers/material/material.component.html b/apps/demo/src/app/containers/material/material.component.html new file mode 100644 index 0000000..96a1803 --- /dev/null +++ b/apps/demo/src/app/containers/material/material.component.html @@ -0,0 +1 @@ +

Google Material Components

diff --git a/apps/demo/src/app/containers/material/material.component.scss b/apps/demo/src/app/containers/material/material.component.scss new file mode 100644 index 0000000..f3faac5 --- /dev/null +++ b/apps/demo/src/app/containers/material/material.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + +} diff --git a/apps/demo/src/app/containers/material/material.component.spec.ts b/apps/demo/src/app/containers/material/material.component.spec.ts new file mode 100644 index 0000000..7293b78 --- /dev/null +++ b/apps/demo/src/app/containers/material/material.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MaterialComponent } from './material.component'; + +describe('MaterialComponent', () => { + let component: MaterialComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MaterialComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MaterialComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/containers/material/material.component.ts b/apps/demo/src/app/containers/material/material.component.ts new file mode 100644 index 0000000..0f472da --- /dev/null +++ b/apps/demo/src/app/containers/material/material.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-material', + templateUrl: './material.component.html', + styleUrls: ['./material.component.scss'] +}) +export class MaterialComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.html b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.html new file mode 100644 index 0000000..0889583 --- /dev/null +++ b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.html @@ -0,0 +1,4 @@ +

Mixed Perf Demo

+

React leaf nodes rendered in an Angular View

+ + diff --git a/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.scss b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.scss new file mode 100644 index 0000000..f3faac5 --- /dev/null +++ b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + +} diff --git a/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.spec.ts b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.spec.ts new file mode 100644 index 0000000..1b91586 --- /dev/null +++ b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MixedPerfComponent } from './mixed-perf.component'; + +describe('MixedPerfComponent', () => { + let component: MixedPerfComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MixedPerfComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MixedPerfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.ts b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.ts new file mode 100644 index 0000000..6e034c9 --- /dev/null +++ b/apps/demo/src/app/containers/mixed-perf/mixed-perf.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-mixed-perf', + templateUrl: './mixed-perf.component.html', + styleUrls: ['./mixed-perf.component.scss'] +}) +export class MixedPerfComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/apps/demo/src/app/react-components/react-components.module.ts b/apps/demo/src/app/react-components/react-components.module.ts new file mode 100644 index 0000000..73f737b --- /dev/null +++ b/apps/demo/src/app/react-components/react-components.module.ts @@ -0,0 +1,25 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { registerElement } from '@angular-react/core'; +import { ReactDotComponent, ReactDot } from './react-dot/react-dot.component'; + + +const components = [ + ReactDotComponent, +]; + +@NgModule({ + imports: [CommonModule], + declarations: components, + exports: components, + schemas: [NO_ERRORS_SCHEMA] +}) +export class ReactComponentsModule { + + constructor() { + // Add any React elements to the registry (used by the renderer). + registerElement('ReactDot', () => ReactDot); + } + +} diff --git a/apps/demo/src/app/react-components/react-dot/react-dot.component.spec.ts b/apps/demo/src/app/react-components/react-dot/react-dot.component.spec.ts new file mode 100644 index 0000000..092c0d8 --- /dev/null +++ b/apps/demo/src/app/react-components/react-dot/react-dot.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { ReactDotComponent } from './react-dot.component'; + +describe('ReactDotComponent', () => { + let component: ReactDotComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ReactDotComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ReactDotComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/demo/src/app/react-components/react-dot/react-dot.component.ts b/apps/demo/src/app/react-components/react-dot/react-dot.component.ts new file mode 100644 index 0000000..c5ffb7b --- /dev/null +++ b/apps/demo/src/app/react-components/react-dot/react-dot.component.ts @@ -0,0 +1,77 @@ +import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +@Component({ + selector: 'app-react-dot', + template: ` + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [ 'react-renderer' ], +}) +export class ReactDotComponent implements OnChanges { + + @Input() x: number; + @Input() y: number; + @Input() size: number; + @Input() text: string; + + hover = false; + style: { [k: string]: any }; + bgColor: string; + + ngOnChanges(changes: SimpleChanges) { + const shapeChanged = 'x' in changes || 'y' in changes || 'size' in changes; + + if (shapeChanged) { + this.updateStyle(); + } + } + + enter() { + this.hover = true; + this.bgColor = '#ff0'; + } + + leave() { + this.hover = false; + this.bgColor = undefined; + } + + private updateStyle() { + const s = this.size * 1.3; + this.style = { + width: s + 'px', + height: s + 'px', + left: (this.x) + 'px', + top: (this.y) + 'px', + borderRadius: (s / 2) + 'px', + lineHeight: (s) + 'px', + }; + } + +} + +export class ReactDot extends React.Component { + + private divStyle = { + position: 'absolute', + background: '#61dafb', + font: 'normal 15px sans-serif', + textAlign: 'center', + cursor: 'pointer' + } + + + constructor(props) { + super(props); + + } + + render() { + return React.createElement('div', { style: this.divStyle }, [this.props['text']]); + } + +} diff --git a/libs/fabric/src/components/fabric-button.component.css b/libs/fabric/src/components/fabric-button.component.css new file mode 100644 index 0000000..6dec339 --- /dev/null +++ b/libs/fabric/src/components/fabric-button.component.css @@ -0,0 +1,4 @@ +:host { + background: red; + display: inline-block; +} diff --git a/libs/fabric/src/components/fabric-button.component.ts b/libs/fabric/src/components/fabric-button.component.ts index 1a3a3bb..ac6376a 100644 --- a/libs/fabric/src/components/fabric-button.component.ts +++ b/libs/fabric/src/components/fabric-button.component.ts @@ -18,7 +18,11 @@ import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button'; [text]="text" (onClick)="onClick($event)"> `, - styles: ['react-renderer'], + styleUrls: ['./fabric-button.component.css'], + styles: [ + 'react-renderer', + ':host { display: inline-block; background: red; }' + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabricButtonComponent {