allow fab-*-buttons to render menu items in a declarative syntax, similar to how command bar items allow it

Author: bengry

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

@@ -2,10 +2,31 @@
 // Licensed under the MIT License.
 
 import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
-import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnInit,
+  Output,
+  Renderer2,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+} from '@angular/core';
 import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { ContextualMenuItemDirective, IContextualMenuItemOptions } from '../contextual-menu/public-api';
+import { ChangeableItemsHelper } from '../core/shared/changeable-helper';
+import { IContextualMenuItem } from 'office-ui-fabric-react';
+import { Subscription } from 'rxjs';
+import { CommandBarItemChangedPayload } from '../command-bar/directives/command-bar-item.directives';
+import { mergeItemChanges } from '../core/declarative/item-changed';
+import { omit } from '../../utils/omit';
 
-export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
+export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps>
+  implements OnInit, AfterContentInit, OnDestroy {
   @Input() componentRef?: IButtonProps['componentRef'];
   @Input() href?: IButtonProps['href'];
   @Input() primary?: IButtonProps['primary'];
@@ -47,13 +68,18 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
   @Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
 
+  @ContentChildren(ContextualMenuItemDirective) readonly menuItemsDirectives?: QueryList<ContextualMenuItemDirective>;
+
   onRenderIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderText: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderDescription: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderAriaDescription: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderChildren: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
   onRenderMenuIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
 
+  private _changeableItemsHelper: ChangeableItemsHelper<IContextualMenuItem>;
+  private _subscriptions: Subscription[] = [];
+
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
     super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });
 
@@ -70,6 +96,50 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
     this.onRenderMenuIcon = this.createRenderPropHandler(this.renderMenuIcon);
   }
 
+  ngAfterContentInit() {
+    if (this.menuItemsDirectives && this.menuItemsDirectives.length > 0) {
+      const setItems = (directiveItems: ReadonlyArray<ContextualMenuItemDirective>) => {
+        const items = directiveItems.map(directive =>
+          this._transformContextualMenuItemOptionsToProps(this._directiveToContextualMenuItem(directive))
+        );
+        if (!this.menuProps) {
+          this.menuProps = { items: items };
+        } else {
+          this.menuProps.items = items;
+        }
+
+        this.markForCheck();
+      };
+
+      this._changeableItemsHelper = new ChangeableItemsHelper(this.menuItemsDirectives);
+      this._subscriptions.push(
+        this._changeableItemsHelper.onItemsChanged.subscribe((newItems: QueryList<ContextualMenuItemDirective>) => {
+          setItems(newItems.toArray());
+        }),
+        this._changeableItemsHelper.onChildItemChanged.subscribe(({ key, changes }: CommandBarItemChangedPayload) => {
+          const newItems = this.menuItemsDirectives.map(item =>
+            item.key === key ? mergeItemChanges(item, changes) : item
+          );
+          setItems(newItems);
+
+          this.markForCheck();
+        })
+      );
+
+      setItems(this.menuItemsDirectives.toArray());
+    }
+  }
+
+  ngOnDestroy() {
+    if (this._changeableItemsHelper) {
+      this._changeableItemsHelper.destroy();
+    }
+
+    if (this._subscriptions) {
+      this._subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+  }
+
   onMenuClickHandler(ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) {
     this.onMenuClick.emit({
       ev: ev && ev.nativeEvent,
@@ -80,4 +150,46 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   onClickHandler(ev?: React.MouseEvent) {
     this.onClick.emit(ev.nativeEvent);
   }
+
+  private _directiveToContextualMenuItem(directive: ContextualMenuItemDirective): IContextualMenuItemOptions {
+    return {
+      ...omit(
+        directive,
+        'menuItemsDirectives',
+        'renderDirective',
+        'renderIconDirective',
+        'click',
+        'onItemChanged',
+        'onItemsChanged',
+        'onChildItemChanged',
+        'ngOnInit',
+        'ngOnChanges',
+        'ngOnDestroy',
+        'ngAfterContentInit'
+      ),
+      onClick: (ev, item) => {
+        directive.click.emit({ ev: ev && ev.nativeEvent, item: item });
+      },
+    };
+  }
+
+  private _transformContextualMenuItemOptionsToProps(itemOptions: IContextualMenuItemOptions): IContextualMenuItem {
+    const sharedProperties = omit(itemOptions, 'renderIcon', 'render');
+
+    // Legacy render mode is used for the icon because otherwise the icon is to the right of the text (instead of the usual left)
+    const iconRenderer = this.createInputJsxRenderer(itemOptions.renderIcon, { legacyRenderMode: true });
+    const renderer = this.createInputJsxRenderer(itemOptions.render);
+
+    return Object.assign(
+      {},
+      sharedProperties,
+      iconRenderer && {
+        onRenderIcon: (item: IContextualMenuItem) => iconRenderer({ contextualMenuItem: item }),
+      },
+      renderer &&
+        ({
+          onRender: (item, dismissMenu) => renderer({ item, dismissMenu }),
+        } as Pick<IContextualMenuItem, 'onRender'>)
+    ) as IContextualMenuItem;
+  }
 }

libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts

@@ -13,7 +13,7 @@ import {
   ContentChild,
   TemplateRef,
 } from '@angular/core';
-import { IContextualMenuItem, IContextualMenuItemProps } from 'office-ui-fabric-react';
+import { IContextualMenuItem } from 'office-ui-fabric-react';
 import { KnownKeys, InputRendererOptions } from '@angular-react/core';
 
 import { OnChanges } from '../../../declarations/angular/typed-changes';
@@ -93,15 +93,15 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
 
   @Output()
   get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, IContextualMenuItem>> {
-    return this.changeableItemsHelper && this.changeableItemsHelper.onChildItemChanged;
+    return this._changeableItemsHelper && this._changeableItemsHelper.onChildItemChanged;
   }
 
   @Output()
   get onItemsChanged(): EventEmitter<QueryList<ChangeableItemDirective<IContextualMenuItem>>> {
-    return this.changeableItemsHelper && this.changeableItemsHelper.onItemsChanged;
+    return this._changeableItemsHelper && this._changeableItemsHelper.onItemsChanged;
   }
 
-  private changeableItemsHelper: ChangeableItemsHelper<IContextualMenuItem>;
+  private _changeableItemsHelper: ChangeableItemsHelper<IContextualMenuItem>;
 
   ngAfterContentInit() {
     if (this.renderDirective && this.renderDirective.templateRef) {
@@ -112,7 +112,7 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
       this.renderIcon = this.renderIconDirective.templateRef;
     }
 
-    this.changeableItemsHelper = new ChangeableItemsHelper(this.menuItemsDirectives, this, nonSelfDirective => {
+    this._changeableItemsHelper = new ChangeableItemsHelper(this.menuItemsDirectives, this, nonSelfDirective => {
       const items = nonSelfDirective.map(directive => this._directiveToContextualMenuItem(directive as any));
       if (!this.subMenuProps) {
         this.subMenuProps = { items: items };
@@ -123,7 +123,7 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
   }
 
   ngOnDestroy() {
-    this.changeableItemsHelper.destroy();
+    this._changeableItemsHelper.destroy();
   }
 
   private _directiveToContextualMenuItem(directive: ContextualMenuItemDirective): IContextualMenuItem {