Change ReactWrapperComponent's constructor API to prepare for breaking changes

Author: Ben Grynhaus

libs/core/src/lib/components/wrapper-component.ts

@@ -48,6 +48,14 @@ export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
 export type ContentClassValue = string[] | Set<string> | { [klass: string]: any };
 export type ContentStyleValue = string | StyleObject;
 
+export interface WrapperComponentOptions {
+  readonly setHostDisplay?: boolean;
+}
+
+const defaultWrapperComponentOptions: WrapperComponentOptions = {
+  setHostDisplay: false,
+};
+
 /**
  * Base class for Angular @Components wrapping React Components.
  * Simplifies some of the handling around passing down props and CSS styling on the host component.
@@ -57,6 +65,8 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   private _contentClass: Many<ContentClassValue>;
   private _contentStyle: ContentStyleValue;
 
+  private _shouldSetHostDisplay: boolean;
+
   protected abstract reactNodeRef: ElementRef<HTMLElement>;
 
   /**
@@ -109,13 +119,15 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     public readonly elementRef: ElementRef<HTMLElement>,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly renderer: Renderer2,
-    private readonly setHostDisplay: boolean = false
-  ) {}
+    { setHostDisplay }: WrapperComponentOptions = defaultWrapperComponentOptions
+  ) {
+    this._shouldSetHostDisplay = setHostDisplay;
+  }
 
   ngAfterViewInit() {
     this._passAttributesAsProps();
 
-    if (this.setHostDisplay) {
+    if (this._shouldSetHostDisplay) {
       this._setHostDisplay();
     }
 

libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -22,8 +22,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
       [styles]="styles"
       [theme]="theme"
       [RenderItem]="renderItem && onRenderItem"
-      [ReduceData]="onReduceData"
-      >
+      [ReduceData]="onReduceData">
     </Breadcrumb>
   `,
   styles: ['react-renderer'],

libs/fabric/src/lib/components/button/base-button.component.ts

@@ -91,7 +91,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   onRenderMenuIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: 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);

libs/fabric/src/lib/components/command-bar/command-bar.component.ts

@@ -115,7 +115,7 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   private readonly _subscriptions: Subscription[] = [];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 
   ngOnChanges(changes: TypedChanges<this>) {

libs/fabric/src/lib/components/icon/icon.component.ts

@@ -2,7 +2,15 @@
 // Licensed under the MIT License.
 
 import { ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 
 @Component({
@@ -43,6 +51,6 @@ export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
   styles?: IIconProps['styles'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 }

libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts

@@ -88,7 +88,7 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
   private _pickerSuggestionsOptions: IBasePickerSuggestionsOptions;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
 
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onFocusHandler = this.onFocusHandler.bind(this);

libs/fabric/src/lib/components/pivot/pivot.component.ts

@@ -69,8 +69,8 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
 
   onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
 
-  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 
   ngOnInit() {
@@ -145,7 +145,7 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
   readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
 
     this.onLinkClickHandler = this.onLinkClickHandler.bind(this);
   }

libs/fabric/src/lib/components/shimmer/shimmer.component.ts

@@ -66,7 +66,7 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
   private _renderCustomElementsGroup?: InputRendererOptions<{}>;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 }
 
@@ -109,6 +109,6 @@ export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShi
   styles?: IShimmerElementsGroupProps['styles'];
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
   }
 }

libs/fabric/src/lib/components/tooltip/tooltip-host.component.ts

@@ -75,7 +75,7 @@ export class FabTooltipHostComponent extends ReactWrapperComponent<ITooltipHostP
   private _tooltipOptions: ITooltipOptions;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer, true);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
 
     this.onTooltipToggleHandler = this.onTooltipToggleHandler.bind(this);
   }