Add directive support for fab-dropdown (#104)

-Add directives to support i18n for fab-dropdown
-Add demo of new directive-supported fab-dropdown to app.component
-Minor cleanup of directives for fab-combo-box

Author: reshaw

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

@@ -19,6 +19,13 @@ <h2>Getting up and running...</h2>
   (onBlur)="logEvent('dropdown blur', $event)"
 ></fab-dropdown>
 
+<fab-dropdown contentStyle="width: 300px;" [placeholder]="'Select one'" [defaultSelectedKey]="'A'" (onChange)="logEvent('dropdown change', $event)">
+  <options>
+    <fab-dropdown-option optionKey="A" text="See option A"></fab-dropdown-option>
+    <fab-dropdown-option optionKey="B" text="See option B"></fab-dropdown-option>
+  </options>
+</fab-dropdown>
+
 <fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
 </fab-icon>
 

libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts

@@ -20,7 +20,6 @@ import { ComboBoxOptionsDirective } from './directives/combo-box-options.directi
 
 export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps>
   implements OnInit, AfterContentInit {
-  @ContentChild(ComboBoxOptionDirective) readonly optionsDirective?: ComboBoxOptionDirective;
 
   @Input() componentRef?: IComboBoxProps['componentRef'];
   @Input() options: IComboBoxProps['options'];

libs/fabric/src/lib/components/combo-box/directives/combo-box-option.directive.ts

@@ -14,7 +14,7 @@ export class ComboBoxOptionDirective {
   @Input() optionKey: IComboBoxOption['key'];
   @Input() text: IComboBoxOption['text'];
   @Input() title?: IComboBoxOption['title'];
-  @Input() itemType: IComboBoxOption['itemType'];
+  @Input() itemType?: IComboBoxOption['itemType'];
   @Input() index?: IComboBoxOption['index'];
   @Input() ariaLabel?: IComboBoxOption['ariaLabel'];
   @Input() selected?: IComboBoxOption['selected'];

libs/fabric/src/lib/components/combo-box/directives/combo-box-options.directive.ts

@@ -8,26 +8,16 @@ import { ComboBoxOptionDirective } from "./combo-box-option.directive";
 
 /**
  * Wrapper directive for creating multiple ComboBoxOptions
+ * Note that if you use this, it will override the imperative [options] binding.
  */
 @Directive({ selector: 'fab-combo-box > options' })
 export class ComboBoxOptionsDirective {
   @ContentChildren(ComboBoxOptionDirective) readonly directiveItems: QueryList<ComboBoxOptionDirective>;
 
   get items() {
-    return this.directiveItems.map<IComboBoxOption>(directiveItem => {
-      return {
-        key: directiveItem.optionKey,
-        text: directiveItem.text,
-        title: directiveItem.title,
-        itemType: directiveItem.itemType,
-        index: directiveItem.index,
-        ariaLabel: directiveItem.ariaLabel,
-        selected: directiveItem.selected,
-        disabled: directiveItem.disabled,
-        data: directiveItem.data,
-        styles: directiveItem.styles,
-        useAriaLabelAsText: directiveItem.useAriaLabelAsText
-      }
-    });
+    return this.directiveItems.map<IComboBoxOption>(({ optionKey, ...otherDirectiveProps }) => ({
+      key: optionKey,
+      ...otherDirectiveProps
+    }));
   }
 }

libs/fabric/src/lib/components/dropdown/directives/dropdown-option.directive.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { Directive, Input } from '@angular/core';
+import { IDropdownOption } from 'office-ui-fabric-react';
+
+/**
+ * Wrapper directive for creating a DropdownOption
+ * @paramName optionKey Binds to React 'key' property.
+ *                      Name change necessary because key is a reserved attribute in the wrapper component. 
+ */
+@Directive({ selector: 'fab-dropdown-option' })
+export class DropdownOptionDirective {
+  @Input() optionKey: IDropdownOption['key'];
+  @Input() text: IDropdownOption['text'];
+  @Input() title?: IDropdownOption['title'];
+  @Input() itemType?: IDropdownOption['itemType'];
+  @Input() index?: IDropdownOption['index'];
+  @Input() ariaLabel?: IDropdownOption['ariaLabel'];
+  @Input() selected?: IDropdownOption['selected'];
+  @Input() disabled?: IDropdownOption['disabled'];
+  @Input() data?: IDropdownOption['data'];
+}

libs/fabric/src/lib/components/dropdown/directives/dropdown-options.directive.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ContentChildren, Directive, QueryList } from '@angular/core';
+
+import { DropdownOptionDirective } from './dropdown-option.directive';
+import { IDropdownOption } from 'office-ui-fabric-react';
+
+/**
+ * Wrapper directive for creating multiple DropdownOptions
+ * Note that if you use this, it will override the imperative [options] binding.
+ */
+@Directive({ selector: 'fab-dropdown > options' })
+export class DropdownOptionsDirective {
+  @ContentChildren(DropdownOptionDirective) readonly directiveItems: QueryList<DropdownOptionDirective>;
+
+  get items() {
+    return this.directiveItems.map<IDropdownOption>(({ optionKey, ...otherDirectiveProps }) => ({
+      key: optionKey,
+      ...otherDirectiveProps
+    }));
+  }
+}

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

@@ -13,9 +13,12 @@ import {
   ViewChild,
   Output,
   EventEmitter,
+  ContentChild,
+  AfterContentInit,
 } from '@angular/core';
 import { IDropdownProps, IDropdownOption, IDropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { ISelectableDroppableTextProps, ISelectableOption } from 'office-ui-fabric-react';
+import { DropdownOptionsDirective } from './directives/dropdown-options.directive';
 
 @Component({
   selector: 'fab-dropdown',
@@ -61,8 +64,9 @@ import { ISelectableDroppableTextProps, ISelectableOption } from 'office-ui-fabr
   styles: ['react-renderer'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit {
+export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit, AfterContentInit {
   @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ContentChild(DropdownOptionsDirective) readonly dropdownOptionsDirective?: DropdownOptionsDirective;
 
   @Input() componentRef?: IDropdownProps['componentRef'];
   @Input() label?: IDropdownProps['label'];
@@ -135,6 +139,13 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
     this.onRenderCaretDown = this.createRenderPropHandler(this.renderCaretDown);
   }
 
+  ngAfterContentInit() {
+    if (this.dropdownOptionsDirective) {
+      this._initDirective(this.dropdownOptionsDirective);
+    }
+    super.ngAfterContentInit();
+  }
+
   onChangeHandler(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) {
     this.onChange.emit({
       event: event && event.nativeEvent,
@@ -146,4 +157,9 @@ export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps>
   onDismissHandler() {
     this.onDismiss.emit();
   }
+
+  private _initDirective(directive: DropdownOptionsDirective) {
+    this.options = directive.items;
+    this.markForCheck();
+  }
 }

libs/fabric/src/lib/components/dropdown/dropdown.module.ts

@@ -6,13 +6,19 @@ import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Dropdown } from 'office-ui-fabric-react';
 import { FabDropdownComponent } from './dropdown.component';
+import { DropdownOptionDirective } from './directives/dropdown-option.directive';
+import { DropdownOptionsDirective } from './directives/dropdown-options.directive';
 
-const components = [FabDropdownComponent];
+const declarations = [
+  FabDropdownComponent,
+  DropdownOptionDirective,
+  DropdownOptionsDirective
+];
 
 @NgModule({
   imports: [CommonModule],
-  declarations: components,
-  exports: components,
+  declarations: declarations,
+  exports: declarations,
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class FabDropdownModule {