CommandBar - declarative syntax. WIP 3

Author: Ben Grynhaus

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4001",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

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

@@ -21,13 +21,28 @@ <h2>Getting up and running...</h2>
       <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' }" (click)="onNewClicked()"></fab-command-bar-item>
       <fab-command-bar-item key="save" text="Save" [iconProps]="{ iconName: 'Save' }" [subMenuProps]="saveSubMenuProps">
+        <contextual-menu-item *ngIf="runDisabled" key="sometimesVisible" text="woosh"></contextual-menu-item>
         <contextual-menu-item key="save" text="Save"></contextual-menu-item>
         <contextual-menu-item key="save-as" text="Save As" (click)="onSaveAsClicked()">
           <contextual-menu-item key="save-as-1" text="Save As 1" (click)="onSaveAsFirstClicked()"></contextual-menu-item>
           <contextual-menu-item key="save-as-2" text="Save As 2" (click)="onSaveAsSecondClicked()"></contextual-menu-item>
         </contextual-menu-item>
       </fab-command-bar-item>
       <fab-command-bar-item key="copy" text="Copy" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
+      <fab-command-bar-item key="custom" text="custom text" (click)="onCopyClicked()">
+        <!--  <render>
+          <ng-template let-item="item">
+            <div>Custom render</div>
+          </ng-template>
+        </render> -->
+
+        <render-icon>
+          <ng-template let-contextualMenuItemProps="contextualMenuItemProps">
+            <div>custom icon</div>
+          </ng-template>
+        </render-icon>
+      </fab-command-bar-item>
+      <fab-command-bar-item *ngIf="runDisabled" key="sometimesVisible" text="woosh"></fab-command-bar-item>
     </items>
 
     <far-items>

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

@@ -63,6 +63,16 @@ export class AppComponent {
     console.log('Save as 2 clicked');
   }
 
+  onCustomItemClick(item: any) {
+    this.customItemCount++;
+    console.log('custom item clicked', item);
+    this.cd.detectChanges();
+  }
+
+  constructor(private readonly cd: ChangeDetectorRef) {}
+
+  customItemCount = 1;
+
   // FIXME: Allow declarative syntax too
   saveSubMenuProps: Partial<IContextualMenuProps> = {
     gapSpace: 10,

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

@@ -12,20 +12,22 @@ import {
   ContentChild,
   AfterContentInit,
   OnDestroy,
+  QueryList,
 } from '@angular/core';
+import { Subscription } from 'rxjs';
 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,
-  CommandBarItemChangedPayload,
-} from '@angular-react/fabric/src/components/command-bar/directives/command-bar-item.directive';
-import { Subscription } from 'rxjs';
+  CommandBarItemsDirective,
+  CommandBarFarItemsDirective,
+  CommandBarOverflowItemsDirective,
+  CommandBarItemsDirectiveBase,
+} from './directives/command-bar-items.directives';
+import { CommandBarItemChangedPayload, CommandBarItemDirective } from './directives/command-bar-item.directives';
+import { ItemChanges, mergeItemChanges } from '../core/declarative/item-changed';
 
 @Component({
   selector: 'fab-command-bar',
@@ -151,20 +153,16 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
       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 to adding/removing items
+    this._subscriptions.push(
+      directive.onItemsChanged.subscribe((newItems: QueryList<CommandBarItemDirective>) => {
+        setItems(() => newItems.map<ICommandBarItemOptions>(directive => directive));
+      })
+    );
+
     // Subscribe for existing items changes
     this._subscriptions.push(
       directive.onItemChanged.subscribe(({ key, changes }: CommandBarItemChangedPayload) => {

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

@@ -4,10 +4,16 @@ 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';
+import {
+  CommandBarItemDirective,
+  CommandBarItemRenderIconDirective,
+  CommandBarItemRenderDirective,
+} from './directives/command-bar-item.directives';
+import {
+  CommandBarFarItemsDirective,
+  CommandBarItemsDirective,
+  CommandBarOverflowItemsDirective,
+} from './directives/command-bar-items.directives';
 import { FabContextualMenuModule } from '../contextual-menu/contextual-menu.module';
 
 const components = [
@@ -16,6 +22,8 @@ const components = [
   CommandBarFarItemsDirective,
   CommandBarOverflowItemsDirective,
   CommandBarItemDirective,
+  CommandBarItemRenderDirective,
+  CommandBarItemRenderIconDirective,
 ];
 
 @NgModule({

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

@@ -0,0 +1,68 @@
+import {
+  Directive,
+  Input,
+  TemplateRef,
+  Output,
+  EventEmitter,
+  ContentChildren,
+  ContentChild,
+  QueryList,
+  AfterContentInit,
+  ViewChild,
+  OnDestroy,
+} from '@angular/core';
+import { OnChanges, TypedChanges } from '../../../types/angular/typed-changes';
+import {
+  ICommandBarItemOptions,
+  ICommandBarItemOptionsRenderContext,
+  ICommandBarItemOptionsRenderIconContext,
+} from '../command-bar.component';
+import { IContextualMenuItem, ICommandBarItemProps } from 'office-ui-fabric-react';
+import { ContextualMenuItemDirective } from '../../contextual-menu';
+import { ItemChangedPayload } from '../../core/declarative/item-changed.payload';
+import { Subscription } from 'rxjs';
+
+export type CommandBarItemChangedPayload = ItemChangedPayload<ICommandBarItemOptions['key'], ICommandBarItemOptions>;
+
+/**
+ * Wrapper directive to allow rendering a custom item to a CommandBarItem.
+ */
+@Directive({ selector: 'fab-command-bar-item > render' })
+export class CommandBarItemRenderDirective {
+  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
+}
+
+/**
+ * Wrapper directive to allow rendering a custom icon to a CommandBarItem.
+ */
+@Directive({ selector: 'fab-command-bar-item > render-icon' })
+export class CommandBarItemRenderIconDirective {
+  @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
+}
+
+@Directive({ selector: 'fab-command-bar-item' })
+export class CommandBarItemDirective extends ContextualMenuItemDirective
+  implements ICommandBarItemOptions, AfterContentInit {
+  @ContentChild(CommandBarItemRenderDirective) readonly renderDirective: CommandBarItemRenderDirective;
+  @ContentChild(CommandBarItemRenderIconDirective) readonly renderIconDirective: CommandBarItemRenderIconDirective;
+
+  // ICommandBarItemOptions implementation
+  @Input() iconOnly?: ICommandBarItemOptions['iconOnly'];
+  @Input() buttonStyles?: ICommandBarItemOptions['buttonStyles'];
+  @Input() cacheKey?: ICommandBarItemOptions['cacheKey'];
+  @Input() renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
+  @Input() render: ICommandBarItemOptions['render'];
+  @Input() renderIcon: ICommandBarItemOptions['renderIcon'];
+
+  ngAfterContentInit() {
+    super.ngAfterContentInit();
+
+    if (this.renderDirective && this.renderDirective.templateRef) {
+      this.render = this.renderDirective.templateRef;
+    }
+
+    if (this.renderIconDirective && this.renderIconDirective.templateRef) {
+      this.renderIcon = this.renderIconDirective.templateRef;
+    }
+  }
+}

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

@@ -7,16 +7,17 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
-import { CommandBarItemDirective, CommandBarItemChangedPayload } from './command-bar-item.directive';
 import { ICommandBarItemOptions } from '../command-bar.component';
 import { Subscription } from 'rxjs';
+import { CommandBarItemDirective, CommandBarItemChangedPayload } from './command-bar-item.directives';
 
 export abstract class CommandBarItemsDirectiveBase implements AfterContentInit, OnDestroy {
   private readonly _subscriptions: Subscription[] = [];
 
   abstract readonly directiveItems: QueryList<CommandBarItemDirective>;
 
   @Output() readonly onItemChanged = new EventEmitter<CommandBarItemChangedPayload>();
+  @Output() readonly onItemsChanged = new EventEmitter<QueryList<CommandBarItemDirective>>();
 
   get items() {
     return (
@@ -40,6 +41,12 @@ export abstract class CommandBarItemsDirectiveBase implements AfterContentInit,
         directiveItem.onItemChanged.subscribe(changes => this.onItemChangedHandler(changes))
       )
     );
+
+    this._subscriptions.push(
+      this.directiveItems.changes.subscribe((newValue: this['directiveItems']) => {
+        this.onItemsChanged.emit(newValue);
+      })
+    );
   }
 
   ngOnDestroy() {
@@ -50,3 +57,18 @@ export abstract class CommandBarItemsDirectiveBase implements AfterContentInit,
     this.onItemChanged.emit(payload);
   }
 }
+
+@Directive({ selector: 'fab-command-bar > items' })
+export class CommandBarItemsDirective extends CommandBarItemsDirectiveBase {
+  @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
+}
+
+@Directive({ selector: 'fab-command-bar > far-items' })
+export class CommandBarFarItemsDirective extends CommandBarItemsDirectiveBase {
+  @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
+}
+
+@Directive({ selector: 'fab-command-bar > overflow-items' })
+export class CommandBarOverflowItemsDirective extends CommandBarItemsDirectiveBase {
+  @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
+}