Fixed some issues with fabric command bar

Author: Ben Grynhaus

apps/demo/src/app/app.component.html

@@ -15,31 +15,12 @@ <h2>Getting up and running...</h2>
   </ol>
 </div>
 
-<div style="height: 500vh">
-
+<div>
   <fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
   </fab-command-bar>
 
   <fab-default-button (onClick)="toggleRun()" text="Toggle run"></fab-default-button>
 
   <fab-panel [isOpen]="isPanelOpen" (onDismiss)="isPanelOpen = false">
   </fab-panel>
-
-  <ng-template #customRange let-item="item">
-      <div>
-        Data: {{ item.data | json }}
-      </div>
-
-      <div>
-        <span>From: </span>
-        <input type="date" />
-      </div>
-
-      <div>
-        <span>To: </span>
-        <input type="date" />
-      </div>
-
-      <fab-default-button text="Done" (onClick)="item.onClick()"></fab-default-button>
-  </ng-template>
 </div>

apps/demo/src/app/app.component.ts

@@ -2,46 +2,20 @@ import { ChangeDetectorRef, ViewEncapsulation, Component, ComponentFactoryResolv
 import { DialogType, ITheme, IChoiceGroupProps, SpinnerSize, PersonaSize, PersonaPresence, PivotLinkSize, SelectableOptionMenuItemType, PanelType, ICommandBarItemProps, IBreadcrumbItem, IButtonProps, Button, MessageBarType, ShimmerElementType } from 'office-ui-fabric-react';
 import { IExpandingCardOptions } from '@angular-react/fabric/src/components/hover-card';
 import { ICommandBarItemOptions, FabCommandBarComponent } from '@angular-react/fabric/src/components/command-bar';
-import { DateRangeModel } from 'apps/demo/src/app/daterange.model';
 
-@Component({
-  selector: 'fab-panel-header',
-  template: `
-    <div>props: {{ props }}</div>
-
-    <div>{{ dynamicText }}</div>
-
-    <button (click)="onClick()">Click</button>
-  `
-})
-export class PanelBodyComponent {
-  @Input() props: any;
-
-  @Input() headerTextId: any;
-
-  dynamicText: string = "initial";
-
-  constructor(private cd: ChangeDetectorRef) { }
-
-  onClick() {
-    this.dynamicText = "new text!";
-    this.cd.detectChanges();
-  }
-}
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  entryComponents: [PanelBodyComponent],
   encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent {
 
   @ViewChild(FabCommandBarComponent) commandBar: FabCommandBarComponent;
   @ViewChild('customRange') customRangeTemplate: TemplateRef<{ item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
 
-  commandBarItems: ICommandBarItemOptions[] = [
+  commandBarItems: ReadonlyArray<ICommandBarItemOptions> = [
     {
       key: 'run',
       text: 'Run',
@@ -164,7 +138,7 @@ export class AppComponent {
     },
   ];
 
-  readonly commandBarFarItems: ICommandBarItemOptions[] = [
+  commandBarFarItems: ReadonlyArray<ICommandBarItemOptions> = [
     {
       key: 'help',
       text: 'Help',
@@ -185,14 +159,12 @@ export class AppComponent {
 
   isPanelOpen = false;
 
-  constructor(private readonly cd: ChangeDetectorRef) {
-  }
-
   toggleRun() {
-    const runItem = this.commandBarItems.find(item => item.key === 'run');
-    runItem.disabled = !runItem.disabled;
-
-    this.commandBar.detectChanges();
+    this.commandBarItems = this.commandBarItems.map(item =>
+      item.key === 'run'
+        ? { ...item, disabled: !item.disabled }
+        : item
+    );
   }
 
 }

apps/demo/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabModalModule,
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
-import { AppComponent, PanelBodyComponent } from './app.component';
+import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [
@@ -37,7 +37,7 @@ import { AppComponent, PanelBodyComponent } from './app.component';
     FabSliderModule,
     FabSearchBoxModule,
   ],
-  declarations: [AppComponent, PanelBodyComponent],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {

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

@@ -13,7 +13,7 @@ import omit from "../../utils/omit";
       [componentRef]="componentRef"
       [items]="transformedItems"
       [farItems]="transformedFarItems"
-      [overflowItems]="overflowItems"
+      [overflowItems]="transformedOverflowItems"
       [overflowButtonProps]="overflowButtonProps"
       [overflowButtonAs]="overflowButtonAs"
       [overflowMenuProps]="overflowMenuProps"
@@ -49,9 +49,9 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   @Input() onReduceData?: ICommandBarProps['onReduceData'];
   @Input() onGrowData?: ICommandBarProps['onGrowData'];
 
-  @Input() overflowItems: ReadonlyArray<ICommandBarItemOptions>;
   @Input() items: ReadonlyArray<ICommandBarItemOptions>;
   @Input() farItems: ReadonlyArray<ICommandBarItemOptions>;
+  @Input() overflowItems: ReadonlyArray<ICommandBarItemOptions>;
 
   @Output() readonly onDataReduced = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
   @Output() readonly onDataGrown = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
@@ -65,22 +65,22 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['items'].previousValue !== changes['items'].currentValue && changes['items'].currentValue) this._createTransformedItems(changes['items'].currentValue);
-    if (changes['farItems'].previousValue !== changes['farItems'].currentValue && changes['farItems'].currentValue) this._createTransformedItems(changes['farItems'].currentValue);
-    if (changes['overflowItems'].previousValue !== changes['overflowItems'].currentValue && changes['overflowItems'].currentValue) this._createTransformedItems(changes['overflowItems'].currentValue);
+    if (changes['items'] && changes['items'].previousValue !== changes['items'].currentValue && changes['items'].currentValue) this._createTransformedItems(changes['items'].currentValue);
+    if (changes['farItems'] && changes['farItems'].previousValue !== changes['farItems'].currentValue && changes['farItems'].currentValue) this._createTransformedFarItems(changes['farItems'].currentValue);
+    if (changes['overflowItems'] && changes['overflowItems'].previousValue !== changes['overflowItems'].currentValue && changes['overflowItems'].currentValue) this._createTransformedOverflowItems(changes['overflowItems'].currentValue);
 
     this.detectChanges();
   }
 
-  private _createTransformedItems(newItems: ICommandBarItemOptions[]) {
+  private _createTransformedItems(newItems: ReadonlyArray<ICommandBarItemOptions>) {
     this.transformedItems = newItems.map(item => this._transformCommandBarItemOptionsToProps(item));
   }
 
-  private _createTransformedFarItems(newItems: ICommandBarItemOptions[]) {
+  private _createTransformedFarItems(newItems: ReadonlyArray<ICommandBarItemOptions>) {
     this.transformedFarItems = newItems.map(item => this._transformCommandBarItemOptionsToProps(item));
   }
 
-  private _createTransformedOverflowItems(newItems: ICommandBarItemOptions[]) {
+  private _createTransformedOverflowItems(newItems: ReadonlyArray<ICommandBarItemOptions>) {
     this.transformedOverflowItems = newItems.map(item => this._transformCommandBarItemOptionsToProps(item));
   }