CommandBar - declarative syntax. WIP 1

Author: Ben Grynhaus

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

@@ -16,7 +16,18 @@ <h2>Getting up and running...</h2>
 </div>
 
 <div>
-  <fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
+  <fab-command-bar>
+    <items>
+      <fab-command-bar-item key="run" text="Run" [iconProps]="{ iconName: 'CaretRight' }" [disabled]="runDisabled"></fab-command-bar-item>
+      <fab-command-bar-item key="new" text="New" [iconProps]="{ iconName: 'Add' }" (onClick)="onNewClicked()"></fab-command-bar-item>
+      <fab-command-bar-item key="save" text="Save" [iconProps]="{ iconName: 'Save' }" [subMenuProps]="saveSubMenuProps"></fab-command-bar-item>
+      <fab-command-bar-item key="copy" text="Copy" [iconProps]="{ iconName: 'Copy' }" (onClick)="onCopyClicked()"></fab-command-bar-item>
+    </items>
+
+    <far-items>
+      <fab-command-bar-item key="help" text="Help" [iconProps]="{ iconName: 'Help' }"></fab-command-bar-item>
+      <fab-command-bar-item key="full-screen" [iconOnly]="true" [iconProps]="{ iconName: fullScreenIcon }" (onClick)="toggleFullScreen()"></fab-command-bar-item>
+    </far-items>
   </fab-command-bar>
 
   <fab-default-button (onClick)="toggleRun()" text="Toggle run"></fab-default-button>

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

@@ -1,21 +1,87 @@
-import { ChangeDetectorRef, ViewEncapsulation, Component, ComponentFactoryResolver, Injector, Input, ComponentRef, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';
-import { DialogType, ITheme, IChoiceGroupProps, SpinnerSize, PersonaSize, PersonaPresence, PivotLinkSize, SelectableOptionMenuItemType, PanelType, ICommandBarItemProps, IBreadcrumbItem, IButtonProps, Button, MessageBarType, ShimmerElementType } from 'office-ui-fabric-react';
+import {
+  ChangeDetectorRef,
+  ViewEncapsulation,
+  Component,
+  ComponentFactoryResolver,
+  Injector,
+  Input,
+  ComponentRef,
+  TemplateRef,
+  ViewChild,
+  AfterViewInit,
+} from '@angular/core';
+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';
 
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent {
+  @ViewChild('customRange')
+  customRangeTemplate: TemplateRef<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
+
+  runDisabled: boolean;
+
+  onNewClicked() {
+    console.log('New clicked');
+  }
 
-  @ViewChild(FabCommandBarComponent) commandBar: FabCommandBarComponent;
-  @ViewChild('customRange') customRangeTemplate: TemplateRef<{ item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
+  onCopyClicked() {
+    console.log('Copy clicked');
+  }
 
-  commandBarItems: ReadonlyArray<ICommandBarItemOptions> = [
+  // FIXME: Allow declarative syntax too
+  saveSubMenuProps = {
+    items: [
+      {
+        key: 'save',
+        text: 'Save',
+        onClick: () => console.log('Save clicked'),
+      },
+      {
+        key: 'save-as',
+        text: 'Save as',
+        subMenuProps: {
+          onItemClick: (ev, item) => {
+            console.log(`${item.text} clicked`);
+            return true;
+          },
+          items: [
+            {
+              key: 'save-as-1',
+              text: 'Save as 1',
+            },
+            {
+              key: 'save-as-2',
+              text: 'Save as 2',
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  /*   commandBarItems: ReadonlyArray<ICommandBarItemOptions> = [
     {
       key: 'run',
       text: 'Run',
@@ -155,16 +221,17 @@ export class AppComponent {
       },
       onClick: () => console.log('Expand clicked'),
     }
-  ];
+  ]; */
 
   isPanelOpen = false;
 
   toggleRun() {
-    this.commandBarItems = this.commandBarItems.map(item =>
-      item.key === 'run'
-        ? { ...item, disabled: !item.disabled }
-        : item
-    );
+    this.runDisabled = !this.runDisabled;
+  }
+
+  toggleFullScreen() {
+    this.fullScreenIcon = this.fullScreenIcon === 'BackToWindow' ? 'MiniExpand' : 'BackToWindow';
   }
 
+  fullScreenIcon = 'MiniExpand';
 }

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

@@ -9,11 +9,23 @@ import {
   ViewChild,
   ChangeDetectorRef,
   SimpleChanges,
-  OnChanges,
+  ContentChild,
+  AfterContentInit,
+  OnDestroy,
 } from '@angular/core';
 import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 import omit from '../../utils/omit';
+import { CommandBarItemsDirective } from './directives/command-bar-items.directive';
+import { CommandBarFarItemsDirective } from './directives/command-bar-far-items.directive';
+import { CommandBarOverflowItemsDirective } from './directives/command-bar-overflow-items.directive';
+import { CommandBarItemsDirectiveBase } from './directives/command-bar-items-base.directive';
+import { TypedChanges, OnChanges } from '../../types/angular/typed-changes';
+import {
+  CommandBarItemDirective,
+  CommandBarItemPropertiesChangedPayload,
+} from '@angular-react/fabric/src/components/command-bar/directives/command-bar-item.directive';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'fab-command-bar',
@@ -43,7 +55,11 @@ import omit from '../../utils/omit';
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps> implements OnChanges {
+export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
+  implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy {
+  @ContentChild(CommandBarItemsDirective) readonly itemsDirective: CommandBarItemsDirective;
+  @ContentChild(CommandBarFarItemsDirective) readonly farItemsDirective: CommandBarItemsDirective;
+
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
 
   @Input() componentRef?: ICommandBarProps['componentRef'];
@@ -73,11 +89,13 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
   /** @internal */
   transformedOverflowItems_: ReadonlyArray<ICommandBarItemProps>;
 
+  private readonly _subscriptions: Subscription[] = [];
+
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
     super(elementRef, changeDetectorRef, true);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: TypedChanges<this>) {
     if (
       changes['items'] &&
       changes['items'].previousValue !== changes['items'].currentValue &&
@@ -100,6 +118,60 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
     super.ngOnChanges(changes);
   }
 
+  ngAfterContentInit() {
+    if (this.itemsDirective) this._initDirective(this.itemsDirective, 'items');
+    if (this.farItemsDirective) this._initDirective(this.farItemsDirective, 'farItems');
+  }
+
+  ngOnDestroy() {
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  private _initDirective<TCommandBarItemsDirective extends CommandBarItemsDirectiveBase>(
+    directive: TCommandBarItemsDirective,
+    itemsPropertyKey: 'items' | 'farItems' | 'overflowItems'
+  ) {
+    const transformItemsFunc =
+      (directive instanceof CommandBarItemsDirective && (newItems => this._createTransformedItems(newItems))) ||
+      (directive instanceof CommandBarFarItemsDirective && (newItems => this._createTransformedFarItems(newItems))) ||
+      (directive instanceof CommandBarOverflowItemsDirective &&
+        (newItems => this._createTransformedOverflowItems(newItems)));
+    null;
+
+    if (!transformItemsFunc) {
+      throw new Error('Invalid directive given');
+    }
+
+    const setItems = (
+      mapper: (items: ReadonlyArray<ICommandBarItemOptions>) => ReadonlyArray<ICommandBarItemOptions>
+    ) => {
+      this[itemsPropertyKey] = mapper(this[itemsPropertyKey]);
+      transformItemsFunc(this[itemsPropertyKey]);
+    };
+
+    const mergeItemChanges = (item: ICommandBarItemOptions, changes: TypedChanges<ICommandBarItemOptions>) => {
+      const itemChangesOverrides = Object.entries(changes).reduce<Partial<ICommandBarItemOptions>>(
+        (acc, [propertyKey, change]) => ({
+          [propertyKey]: change.currentValue,
+        }),
+        {}
+      );
+
+      return Object.assign({}, item, itemChangesOverrides);
+    };
+
+    // Initial items
+    setItems(() => directive.items);
+
+    // Subscribe for existing items changes
+    this._subscriptions.push(
+      directive.onItemChanged.subscribe(({ key, changes }: CommandBarItemPropertiesChangedPayload) => {
+        setItems(items => items.map(item => (item.key === key ? mergeItemChanges(item, changes) : item)));
+        this.detectChanges();
+      })
+    );
+  }
+
   private _createTransformedItems(newItems: ReadonlyArray<ICommandBarItemOptions>) {
     this.transformedItems_ = newItems.map(item => this._transformCommandBarItemOptionsToProps(item));
   }

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

@@ -2,9 +2,20 @@ import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
+
 import { FabCommandBarComponent } from './command-bar.component';
+import { CommandBarItemDirective } from './directives/command-bar-item.directive';
+import { CommandBarItemsDirective } from './directives/command-bar-items.directive';
+import { CommandBarFarItemsDirective } from './directives/command-bar-far-items.directive';
+import { CommandBarOverflowItemsDirective } from './directives/command-bar-overflow-items.directive';
 
-const components = [FabCommandBarComponent];
+const components = [
+  FabCommandBarComponent,
+  CommandBarItemsDirective,
+  CommandBarFarItemsDirective,
+  CommandBarOverflowItemsDirective,
+  CommandBarItemDirective,
+];
 
 @NgModule({
   imports: [CommonModule],

libs/fabric/src/components/command-bar/directives/command-bar-far-items.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ContentChildren, QueryList } from '@angular/core';
+import { CommandBarItemDirective } from './command-bar-item.directive';
+import { CommandBarItemsDirectiveBase } from './command-bar-items-base.directive';
+import { ICommandBarItemOptions } from '../command-bar.component';
+
+@Directive({
+  selector: 'fab-command-bar > far-items',
+})
+export class CommandBarFarItemsDirective extends CommandBarItemsDirectiveBase {
+  @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
+}

libs/fabric/src/components/command-bar/directives/command-bar-item.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, Input, TemplateRef, ContentChild, Output, EventEmitter } from '@angular/core';
+
+import { OnChanges, TypedChanges } from '../../../types/angular/typed-changes';
+import { ICommandBarItemOptions } from '../command-bar.component';
+import { IContextualMenuItem } from 'office-ui-fabric-react';
+
+export interface CommandBarItemPropertiesChangedPayload {
+  readonly key: ICommandBarItemOptions['key'];
+  readonly changes: TypedChanges<ICommandBarItemOptions>;
+}
+
+@Directive({ selector: 'fab-command-bar-item' })
+export class CommandBarItemDirective implements ICommandBarItemOptions, OnChanges<CommandBarItemDirective> {
+  @ContentChild(TemplateRef) template: TemplateRef<any>;
+
+  @Input() key: ICommandBarItemOptions['key'];
+  @Input() text?: ICommandBarItemOptions['text'];
+  @Input() iconProps?: ICommandBarItemOptions['iconProps'];
+  @Input() disabled?: ICommandBarItemOptions['disabled'];
+  @Input() iconOnly?: ICommandBarItemOptions['iconOnly'];
+  @Input() subMenuProps?: ICommandBarItemOptions['subMenuProps'];
+
+  @Output() readonly onClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; item?: IContextualMenuItem }>();
+
+  @Output() readonly onItemChanged = new EventEmitter<CommandBarItemPropertiesChangedPayload>();
+
+  ngOnChanges(changes: TypedChanges<this>) {
+    this.onItemChanged.emit({
+      key: this.key,
+      changes: Object.assign<{}, TypedChanges<this>, Pick<TypedChanges<this>, 'onClick'>>(
+        {},
+        changes,
+        changes.onClick && {
+          onClick: {
+            ...changes.onClick,
+            isFirstChange: changes.onClick.isFirstChange,
+          },
+        }
+      ),
+    });
+  }
+}

libs/fabric/src/components/command-bar/directives/command-bar-items-base.directive.ts

@@ -0,0 +1,55 @@
+import {
+  Directive,
+  ContentChildren,
+  QueryList,
+  OnDestroy,
+  AfterContentInit,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { CommandBarItemDirective, CommandBarItemPropertiesChangedPayload } from './command-bar-item.directive';
+import { ICommandBarItemOptions } from '../command-bar.component';
+import { Subscription } from 'rxjs';
+
+export abstract class CommandBarItemsDirectiveBase implements AfterContentInit, OnDestroy {
+  private readonly _subscriptions: Subscription[] = [];
+
+  abstract readonly directiveItems: QueryList<CommandBarItemDirective>;
+
+  @Output() readonly onItemChanged = new EventEmitter<CommandBarItemPropertiesChangedPayload>();
+
+  get items() {
+    return (
+      this.directiveItems &&
+      this.directiveItems.map<ICommandBarItemOptions>(directiveItem => ({
+        key: directiveItem.key,
+        text: directiveItem.text,
+        iconProps: directiveItem.iconProps,
+        iconOnly: directiveItem.iconOnly,
+        disabled: directiveItem.disabled,
+        onClick: (ev, item) => {
+          directiveItem.onClick.emit({
+            ev: ev && ev.nativeEvent,
+            item: item,
+          });
+        },
+      }))
+    );
+  }
+
+  ngAfterContentInit() {
+    this._subscriptions.push(
+      ...this.directiveItems.map(directiveItem =>
+        directiveItem.onItemChanged.subscribe(changes => this.onItemChangedHandler(changes))
+      )
+    );
+  }
+
+  ngOnDestroy() {
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  private onItemChangedHandler(payload: CommandBarItemPropertiesChangedPayload) {
+    this.onItemChanged.emit(payload);
+  }
+}

libs/fabric/src/components/command-bar/directives/command-bar-items.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ContentChildren, QueryList } from '@angular/core';
+import { CommandBarItemDirective } from './command-bar-item.directive';
+import { ICommandBarItemOptions } from '../command-bar.component';
+import { CommandBarItemsDirectiveBase } from './command-bar-items-base.directive';
+
+@Directive({
+  selector: 'fab-command-bar > items',
+})
+export class CommandBarItemsDirective extends CommandBarItemsDirectiveBase {
+  @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
+}