Merge pull request #127 from microsoft/upgrade/angular_8

Upgrade/angular 8
This commit is contained in:
Shai Rose 2019-06-23 16:41:37 +03:00 коммит произвёл GitHub
Родитель f892a89f00 2341e2c85b
Коммит 7a4961352e
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
87 изменённых файлов: 7195 добавлений и 5396 удалений

Просмотреть файл

@ -33,10 +33,11 @@ Initial work to prove the feasibility of adapting the Angular Renderer to output
In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications.
## Getting started
See our [Getting Started Guide][getting-started]
See our [Getting Started Guide][getting-started] demo
if you're building your first project with Angular-React.
See a simple [StackBlitz Template](https://stackblitz.com/edit/angular-react)
If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md).
You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.

Просмотреть файл

@ -27,7 +27,7 @@ export class AppComponent {
}),
};
@ViewChild('customRange') customRangeTemplate: TemplateRef<{
@ViewChild('customRange', { static: false }) customRangeTemplate: TemplateRef<{
item: any;
dismissMenu: (ev?: any, dismissAll?: boolean) => void;
}>;

Просмотреть файл

@ -1,13 +1,232 @@
@import './styles/variables.scss';
@import './styles/mixins.scss';
:host {
app-root {
height: 100%;
display: block;
box-sizing: border-box;
border-top: $navPrimaryHeight + 1 solid transparent;
/deep/ .page {
.page {
background: $snow;
padding: 20px;
}
#navbar {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
border-top: $rubberbandScrollBuffer solid $oil;
margin-top: 0 - $rubberbandScrollBuffer;
z-index: 10;
nav.primary {
background-color: $oil;
color: $snow;
.mat-button {
line-height: $navPrimaryHeight;
min-width: 50px;
}
.mat-tab-links {
display: flex;
}
.mat-ink-bar {
background-color: $smoke;
}
.mat-tab-link {
color: $snow;
&.mat-tab-label-active {
opacity: 1;
}
div {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
nav.secondary {
background: $smoke;
.mat-tab-nav-bar {
.mat-tab-links {
display: flex;
overflow-y: auto;
.mat-ink-bar {
background-color: $oil;
}
.mat-tab-link {
height: $navSecondaryHeight;
transition: height 500ms;
display: flex;
flex-direction: column;
transition: height 500ms;
&.mat-tab-label-active {
opacity: 1;
}
mat-icon {
font-size: $navSecondaryHeight - 24;
height: $navSecondaryHeight - 24;
width: $navSecondaryHeight - 24;
opacity: 1;
transition: 500ms;
svg {
transition: 500ms;
margin: $navSecondaryHeight / 10;
}
&.stack {
position: relative;
svg {
position: absolute;
top: 50%;
left: 50%;
&:first-child {
margin: -30%;
height: 50%;
}
&:last-child {
margin: 10%;
height: 30%;
}
}
}
}
}
}
}
&.collapse {
.mat-tab-nav-bar {
.mat-tab-links {
.mat-tab-link {
height: $navSecondaryHeightCollapsed;
mat-icon {
font-size: 1px;
height: 1px;
width: 1px;
opacity: 0;
svg {
margin: 0;
}
&.stack {
svg {
&:first-child {
margin: -30%;
height: 70%;
}
&:last-child {
margin: 18%;
height: 55%;
}
}
}
}
}
}
}
}
}
.spacer {
flex: 1 1 auto;
}
}
@include mediaMobile {
:host {
nav.primary {
.mat-button:first-child {
.mat-button-wrapper {
b {
display: none;
}
.mat-icon:last-child {
margin-left: -14px;
margin-top: 8px;
svg {
height: 60%;
}
}
}
}
.mat-tab-links {
.mat-tab-link {
padding: 0 3%;
min-width: 0;
}
}
}
nav.secondary {
.mat-tab-nav-bar {
.mat-tab-links {
.mat-tab-link {
height: $navSecondaryHeightNarrow;
mat-icon {
font-size: $navSecondaryHeightNarrow - 24;
height: $navSecondaryHeightNarrow - 24;
width: $navSecondaryHeightNarrow - 24;
svg {
margin: $navSecondaryHeightNarrow / 8;
}
}
}
}
}
}
}
}
#page-header {
display: flex;
h1,
h2,
h3,
h4,
h5,
h6 {
display: inline-block;
margin: 0;
padding-bottom: 4px;
margin-right: 10px;
}
div {
flex-grow: 1;
}
button {
margin-left: -8px;
}
}
}

Просмотреть файл

@ -1,8 +1,9 @@
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

Просмотреть файл

Просмотреть файл

@ -3,6 +3,5 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-icons',
templateUrl: './icons.component.html',
styleUrls: ['./icons.component.scss'],
})
export class IconsComponent {}

Просмотреть файл

@ -1,52 +1,66 @@
<nav mat-tab-nav-bar #primary class="primary">
<a mat-button routerLink=".">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#angular" /></svg>
</mat-icon>
<b>~</b>
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#react" /></svg>
</mat-icon>
</a>
<a
mat-tab-link
routerLink="performance"
routerLinkActive
#rla1="routerLinkActive"
[active]="rla1.isActive"
[routerLinkActiveOptions]="{ exact: false }"
>
<div>Performance</div>
</a>
<a
mat-tab-link
routerLink="components"
routerLinkActive
#rla2="routerLinkActive"
[active]="rla2.isActive"
[routerLinkActiveOptions]="{ exact: false }"
><div>Components</div></a
>
<a
mat-tab-link
routerLink="docs"
routerLinkActive
#rla3="routerLinkActive"
[active]="rla3.isActive"
[routerLinkActiveOptions]="{ exact: false }"
><div>Docs</div></a
>
<div class="spacer"></div>
<a mat-button href="https://github.com/microsoft/angular-react">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-github-icon">GitHub icon</title>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
</mat-icon>
</a>
</nav>
<div id="navbar">
<nav mat-tab-nav-bar #primary class="primary">
<a mat-button routerLink=".">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#angular"/>
</svg>
</mat-icon>
<b>~</b>
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#react"/>
</svg>
</mat-icon>
</a>
<a
mat-tab-link
routerLink="performance"
routerLinkActive
#rla1="routerLinkActive"
[active]="rla1.isActive"
[routerLinkActiveOptions]="{ exact: false }"
>
<div>Performance</div>
</a>
<a
mat-tab-link
routerLink="components"
routerLinkActive
#rla2="routerLinkActive"
[active]="rla2.isActive"
[routerLinkActiveOptions]="{ exact: false }"
>
<div>Components</div>
</a
>
<a
mat-tab-link
routerLink="docs"
routerLinkActive
#rla3="routerLinkActive"
[active]="rla3.isActive"
[routerLinkActiveOptions]="{ exact: false }"
>
<div>Docs</div>
</a
>
<div class="spacer"></div>
<a mat-button href="https://github.com/microsoft/angular-react">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img"
viewBox="0 0 24 24">
<title id="simpleicons-github-icon">GitHub icon</title>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
</mat-icon>
</a>
</nav>
<nav class="secondary" [class.collapse]="collapseSecondaryNav"><ng-container #container></ng-container></nav>
<nav class="secondary" [class.collapse]="collapseSecondaryNav">
<ng-container #container></ng-container>
</nav>
</div>

Просмотреть файл

@ -1,194 +0,0 @@
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';
:host {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
border-top: $rubberbandScrollBuffer solid $oil;
margin-top: 0 - $rubberbandScrollBuffer;
z-index: 10;
nav.primary {
background-color: $oil;
color: $snow;
.mat-button {
line-height: $navPrimaryHeight;
min-width: 50px;
}
/deep/ .mat-tab-links {
display: flex;
.mat-ink-bar {
background-color: $smoke;
}
.mat-tab-link {
color: $snow;
&.mat-tab-label-active {
opacity: 1;
}
div {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}
nav.secondary {
background: $smoke;
/deep/ .mat-tab-nav-bar {
.mat-tab-links {
display: flex;
overflow-y: auto;
.mat-ink-bar {
background-color: $oil;
}
.mat-tab-link {
height: $navSecondaryHeight;
transition: height 500ms;
display: flex;
flex-direction: column;
transition: height 500ms;
&.mat-tab-label-active {
opacity: 1;
}
mat-icon {
font-size: $navSecondaryHeight - 24;
height: $navSecondaryHeight - 24;
width: $navSecondaryHeight - 24;
opacity: 1;
transition: 500ms;
svg {
transition: 500ms;
margin: $navSecondaryHeight / 10;
}
&.stack {
position: relative;
svg {
position: absolute;
top: 50%;
left: 50%;
&:first-child {
margin: -30%;
height: 50%;
}
&:last-child {
margin: 10%;
height: 30%;
}
}
}
}
}
}
}
&.collapse {
/deep/ .mat-tab-nav-bar {
.mat-tab-links {
.mat-tab-link {
height: $navSecondaryHeightCollapsed;
mat-icon {
font-size: 1px;
height: 1px;
width: 1px;
opacity: 0;
svg {
margin: 0;
}
&.stack {
svg {
&:first-child {
margin: -30%;
height: 70%;
}
&:last-child {
margin: 18%;
height: 55%;
}
}
}
}
}
}
}
}
}
.spacer {
flex: 1 1 auto;
}
}
@include mediaMobile {
:host {
nav.primary {
/deep/ .mat-button:first-child {
.mat-button-wrapper {
b {
display: none;
}
.mat-icon:last-child {
margin-left: -14px;
margin-top: 8px;
svg {
height: 60%;
}
}
}
}
/deep/ .mat-tab-links {
.mat-tab-link {
padding: 0 3%;
min-width: 0;
}
}
}
nav.secondary {
/deep/ .mat-tab-nav-bar {
.mat-tab-links {
.mat-tab-link {
height: $navSecondaryHeightNarrow;
mat-icon {
font-size: $navSecondaryHeightNarrow - 24;
height: $navSecondaryHeightNarrow - 24;
width: $navSecondaryHeightNarrow - 24;
svg {
margin: $navSecondaryHeightNarrow / 8;
}
}
}
}
}
}
}
}

Просмотреть файл

@ -5,12 +5,11 @@ import { SubNavService } from '../../shared/sub-nav.service';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent implements OnInit, AfterViewInit {
@ViewChild('primary', { read: ElementRef })
@ViewChild('primary', { read: ElementRef, static: true })
primaryNav: ElementRef;
@ViewChild('container', { read: ViewContainerRef })
@ViewChild('container', { read: ViewContainerRef, static: true })
container: ViewContainerRef;
collapseSecondaryNav = false;
@ -23,7 +22,6 @@ export class NavbarComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
fromEvent(window, 'scroll')
// .pipe(throttleTime(1))
.subscribe(e => {
this.collapseSecondaryNav = window.pageYOffset > this.primaryNav.nativeElement.offsetHeight / 4;
});

Просмотреть файл

@ -1 +1,3 @@
<ng-content></ng-content>
<div id="page-header">
<ng-content></ng-content>
</div>

Просмотреть файл

@ -1,27 +0,0 @@
:host {
display: flex;
// flex-direction: row;
// justify-content: last-baseline;
/deep/ {
h1,
h2,
h3,
h4,
h5,
h6 {
display: inline-block;
margin: 0;
padding-bottom: 4px;
margin-right: 10px;
}
div {
flex-grow: 1;
}
button {
margin-left: -8px;
}
}
}

Просмотреть файл

@ -3,6 +3,5 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-page-header',
templateUrl: './page-header.component.html',
styleUrls: ['./page-header.component.scss'],
})
export class PageHeaderComponent {}

Просмотреть файл

@ -18,7 +18,7 @@ export interface TriangleConfig {
styleUrls: ['./triangle.component.scss'],
})
export class TriangleComponent implements OnInit, OnDestroy {
@ContentChild(TemplateRef) readonly dotTemplate: TemplateRef<{
@ContentChild(TemplateRef, { static: true }) readonly dotTemplate: TemplateRef<{
dot: SierpinskiTriangleDot;
text: number;
}>;

Просмотреть файл

@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-getting-started',
templateUrl: './getting-started.component.html',
styleUrls: ['./getting-started.component.scss'],
})
export class GettingStartedComponent implements OnInit {
constructor() {}

Просмотреть файл

Просмотреть файл

@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-wrappers',
templateUrl: './wrappers.component.html',
styleUrls: ['./wrappers.component.scss'],
})
export class WrappersComponent implements OnInit {
constructor() {}

Просмотреть файл

@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core';
import { MatSliderChange } from '@angular/material';
import { MatSliderChange } from '@angular/material/slider';
import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangle/triangle.component';
@ -11,7 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
export class AngularPerfComponent {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
@ViewChild(TriangleComponent, { static: true }) readonly triangle: TriangleComponent;
get toggleTriangleLabel() {
return this.triangle.isActive ? 'Stop' : 'Restart';

Просмотреть файл

@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core';
import { MatSliderChange } from '@angular/material';
import { MatSliderChange } from '@angular/material/slider';
import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangle/triangle.component';
@ -11,7 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
export class MixedPerfComponent {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
@ViewChild(TriangleComponent, { static: true }) readonly triangle: TriangleComponent;
projectAsAngular = true;
contentCollapsed = true;

Просмотреть файл

@ -1,15 +1,13 @@
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatTabsModule,
MatToolbarModule,
MatMenuModule,
MatSlideToggleModule,
MatSliderModule,
MatButtonToggleModule,
} from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
const componentModules = [
MatButtonModule,

Просмотреть файл

@ -41,7 +41,7 @@ import { ReactWrapperComponent } from '@angular-react/core';
styles: ['react-renderer'],
})
export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() x: string;
@Input() y: string;

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -1,27 +1,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
<meta charset="utf-8" />
<title>Angular-React</title>
<title>Angular-React</title>
<script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</script>
<script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</script>
<!-- Immediately redirect to the base URL so we can use the SPA routing. -->
<meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/'"></meta>
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</body>
<!-- Immediately redirect to the base URL so we can use the SPA routing. -->
<meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/'" />
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</html>

Просмотреть файл

@ -1,20 +1,19 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular-React</title>
<base href="https://microsoft.github.io/angular-react/">
<head>
<meta charset="utf-8" />
<title>Angular-React</title>
<base href="https://microsoft.github.io/angular-react/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="styles.54d5beb2bb3f0bed9c61.css"></head>
<body>
<!-- Github Pages hack to allow SPA refresh without receiving 404. -->
<script>
(function () {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="styles.6d69625176213009fe6e.css"></head>
<body>
<!-- Github Pages hack to allow SPA refresh without receiving 404. -->
<script>
(function() {
// Retrieve the URL the user was trying to access when receiving the 404.
var redirect = sessionStorage.redirect;
// Remove the URL from sessionStorage.
@ -26,8 +25,8 @@
}
})();
</script>
<!-- /Github Pages hack. -->
<!-- /Github Pages hack. -->
<app-root class="mat-typography"></app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.c8126bc4bb3b67713eee.js"></script><script type="text/javascript" src="main.46c4d6588aa325c6e33e.js"></script></body>
<app-root class="mat-typography"></app-root>
<script src="runtime.741402d1d47331ce975c.js"></script><script src="polyfills-es5.713635137766a4d7e797.js" nomodule></script><script src="polyfills.f0298b90f4936f78a809.js"></script><script src="main.27d41c25450e53e7b24e.js"></script></body>
</html>

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +0,0 @@
!function(r){function e(e){for(var t,p,c=e[0],a=e[1],f=e[2],l=0,s=[];l<c.length;l++)o[p=c[l]]&&s.push(o[p][0]),o[p]=0;for(t in a)Object.prototype.hasOwnProperty.call(a,t)&&(r[t]=a[t]);for(i&&i(e);s.length;)s.shift()();return u.push.apply(u,f||[]),n()}function n(){for(var r,e=0;e<u.length;e++){for(var n=u[e],t=!0,c=1;c<n.length;c++)0!==o[n[c]]&&(t=!1);t&&(u.splice(e--,1),r=p(p.s=n[0]))}return r}var t={},o={0:0},u=[];function p(e){if(t[e])return t[e].exports;var n=t[e]={i:e,l:!1,exports:{}};return r[e].call(n.exports,n,n.exports,p),n.l=!0,n.exports}p.m=r,p.c=t,p.d=function(r,e,n){p.o(r,e)||Object.defineProperty(r,e,{configurable:!1,enumerable:!0,get:n})},p.r=function(r){Object.defineProperty(r,"__esModule",{value:!0})},p.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return p.d(e,"a",e),e},p.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},p.p="";var c=window.webpackJsonp=window.webpackJsonp||[],a=c.push.bind(c);c.push=e,c=c.slice();for(var f=0;f<c.length;f++)e(c[f]);var i=a;n()}([]);

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1,7 +1,7 @@
{
"$schema": "../../node_modules/ng-packagr/package.schema.json",
"name": "@angular-react/core",
"version": "0.6.5",
"version": "1.0.0-next",
"ngPackage": {
"deleteDestPath": true,
"whitelistedNonPeerDependencies": [
@ -50,11 +50,11 @@
],
"private": false,
"peerDependencies": {
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"rxjs": "^6.2.0",
"@angular/compiler": "^8.0.2",
"@angular/core": "^8.0.2",
"@angular/platform-browser-dynamic": "^8.0.2",
"@angular/platform-browser": "^8.0.2",
"rxjs": "^6.5.2",
"react-dom": "^16.6.3",
"react": "^16.6.3"
},

Просмотреть файл

@ -7,6 +7,7 @@ import { ReactWrapperComponent } from '../../components/wrapper-component';
import { getPassProps } from '../../renderer/pass-prop-decorator';
import removeUndefinedProperties from '../../utils/object/remove-undefined-properties';
import { ReactContent } from '../react-content';
import { ReactElement } from 'react';
/**
* Props for `Disguise` component.
@ -52,7 +53,7 @@ export class Disguise extends React.PureComponent<DisguiseProps> {
if (React.Children.count(children) === 1) {
const [onlyChild] = React.Children.toArray(children);
if (typeof onlyChild === 'object' && onlyChild.type === ReactContent) {
if (typeof onlyChild === 'object' && (<ReactElement<any>>onlyChild).type === ReactContent) {
return true;
}
}
@ -96,8 +97,12 @@ export class Disguise extends React.PureComponent<DisguiseProps> {
return child;
}
const ChildRoot = child.type || disguiseChildrenAs;
return React.createElement(ChildRoot, { ...child.props, key: child.key }, child);
const ChildRoot = (<ReactElement<any>>child).type || disguiseChildrenAs;
return React.createElement(
ChildRoot,
{ ...(<ReactElement<any>>child).props, key: (<ReactElement<any>>child).key },
child
);
});
return renderedChildren;

Просмотреть файл

@ -34,7 +34,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
};
constructor(eventManager: EventManager, sharedStylesHost: ɵDomSharedStylesHost) {
super(eventManager, sharedStylesHost);
super(eventManager, sharedStylesHost, 'app-id');
// tslint:disable-next-line: no-use-before-declare
this.defaultReactRenderer = new ReactRenderer(this);

Просмотреть файл

@ -1,7 +1,7 @@
{
"$schema": "../../node_modules/ng-packagr/package.schema.json",
"name": "@angular-react/fabric",
"version": "0.6.5",
"version": "1.0.0-next",
"ngPackage": {
"lib": {
"entryFile": "public-api.ts",
@ -45,10 +45,10 @@
"private": false,
"peerDependencies": {
"@angular-react/core": "^0.6.2",
"@angular/common": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/common": "^8.0.2",
"@angular/core": "^8.0.2",
"@angular/platform-browser-dynamic": "^8.0.2",
"@angular/platform-browser": "^8.0.2",
"office-ui-fabric-react": "6.151.0",
"react-dom": "^16.6.3",
"react": "^16.6.3"

Просмотреть файл

@ -39,7 +39,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IBreadcrumbProps['componentRef'];
@Input() items: IBreadcrumbProps['items'];

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabActionButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCompoundButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDefaultButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabIconButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -64,7 +64,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSplitButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -61,7 +61,7 @@ import { CalendarStringsDirective } from './directives/calendar-strings-directiv
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> implements AfterContentInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ICalendarProps['componentRef'];
@Input() className?: ICalendarProps['className'];
@ -94,7 +94,7 @@ export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps>
@Output() readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
@Output() readonly onDismiss = new EventEmitter<void>();
@ContentChild(CalendarStringsDirective) readonly calendarStringsDirective?: CalendarStringsDirective;
@ContentChild(CalendarStringsDirective, { static: true }) readonly calendarStringsDirective?: CalendarStringsDirective;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

Просмотреть файл

@ -65,7 +65,7 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ICalloutProps['componentRef'];
@Input() target?: ICalloutProps['target'];

Просмотреть файл

@ -50,7 +50,7 @@ import { FormEvent } from 'react';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ICheckboxProps['componentRef'];
@Input() className?: ICheckboxProps['className'];

Просмотреть файл

@ -39,7 +39,7 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IChoiceGroupProps['componentRef'];
@Input() options?: IChoiceGroupProps['options'];

Просмотреть файл

@ -64,7 +64,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<ICo
@Output() readonly onMenuDismissed = new EventEmitter<void>();
@Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
@ContentChild(ComboBoxOptionsDirective) readonly comboBoxOptionsDirective?: ComboBoxOptionsDirective;
@ContentChild(ComboBoxOptionsDirective, { static: true }) readonly comboBoxOptionsDirective?: ComboBoxOptionsDirective;
onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;

Просмотреть файл

@ -52,7 +52,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -52,7 +52,7 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone);

Просмотреть файл

@ -62,11 +62,11 @@ import {
})
export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy {
@ContentChild(CommandBarItemsDirective) readonly itemsDirective?: CommandBarItemsDirective;
@ContentChild(CommandBarFarItemsDirective) readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarOverflowItemsDirective) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
@ContentChild(CommandBarItemsDirective, { static: true }) readonly itemsDirective?: CommandBarItemsDirective;
@ContentChild(CommandBarFarItemsDirective, { static: true }) readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarOverflowItemsDirective, { static: true }) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ICommandBarProps['componentRef'];
@Input() overflowButtonProps?: ICommandBarProps['overflowButtonProps'];

Просмотреть файл

@ -17,7 +17,7 @@ export type CommandBarItemChangedPayload = ItemChangedPayload<ICommandBarItemOpt
*/
@Directive({ selector: 'fab-command-bar-item > render' })
export class CommandBarItemRenderDirective {
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
@ContentChild(TemplateRef, { static: false }) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
}
/**
@ -25,7 +25,7 @@ export class CommandBarItemRenderDirective {
*/
@Directive({ selector: 'fab-command-bar-item > render-icon' })
export class CommandBarItemRenderIconDirective {
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
@ContentChild(TemplateRef, { static: false }) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
}
@Directive({ selector: 'fab-command-bar-item' })

Просмотреть файл

@ -33,7 +33,7 @@ export type ContextualMenuItemChangedPayload = ItemChangedPayload<
*/
@Directive({ selector: 'fab-command-bar-item > render' })
export class ContextualMenuItemRenderDirective {
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderContext>;
@ContentChild(TemplateRef, { static: false }) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderContext>;
}
/**
@ -41,7 +41,7 @@ export class ContextualMenuItemRenderDirective {
*/
@Directive({ selector: 'fab-command-bar-item > render-icon' })
export class ContextualMenuItemRenderIconDirective {
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderIconContext>;
@ContentChild(TemplateRef, { static: false }) readonly templateRef: TemplateRef<IContextualMenuItemOptionsRenderIconContext>;
}
@Directive({ selector: 'contextual-menu-item' })
@ -53,8 +53,8 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
OnChanges<ContextualMenuItemDirective>,
OnDestroy {
@ContentChildren(ContextualMenuItemDirective) readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
@ContentChild(ContextualMenuItemRenderDirective) readonly renderDirective: ContextualMenuItemRenderDirective;
@ContentChild(ContextualMenuItemRenderIconDirective)
@ContentChild(ContextualMenuItemRenderDirective, { static: false }) readonly renderDirective: ContextualMenuItemRenderDirective;
@ContentChild(ContextualMenuItemRenderIconDirective, { static: false })
readonly renderIconDirective: ContextualMenuItemRenderIconDirective;
@Input() componentRef?: IContextualMenuItem['componentRef'];

Просмотреть файл

@ -66,7 +66,7 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IDatePickerProps['componentRef'];
@Input() theme?: IDatePickerProps['theme'];

Просмотреть файл

@ -112,10 +112,10 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
})
export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>
implements AfterContentInit, OnChanges<FabDetailsListComponent>, OnDestroy, OnInit {
@ContentChild(DetailsListColumnsDirective) readonly columnsDirective?: DetailsListColumnsDirective;
@ContentChild(DetailsListGroupsDirective) readonly groupsDirective?: DetailsListGroupsDirective;
@ContentChild(DetailsListColumnsDirective, { static: true }) readonly columnsDirective?: DetailsListColumnsDirective;
@ContentChild(DetailsListGroupsDirective, { static: true }) readonly groupsDirective?: DetailsListGroupsDirective;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() theme?: IDetailsListProps['theme'];
@Input() styles?: IDetailsListProps['styles'];

Просмотреть файл

@ -12,7 +12,7 @@ import { ChangeableItemDirective } from '../../core/shared/changeable-item.direc
*/
@Directive({ selector: 'fab-details-list-column > render' })
export class DetailsListColumnRenderDirective {
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
@ContentChild(TemplateRef, { static: false }) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
}
/**
@ -21,7 +21,7 @@ export class DetailsListColumnRenderDirective {
@Directive({ selector: 'fab-details-list-column' })
export class DetailsListColumnDirective extends ChangeableItemDirective<IDetailsListColumnOptions>
implements AfterContentInit {
@ContentChild(DetailsListColumnRenderDirective) readonly renderDirective: DetailsListColumnRenderDirective;
@ContentChild(DetailsListColumnRenderDirective, { static: false }) readonly renderDirective: DetailsListColumnRenderDirective;
@Input() name: IColumn['name'];
@Input() fieldName?: IColumn['fieldName'];

Просмотреть файл

@ -46,7 +46,7 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() responsiveMode?: IDialogProps['responsiveMode'];
@Input() elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss'];
@ -89,7 +89,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IDialogFooterProps['componentRef'];
@Input() styles?: IDialogFooterProps['styles'];
@ -130,7 +130,7 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IDialogContentProps['componentRef'];
@Input() styles?: IDialogContentProps['styles'];

Просмотреть файл

@ -23,7 +23,7 @@ import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() getClassNames?: IVerticalDividerProps['getClassNames'];

Просмотреть файл

@ -65,8 +65,8 @@ import { DropdownOptionsDirective } from './directives/dropdown-options.directiv
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit, AfterContentInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ContentChild(DropdownOptionsDirective) readonly dropdownOptionsDirective?: DropdownOptionsDirective;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@ContentChild(DropdownOptionsDirective, { static: true }) readonly dropdownOptionsDirective?: DropdownOptionsDirective;
@Input() componentRef?: IDropdownProps['componentRef'];
@Input() label?: IDropdownProps['label'];

Просмотреть файл

@ -25,7 +25,7 @@ import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IFabricProps['componentRef'];
@Input() theme?: IFabricProps['theme'];

Просмотреть файл

@ -51,7 +51,7 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IGroupedListProps['componentRef'];
@Input() theme?: IGroupedListProps['theme'];

Просмотреть файл

@ -48,7 +48,7 @@ import { IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabExpandingCardComponent extends ReactWrapperComponent<IExpandingCardProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: false }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IExpandingCardProps['componentRef'];
@Input() className?: IExpandingCardProps['className'];

Просмотреть файл

@ -52,7 +52,7 @@ import { omit } from '../../utils/omit';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IHoverCardProps['componentRef'];
@Input() className?: IHoverCardProps['className'];

Просмотреть файл

@ -44,7 +44,7 @@ import { IPlainCardProps } from 'office-ui-fabric-react/lib/HoverCard';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPlainCardComponent extends ReactWrapperComponent<IPlainCardProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: false }) protected reactNodeRef: ElementRef;
@Input() componentRef: IPlainCardProps['componentRef'];
@Input() className: IPlainCardProps['className'];

Просмотреть файл

@ -33,7 +33,7 @@ import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IIconProps['componentRef'];

Просмотреть файл

@ -70,7 +70,7 @@ export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
@Output() readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

Просмотреть файл

@ -52,7 +52,7 @@ import { ILinkProps, Link } from 'office-ui-fabric-react';
export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
readonly LinkType: any = Link;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() href: ILinkProps['href'];
@Input() type?: ILinkProps['type'];

Просмотреть файл

@ -37,7 +37,7 @@ import { IMarqueeSelectionProps } from 'office-ui-fabric-react/lib/MarqueeSelect
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IMarqueeSelectionProps['componentRef'];
@Input() selection: IMarqueeSelectionProps['selection'];

Просмотреть файл

@ -42,7 +42,7 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IMessageBarProps['componentRef'];
@Input() messageBarType?: IMessageBarProps['messageBarType'];

Просмотреть файл

@ -54,7 +54,7 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
})
export class FabModalComponent extends ReactWrapperComponent<IModalProps>
implements IWithResponsiveModeState, IAccessiblePopupProps {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() responsiveMode?: IModalProps['responsiveMode'];

Просмотреть файл

@ -38,7 +38,7 @@ import {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabNavComponent extends ReactWrapperComponent<INavProps> {
@ViewChild('reactNode')
@ViewChild('reactNode', { static: true })
protected reactNodeRef: ElementRef;
@Input() componentRef?: INavProps['componentRef'];

Просмотреть файл

@ -62,7 +62,7 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IPanelProps['componentRef'];
@Input() isOpen?: IPanelProps['isOpen'];

Просмотреть файл

@ -101,7 +101,7 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IPersonaProps['componentRef'];
@Input() className?: IPersonaProps['className'];
@ -169,7 +169,7 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IPersonaCoinProps['componentRef'];
@Input() styles?: IPersonaCoinProps['styles'];

Просмотреть файл

@ -43,7 +43,7 @@ import * as React from 'react';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() @passProp() componentRef?: IPivotItemProps['componentRef'];
@ -106,7 +106,7 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
readonly PivotType = Pivot;
readonly PivotItemType = PivotItem;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@ContentChildren(FabPivotItemComponent) pivotItems: QueryList<FabPivotItemComponent>;

Просмотреть файл

@ -46,7 +46,7 @@ import omit from '../../utils/omit';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ISearchBoxProps['componentRef'];
@Input() placeholder?: ISearchBoxProps['placeholder'];

Просмотреть файл

@ -38,7 +38,7 @@ import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IShimmerProps['componentRef'];
@Input() width?: IShimmerProps['width'];
@ -91,7 +91,7 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: IShimmerElementsGroupProps['componentRef'];
@Input() rowHeight?: IShimmerElementsGroupProps['rowHeight'];

Просмотреть файл

@ -47,7 +47,7 @@ import { ISliderProps } from 'office-ui-fabric-react/lib/Slider';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSliderComponent extends ReactWrapperComponent<ISliderProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ISliderProps['componentRef'];
@Input() styles?: ISliderProps['styles'];

Просмотреть файл

@ -62,7 +62,7 @@ import { ISpinButtonProps } from 'office-ui-fabric-react/lib/SpinButton';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSpinButtonComponent extends ReactWrapperComponent<ISpinButtonProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ISpinButtonProps['componentRef'];
@Input() defaultValue?: ISpinButtonProps['defaultValue'];

Просмотреть файл

@ -36,7 +36,7 @@ import { ISpinnerProps } from 'office-ui-fabric-react/lib/Spinner';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSpinnerComponent extends ReactWrapperComponent<ISpinnerProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ISpinnerProps['componentRef'];
@Input() type?: ISpinnerProps['type'];

Просмотреть файл

@ -15,7 +15,7 @@ import {
import { ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() required?: ITextFieldProps['required'];
@Input() placeholder?: ITextFieldProps['placeholder'];

Просмотреть файл

@ -68,7 +68,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMaskedTextFieldComponent extends FabBaseTextFieldComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

Просмотреть файл

@ -69,7 +69,7 @@ import { FabBaseTextFieldComponent } from './base-text-field.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabTextFieldComponent extends FabBaseTextFieldComponent {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

Просмотреть файл

@ -41,7 +41,7 @@ import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabToggleComponent extends ReactWrapperComponent<IToggleProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() as?: IToggleProps['as'];
@Input() componentRef?: IToggleProps['componentRef'];

Просмотреть файл

@ -44,7 +44,7 @@ import { omit } from '../../utils/omit';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostProps> {
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
@Input() componentRef?: ITooltipHostProps['componentRef'];
@Input() closeDelay?: ITooltipHostProps['closeDelay'];

Просмотреть файл

@ -35,10 +35,10 @@
"private": false,
"peerDependencies": {
"@angular-react/core": "^0.3.0-alpha1",
"@angular/common": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/common": "^8.0.2",
"@angular/core": "^8.0.2",
"@angular/platform-browser-dynamic": "^8.0.2",
"@angular/platform-browser": "^8.0.2",
"semantic-ui-react": "^0.79.1",
"react-dom": "^16.4.1",
"react": "^16.4.1"

7475
package-lock.json сгенерированный

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -3,7 +3,7 @@
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "ng serve",
"start": "ng serve --port 4201",
"start:demo": "ng serve demo",
"start:docs": "ng serve docs",
"build": "ng build",
@ -55,41 +55,40 @@
},
"private": false,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngrx/effects": "~7.0.0",
"@ngrx/router-store": "~7.0.0",
"@ngrx/store": "~7.0.0",
"@ngrx/store-devtools": "~7.0.0",
"@angular/animations": "~8.0.2",
"@angular/cdk": "~8.0.1",
"@angular/common": "~8.0.2",
"@angular/compiler": "~8.0.2",
"@angular/core": "~8.0.2",
"@angular/forms": "~8.0.2",
"@angular/material": "~8.0.1",
"@angular/platform-browser": "~8.0.2",
"@angular/platform-browser-dynamic": "~8.0.2",
"@angular/router": "~8.0.2",
"@ngrx/effects": "~8.0.1",
"@ngrx/router-store": "~8.0.1",
"@ngrx/store": "~8.0.1",
"@ngrx/store-devtools": "~8.0.1",
"core-js": "^2.5.4",
"ngrx-store-freeze": "^0.2.4",
"office-ui-fabric-react": "6.151.0",
"ngrx-store-freeze": "^0.2.4",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"rxjs": "6.3.3",
"rxjs-compat": "6.2.2",
"rxjs": "6.5.2",
"semantic-ui-react": "^0.82.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.12.1",
"@angular-devkit/core": "~7.2.0",
"@angular-devkit/schematics": "~7.2.0",
"@angular/cli": "~7.2.0",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@ngrx/schematics": "~7.0.0",
"@nrwl/nx": "^7.3.0",
"@nrwl/schematics": "^7.3.0",
"@angular-devkit/build-angular": "~0.800.3",
"@angular-devkit/core": "~8.0.3",
"@angular-devkit/schematics": "~8.0.3",
"@angular/cli": "~8.0.3",
"@angular/compiler-cli": "~8.0.2",
"@angular/language-service": "~8.0.2",
"@ngrx/schematics": "~8.0.1",
"@nrwl/nx": "^7.8.7",
"@nrwl/schematics": "^8.1.2",
"@types/classnames": "^2.2.6",
"@types/css-to-style": "^1.2.0",
"@types/jasmine": "~3.3.1",
@ -99,7 +98,7 @@
"@types/react-dom": "^16.0.11",
"@types/stylenames": "^1.1.0",
"classnames": "^2.2.6",
"codelyzer": "~4.5.0",
"codelyzer": "~5.1.0",
"copyfiles": "^2.1.0",
"css-to-style": "^1.2.1",
"jasmine-core": "~3.3.0",
@ -110,15 +109,15 @@
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.0",
"karma-jasmine-html-reporter": "^1.2.0",
"ng-packagr": "^4.4.5",
"ng-packagr": "^5.3.0",
"prettier": "1.15.3",
"protractor": "~5.4.0",
"rimraf": "^2.6.2",
"stylenames": "^1.1.6",
"ts-node": "~7.0.1",
"tsickle": "^0.34.0",
"tsickle": "^0.35.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
"typescript": "~3.4.5"
}
}

Просмотреть файл

@ -1,5 +1,5 @@
{
"rulesDirectory": ["node_modules/codelyzer", "node_modules/@nrwl/schematics/src/tslint"],
"rulesDirectory": ["node_modules/codelyzer"],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,

3243
yarn.lock

Разница между файлами не показана из-за своего большого размера Загрузить разницу