From 29982832a9c0ecacb0a78f83a25639ce36ae8cb1 Mon Sep 17 00:00:00 2001 From: Ben Grynhaus Date: Mon, 13 Aug 2018 13:22:40 +0300 Subject: [PATCH 1/4] Fix React-wrapper components inside render props not being re-renderered --- .../demo/src/app/counter/counter.component.ts | 5 +-- .../src/lib/components/wrapper-component.ts | 37 +++++++++++-------- libs/core/src/lib/renderer/renderer.ts | 31 +++++++++++----- .../core/src/lib/utils/render/render-delay.ts | 3 ++ .../breadcrumb/breadcrumb.component.ts | 14 ++----- .../button/action-button.component.ts | 6 +-- .../button/base-button.component.ts | 6 +-- .../button/command-bar-button.component.ts | 6 +-- .../button/compound-button.component.ts | 6 +-- .../button/default-button.component.ts | 6 +-- .../button/icon-button.component.ts | 6 +-- .../button/messagebar-button.component.ts | 6 +-- .../button/primary-button.component.ts | 6 +-- .../button/split-button.component.ts | 6 +-- .../components/callout/callout.component.ts | 15 ++------ .../components/checkbox/checkbox.component.ts | 16 ++------ .../choice-group/choice-group.component.ts | 15 ++------ .../combo-box/base-combo-box.component.ts | 6 +-- .../combo-box/combo-box.component.ts | 6 +-- .../virtualized-combo-box.component.ts | 6 +-- .../command-bar/command-bar.component.ts | 26 ++----------- .../date-picker/date-picker.component.ts | 15 ++------ .../lib/components/dialog/dialog.component.ts | 23 ++++-------- .../components/divider/divider.component.ts | 6 +-- .../lib/components/fabric/fabric.component.ts | 6 +-- .../grouped-list/grouped-list.component.ts | 16 ++------ .../hover-card/hover-card.component.ts | 15 ++------ .../src/lib/components/icon/icon.component.ts | 8 ++-- .../lib/components/image/image.component.ts | 15 ++------ .../src/lib/components/link/link.component.ts | 6 +-- .../message-bar/message-bar.component.ts | 19 ++-------- .../lib/components/modal/modal.component.ts | 17 ++------- .../lib/components/panel/panel.component.ts | 16 ++------ .../components/persona/persona.component.ts | 20 +++------- .../base-picker/base-picker.component.ts | 9 +---- .../tag-picker/tag-picker.component.ts | 17 ++------- .../lib/components/pivot/pivot.component.ts | 24 +++--------- .../search-box/search-box.component.ts | 15 ++------ .../components/shimmer/shimmer.component.ts | 22 ++++------- .../lib/components/slider/slider.component.ts | 15 ++------ .../components/spinner/spinner.component.ts | 6 +-- .../lib/components/toggle/toggle.component.ts | 15 ++------ .../tooltip/tooltip-host.component.ts | 15 ++------ 43 files changed, 181 insertions(+), 373 deletions(-) create mode 100644 libs/core/src/lib/utils/render/render-delay.ts diff --git a/apps/demo/src/app/counter/counter.component.ts b/apps/demo/src/app/counter/counter.component.ts index 15037dcc..ac611c55 100644 --- a/apps/demo/src/app/counter/counter.component.ts +++ b/apps/demo/src/app/counter/counter.component.ts @@ -1,10 +1,9 @@ -import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; @Component({ selector: 'counter', template: ` -
{{ count }}
- + `, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/libs/core/src/lib/components/wrapper-component.ts b/libs/core/src/lib/components/wrapper-component.ts index 8113e2be..6a7c3bb1 100644 --- a/libs/core/src/lib/components/wrapper-component.ts +++ b/libs/core/src/lib/components/wrapper-component.ts @@ -1,20 +1,10 @@ -import { - AfterViewInit, - ChangeDetectorRef, - ComponentFactoryResolver, - ComponentRef, - ElementRef, - Injector, - Input, - OnChanges, - SimpleChanges, - TemplateRef, - Type, -} from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, Input, OnChanges, Renderer2, SimpleChanges, TemplateRef, Type } from '@angular/core'; import toStyle from 'css-to-style'; import { ReactContentProps } from '../renderer/react-content'; import { isReactNode } from '../renderer/react-node'; +import { isReactRendererData } from '../renderer/renderer'; import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers'; +import { afterRenderFinished } from '../utils/render/render-delay'; import { unreachable } from '../utils/types/unreachable'; // Forbidden attributes are still ignored, since they may be set from the wrapper components themselves (forbidden is only applied for users of the wrapper components) @@ -93,6 +83,7 @@ export abstract class ReactWrapperComponent implements AfterV constructor( public readonly elementRef: ElementRef, private readonly changeDetectorRef: ChangeDetectorRef, + private readonly renderer: Renderer2, private readonly setHostDisplay: boolean = false ) {} @@ -102,6 +93,16 @@ export abstract class ReactWrapperComponent implements AfterV if (this.setHostDisplay) { this._setHostDisplay(); } + + const rendererData = this.renderer.data; + if (isReactRendererData(rendererData)) { + afterRenderFinished(() => { + const nativeElement = this.reactNodeRef.nativeElement; + if (isReactNode(nativeElement)) { + rendererData.addRootNode(nativeElement); + } + }); + } } ngOnChanges(changes: SimpleChanges) { @@ -165,10 +166,14 @@ export abstract class ReactWrapperComponent implements AfterV */ protected createRenderPropHandler( renderInputValue: InputRendererOptions, - jsxRenderer?: JsxRenderFunc, - additionalProps?: ReactContentProps + options?: { + jsxRenderer?: JsxRenderFunc; + additionalProps?: ReactContentProps; + } ): (props?: TProps, defaultRender?: JsxRenderFunc) => JSX.Element | null { - const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue, additionalProps); + const renderer = + (options && options.jsxRenderer) || + this.createInputJsxRenderer(renderInputValue, options && options.additionalProps); return (props?: TProps, defaultRender?: JsxRenderFunc) => { if (!renderInputValue) { diff --git a/libs/core/src/lib/renderer/renderer.ts b/libs/core/src/lib/renderer/renderer.ts index 6e466a6a..11d3fa15 100644 --- a/libs/core/src/lib/renderer/renderer.ts +++ b/libs/core/src/lib/renderer/renderer.ts @@ -16,7 +16,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 { // React elements cannot be "inserted" and later have their props // updated, so the "insert", or React.Render, can only be done once the // element has been fully defined. Only the topmost [root] nodes are added here. - public reactRootNodes: Array = []; + public reactRootNodes: Set = new Set(); private isRenderPending: boolean; // This flag can only be set to true from outside. It can only be reset @@ -56,29 +56,39 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 { // are ReadOnly. // Workaround for ReactNodes inside ReactContent being added to the root of the VDOM and not removed from the VDOM when unmounted from the DOM. - for (let i = 0; i < this.reactRootNodes.length; i++) { - const node = this.reactRootNodes[i]; + this.reactRootNodes.forEach(node => { if ( !isReactNode(node.parent) && !document.body.contains(node.parent) && ReactDOM.unmountComponentAtNode(node.parent) ) { - this.reactRootNodes.splice(i--, 1); + this.reactRootNodes.delete(node); } - } + }); if (this.isRenderPending) { // Remove root nodes that are pending destroy after render. - this.reactRootNodes = this.reactRootNodes.filter(node => !node.render().destroyPending); + this.reactRootNodes = new Set(Array.from(this.reactRootNodes).filter(node => !node.render().destroyPending)); this.isRenderPending = false; } } } -class ReactRenderer implements Renderer2 { - readonly data: StringMap = Object.create(null); +export const isReactRendererData = (data: StringMap): data is ReactRendererData => + data && typeof (data as ReactRendererData).addRootNode === 'function'; + +export interface ReactRendererData { + readonly addRootNode: (node: ReactNode) => void; +} + +export class ReactRenderer implements Renderer2 { + readonly data: ReactRendererData = { + addRootNode: (node: ReactNode) => { + this.rootRenderer.reactRootNodes.add(node); + }, + }; - constructor(private rootRenderer: AngularReactRendererFactory) {} + constructor(public readonly rootRenderer: AngularReactRendererFactory) {} destroy(): void {} @@ -128,7 +138,8 @@ class ReactRenderer implements Renderer2 { console.warn('Renderer > appendChild > asDOM > parent:', parent.toString(), 'node:', node.toString()); } node.setRenderPendingCallback = this.rootRenderer.setRenderPendingCallback; - this.rootRenderer.reactRootNodes.push(node); + + this.rootRenderer.reactRootNodes.add(node); node.parent = parent; return; } diff --git a/libs/core/src/lib/utils/render/render-delay.ts b/libs/core/src/lib/utils/render/render-delay.ts new file mode 100644 index 00000000..6b831edd --- /dev/null +++ b/libs/core/src/lib/utils/render/render-delay.ts @@ -0,0 +1,3 @@ +export const afterRenderFinished = (callback: Function) => { + setTimeout(callback, 0); +}; diff --git a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts index cd6df845..c73f4323 100644 --- a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts +++ b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts @@ -1,13 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - Input, - OnInit, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb'; @Component({ @@ -66,8 +58,8 @@ export class FabBreadcrumbComponent extends ReactWrapperComponent) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } ngOnInit() { diff --git a/libs/fabric/src/lib/components/button/action-button.component.ts b/libs/fabric/src/lib/components/button/action-button.component.ts index cc3f1f3c..2c0fe0f8 100644 --- a/libs/fabric/src/lib/components/button/action-button.component.ts +++ b/libs/fabric/src/lib/components/button/action-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabActionButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/base-button.component.ts b/libs/fabric/src/lib/components/button/base-button.component.ts index dd696046..593ff717 100644 --- a/libs/fabric/src/lib/components/button/base-button.component.ts +++ b/libs/fabric/src/lib/components/button/base-button.component.ts @@ -1,5 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; export abstract class FabBaseButtonComponent extends ReactWrapperComponent implements OnInit { @@ -87,8 +87,8 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent) => JSX.Element; onRenderMenuIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer, true); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onMenuClickHandler = this.onMenuClickHandler.bind(this); diff --git a/libs/fabric/src/lib/components/button/command-bar-button.component.ts b/libs/fabric/src/lib/components/button/command-bar-button.component.ts index 18f021e8..b73f8e76 100644 --- a/libs/fabric/src/lib/components/button/command-bar-button.component.ts +++ b/libs/fabric/src/lib/components/button/command-bar-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabCommandBarButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/compound-button.component.ts b/libs/fabric/src/lib/components/button/compound-button.component.ts index f73fb389..d759b98e 100644 --- a/libs/fabric/src/lib/components/button/compound-button.component.ts +++ b/libs/fabric/src/lib/components/button/compound-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabCompoundButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/default-button.component.ts b/libs/fabric/src/lib/components/button/default-button.component.ts index 423f7e8e..da3c0a54 100644 --- a/libs/fabric/src/lib/components/button/default-button.component.ts +++ b/libs/fabric/src/lib/components/button/default-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabDefaultButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/icon-button.component.ts b/libs/fabric/src/lib/components/button/icon-button.component.ts index 995b1a07..7ee4872d 100644 --- a/libs/fabric/src/lib/components/button/icon-button.component.ts +++ b/libs/fabric/src/lib/components/button/icon-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabIconButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/messagebar-button.component.ts b/libs/fabric/src/lib/components/button/messagebar-button.component.ts index 683dc2ca..6552b949 100644 --- a/libs/fabric/src/lib/components/button/messagebar-button.component.ts +++ b/libs/fabric/src/lib/components/button/messagebar-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabMessageBarButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/primary-button.component.ts b/libs/fabric/src/lib/components/button/primary-button.component.ts index 2e0b3628..a4ea65b1 100644 --- a/libs/fabric/src/lib/components/button/primary-button.component.ts +++ b/libs/fabric/src/lib/components/button/primary-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabPrimaryButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/button/split-button.component.ts b/libs/fabric/src/lib/components/button/split-button.component.ts index 78de32f0..45c2b256 100644 --- a/libs/fabric/src/lib/components/button/split-button.component.ts +++ b/libs/fabric/src/lib/components/button/split-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -54,7 +54,7 @@ export class FabSplitButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/callout/callout.component.ts b/libs/fabric/src/lib/components/callout/callout.component.ts index 37d225d8..1d19de91 100644 --- a/libs/fabric/src/lib/components/callout/callout.component.ts +++ b/libs/fabric/src/lib/components/callout/callout.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout'; import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types'; @@ -126,7 +117,7 @@ export class FabCalloutComponent extends ReactWrapperComponent { @Output() readonly onScroll = new EventEmitter(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts index df7ae7c1..d87b4a43 100644 --- a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts +++ b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts @@ -1,15 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox'; import { FormEvent } from 'react'; @@ -95,8 +85,8 @@ export class FabCheckboxComponent extends ReactWrapperComponent onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onChangeHandler = this.onChangeHandler.bind(this); diff --git a/libs/fabric/src/lib/components/choice-group/choice-group.component.ts b/libs/fabric/src/lib/components/choice-group/choice-group.component.ts index 328ca497..bea08a1c 100644 --- a/libs/fabric/src/lib/components/choice-group/choice-group.component.ts +++ b/libs/fabric/src/lib/components/choice-group/choice-group.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/ChoiceGroup'; @Component({ @@ -61,8 +52,8 @@ export class FabChoiceGroupComponent extends ReactWrapperComponent(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); this.onChangedHandler = this.onChangedHandler.bind(this); this.onChangeHandler = this.onChangeHandler.bind(this); diff --git a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts index 16ec138b..c340a903 100644 --- a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts @@ -1,5 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ElementRef, EventEmitter, Input, OnInit, Output, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core'; import { IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox'; export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent implements OnInit { @@ -61,8 +61,8 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onChangedHandler = this.onChangedHandler.bind(this); diff --git a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts index 50593e00..604f6b61 100644 --- a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseComboBoxComponent } from './base-combo-box.component'; @Component({ @@ -40,7 +40,7 @@ export class FabComboBoxComponent extends FabBaseComboBoxComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts index f690803a..b339fd18 100644 --- a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { FabBaseComboBoxComponent } from './base-combo-box.component'; @Component({ @@ -40,7 +40,7 @@ export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts index f652442c..033bd30e 100644 --- a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts +++ b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts @@ -1,18 +1,5 @@ import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core'; -import { - AfterContentInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - ElementRef, - EventEmitter, - Input, - OnDestroy, - Output, - QueryList, - ViewChild, -} from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, OnDestroy, Output, QueryList, Renderer2, ViewChild } from '@angular/core'; import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar'; import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu'; import { Subscription } from 'rxjs'; @@ -20,12 +7,7 @@ import { OnChanges, TypedChanges } from '../../declarations/angular/typed-change import omit from '../../utils/omit'; import { mergeItemChanges } from '../core/declarative/item-changed'; import { CommandBarItemChangedPayload, CommandBarItemDirective } from './directives/command-bar-item.directives'; -import { - CommandBarFarItemsDirective, - CommandBarItemsDirective, - CommandBarItemsDirectiveBase, - CommandBarOverflowItemsDirective, -} from './directives/command-bar-items.directives'; +import { CommandBarFarItemsDirective, CommandBarItemsDirective, CommandBarItemsDirectiveBase, CommandBarOverflowItemsDirective } from './directives/command-bar-items.directives'; @Component({ selector: 'fab-command-bar', @@ -110,8 +92,8 @@ export class FabCommandBarComponent extends ReactWrapperComponent) { diff --git a/libs/fabric/src/lib/components/date-picker/date-picker.component.ts b/libs/fabric/src/lib/components/date-picker/date-picker.component.ts index 4f9acb35..7588aaf1 100644 --- a/libs/fabric/src/lib/components/date-picker/date-picker.component.ts +++ b/libs/fabric/src/lib/components/date-picker/date-picker.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IDatePickerProps } from 'office-ui-fabric-react/lib/DatePicker'; @Component({ @@ -121,8 +112,8 @@ export class FabDatePickerComponent extends ReactWrapperComponent(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); this.onSelectDateHandler = this.onSelectDateHandler.bind(this); } diff --git a/libs/fabric/src/lib/components/dialog/dialog.component.ts b/libs/fabric/src/lib/components/dialog/dialog.component.ts index 7ba3176e..3aa40cd3 100644 --- a/libs/fabric/src/lib/components/dialog/dialog.component.ts +++ b/libs/fabric/src/lib/components/dialog/dialog.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui-fabric-react/lib/Dialog'; @Component({ @@ -71,8 +62,8 @@ export class FabDialogComponent extends ReactWrapperComponent { @Output() readonly onDismiss = new EventEmitter(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); this.onDismissHandler = this.onDismissHandler.bind(this); } @@ -111,8 +102,8 @@ export class FabDialogFooterComponent extends ReactWrapperComponent(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/divider/divider.component.ts b/libs/fabric/src/lib/components/divider/divider.component.ts index 058fb7e1..0a587c4c 100644 --- a/libs/fabric/src/lib/components/divider/divider.component.ts +++ b/libs/fabric/src/lib/components/divider/divider.component.ts @@ -1,5 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider'; @Component({ @@ -21,7 +21,7 @@ export class FabDividerComponent extends ReactWrapperComponent { @Input() theme?: IFabricProps['theme']; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts index f8bdc12d..b4982005 100644 --- a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts +++ b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts @@ -1,15 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList'; import { IListProps } from 'office-ui-fabric-react/lib/List'; @@ -82,8 +72,8 @@ export class FabGroupedListComponent extends ReactWrapperComponent; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onRenderCell = this.onRenderCell.bind(this); diff --git a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts index 2ca82264..ad9aee22 100644 --- a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts +++ b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts @@ -1,14 +1,5 @@ import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IExpandingCardProps, IHoverCardProps } from 'office-ui-fabric-react/lib/HoverCard'; import { omit } from '../../utils/omit'; @@ -90,8 +81,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent { @Input() styles?: IIconProps['styles']; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer, true); } } diff --git a/libs/fabric/src/lib/components/image/image.component.ts b/libs/fabric/src/lib/components/image/image.component.ts index 391714b0..e89c28e1 100644 --- a/libs/fabric/src/lib/components/image/image.component.ts +++ b/libs/fabric/src/lib/components/image/image.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image'; @Component({ @@ -85,7 +76,7 @@ export class FabImageComponent extends ReactWrapperComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/link/link.component.ts b/libs/fabric/src/lib/components/link/link.component.ts index 92f01286..df8e6ba2 100644 --- a/libs/fabric/src/lib/components/link/link.component.ts +++ b/libs/fabric/src/lib/components/link/link.component.ts @@ -1,5 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link'; @Component({ @@ -91,7 +91,7 @@ export class FabLinkComponent extends ReactWrapperComponent { @Input() keytipProps?: ILinkProps['keytipProps']; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts index 35cc5c6c..e6f2f2ad 100644 --- a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts +++ b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts @@ -1,17 +1,6 @@ -import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, - OnInit, - ChangeDetectorRef, -} from '@angular/core'; +import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar'; -import { BaseButton, Button } from 'office-ui-fabric-react/lib/Button'; @Component({ selector: 'fab-message-bar', @@ -74,8 +63,8 @@ export class FabMessageBarComponent extends ReactWrapperComponent @Output() readonly onDismissed = new EventEmitter(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); this.onDismissHandler = this.onDismissHandler.bind(this); } diff --git a/libs/fabric/src/lib/components/panel/panel.component.ts b/libs/fabric/src/lib/components/panel/panel.component.ts index b176ba66..3e72477a 100644 --- a/libs/fabric/src/lib/components/panel/panel.component.ts +++ b/libs/fabric/src/lib/components/panel/panel.component.ts @@ -1,15 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Panel'; @Component({ @@ -121,8 +111,8 @@ export class FabPanelComponent extends ReactWrapperComponent implem onRenderFooter: (props?: IPanelProps, defaultRender?: JsxRenderFunc) => JSX.Element; onRenderFooterContent: (props?: IPanelProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onRenderHeader = this.onRenderHeader.bind(this); diff --git a/libs/fabric/src/lib/components/persona/persona.component.ts b/libs/fabric/src/lib/components/persona/persona.component.ts index bb7e7115..01c6f990 100644 --- a/libs/fabric/src/lib/components/persona/persona.component.ts +++ b/libs/fabric/src/lib/components/persona/persona.component.ts @@ -1,15 +1,5 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; import { ImageLoadState } from 'office-ui-fabric-react/lib/components/Image/Image.types'; import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui-fabric-react/lib/Persona'; @@ -136,8 +126,8 @@ export class FabPersonaComponent extends FabPersonaBaseComponent onRenderTertiaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc) => JSX.Element; onRenderOptionalText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } ngOnInit() { @@ -196,7 +186,7 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent> @@ -89,7 +84,7 @@ export abstract class FabBasePickerComponent) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer, true); } ngOnInit() { @@ -153,8 +141,8 @@ export class FabPivotComponent extends ReactWrapperComponent { @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer, true); this.onLinkClickHandler = this.onLinkClickHandler.bind(this); } diff --git a/libs/fabric/src/lib/components/search-box/search-box.component.ts b/libs/fabric/src/lib/components/search-box/search-box.component.ts index 1656cef8..863c8b97 100644 --- a/libs/fabric/src/lib/components/search-box/search-box.component.ts +++ b/libs/fabric/src/lib/components/search-box/search-box.component.ts @@ -1,14 +1,5 @@ import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox'; import omit from '../../utils/omit'; @@ -86,8 +77,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent { private _renderCustomElementsGroup?: InputRendererOptions<{}>; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer, true); } } @@ -113,7 +105,7 @@ export class FabShimmerElementsGroupComponent extends ReactWrapperComponent { @Output() readonly onChange = new EventEmitter(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/spinner/spinner.component.ts b/libs/fabric/src/lib/components/spinner/spinner.component.ts index ca4e6b84..c957db81 100644 --- a/libs/fabric/src/lib/components/spinner/spinner.component.ts +++ b/libs/fabric/src/lib/components/spinner/spinner.component.ts @@ -1,5 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import { ISpinnerProps } from 'office-ui-fabric-react/lib/Spinner'; @Component({ @@ -45,7 +45,7 @@ export class FabSpinnerComponent extends ReactWrapperComponent { @Input() styles?: ISpinnerProps['styles']; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/toggle/toggle.component.ts b/libs/fabric/src/lib/components/toggle/toggle.component.ts index dbf9ef7b..5d643cb4 100644 --- a/libs/fabric/src/lib/components/toggle/toggle.component.ts +++ b/libs/fabric/src/lib/components/toggle/toggle.component.ts @@ -1,14 +1,5 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, - ChangeDetectorRef, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle'; @Component({ @@ -79,7 +70,7 @@ export class FabToggleComponent extends ReactWrapperComponent { @Output() readonly onChanged = new EventEmitter(); - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { - super(elementRef, changeDetectorRef); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { + super(elementRef, changeDetectorRef, renderer); } } diff --git a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts index a71f02c7..4d6701e1 100644 --- a/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts +++ b/libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts @@ -1,14 +1,5 @@ import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - Output, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import { ITooltipHostProps, ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip'; import { omit } from '../../utils/omit'; @@ -80,8 +71,8 @@ export class FabTooltipHostComponent extends ReactWrapperComponent Date: Mon, 13 Aug 2018 13:25:16 +0300 Subject: [PATCH 2/4] Bump core & fabric versions (beta) --- libs/core/package.json | 2 +- libs/fabric/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/core/package.json b/libs/core/package.json index f59fd8d7..bdb7a2ae 100644 --- a/libs/core/package.json +++ b/libs/core/package.json @@ -1,7 +1,7 @@ { "$schema": "../../node_modules/ng-packagr/package.schema.json", "name": "@angular-react/core", - "version": "0.3.1", + "version": "0.4.0-beta1", "ngPackage": { "deleteDestPath": true, "whitelistedNonPeerDependencies": [ diff --git a/libs/fabric/package.json b/libs/fabric/package.json index 435c58ca..3e801b6f 100644 --- a/libs/fabric/package.json +++ b/libs/fabric/package.json @@ -1,7 +1,7 @@ { "$schema": "../../node_modules/ng-packagr/package.schema.json", "name": "@angular-react/fabric", - "version": "0.3.0", + "version": "0.4.0-beta1", "ngPackage": { "lib": { "entryFile": "public-api.ts", @@ -70,7 +70,7 @@ ], "private": false, "peerDependencies": { - "@angular-react/core": "^0.3.0", + "@angular-react/core": "^0.4.0", "@angular/common": "^6.1.0", "@angular/core": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", From 0ef14d85d71fe0b44840123d45a2cbf7076ce3b2 Mon Sep 17 00:00:00 2001 From: Ben Grynhaus Date: Mon, 13 Aug 2018 21:16:14 +0300 Subject: [PATCH 3/4] Added docs for workaround/fix of issue #5 --- libs/core/src/lib/components/wrapper-component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/libs/core/src/lib/components/wrapper-component.ts b/libs/core/src/lib/components/wrapper-component.ts index 6a7c3bb1..bac865ef 100644 --- a/libs/core/src/lib/components/wrapper-component.ts +++ b/libs/core/src/lib/components/wrapper-component.ts @@ -94,6 +94,9 @@ export abstract class ReactWrapperComponent implements AfterV this._setHostDisplay(); } + // NOTE: Workaround/fix for Issue #5 (https://github.com/Microsoft/angular-react/issues/5). + // The wrapper component isn't added to the root react nodes list when it's inside a `ReactContent` node, we manually add it (note that the root nodes list is a `Set`, so it won't duplicate nodes if already exist). + // There's potentially a better solution instead of this const rendererData = this.renderer.data; if (isReactRendererData(rendererData)) { afterRenderFinished(() => { From 7088423a18f41b542dd2f578f8e0368bbf46acb1 Mon Sep 17 00:00:00 2001 From: Ben Grynhaus Date: Mon, 13 Aug 2018 21:17:18 +0300 Subject: [PATCH 4/4] Bump core + fabric to 0.4.0 --- libs/core/package.json | 2 +- libs/fabric/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/package.json b/libs/core/package.json index 0a45a29e..fd83f5f2 100644 --- a/libs/core/package.json +++ b/libs/core/package.json @@ -1,7 +1,7 @@ { "$schema": "../../node_modules/ng-packagr/package.schema.json", "name": "@angular-react/core", - "version": "0.4.0-beta1", + "version": "0.4.0", "ngPackage": { "deleteDestPath": true, "whitelistedNonPeerDependencies": [ diff --git a/libs/fabric/package.json b/libs/fabric/package.json index 40ee91de..bf6a4b38 100644 --- a/libs/fabric/package.json +++ b/libs/fabric/package.json @@ -1,7 +1,7 @@ { "$schema": "../../node_modules/ng-packagr/package.schema.json", "name": "@angular-react/fabric", - "version": "0.4.0-beta1", + "version": "0.4.0", "ngPackage": { "lib": { "entryFile": "public-api.ts",