Merge pull request #127 from microsoft/upgrade/angular_8
Upgrade/angular 8
This commit is contained in:
Коммит
7a4961352e
|
@ -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"
|
||||
|
|
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
63
package.json
63
package.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
3243
yarn.lock
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче