Added ComboBox & Fabric Components

.vscode/settings.json

@@ -7,6 +7,7 @@
     "Renderable",
     "checkmark",
     "commandbar",
+    "dropdown",
     "keytip",
     "messagebar",
     "nrwl",

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

@@ -15,7 +15,7 @@
   </ol>
 </div>
 
-<div>
+<div style="height: 500vh">
   <fab-default-button [primary]="true" [split]="true" [menuProps]="menuProps" (onMenuClick)="onMenuClick($event)">Button Content</fab-default-button>
 
   <fab-action-button [iconProps]="{ iconName: 'AddFriend' }" text="Compound" [secondaryText]="'Loren ipsum dolor sit amet'"
@@ -99,4 +99,10 @@
 
   <fab-choice-group [options]="choiceGroupOptions" label="Pick one" [required]="true"></fab-choice-group>
 
+  <fab-fabric>
+    <fab-combo-box defaultSelectedKey="A" label="Default with dividers" ariaLabel="Basic ComboBox example" autoComplete="on"
+      [options]="testOptions">
+    </fab-combo-box>
+  </fab-fabric>
+
 </div>

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

@@ -5,6 +5,7 @@ import { ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
 import { DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { IChoiceGroupProps } from '../../../../node_modules/office-ui-fabric-react/lib/components/ChoiceGroup/ChoiceGroup.types';
+import { SelectableOptionMenuItemType } from '../../../../node_modules/office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
 
 @Component({
   selector: 'fab-panel-header',
@@ -172,6 +173,15 @@ export class AppComponent {
     }
   ];
 
+  testOptions = [
+    { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
+    { key: 'A', text: 'Arial Black' },
+    { key: 'B', text: 'Times New Roman' },
+    { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider },
+    { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header },
+    { key: 'D', text: 'Option d' },
+  ];
+
   toggleDialog() {
     this.dialogHidden = !this.dialogHidden;
   }

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

@@ -1,5 +1,5 @@
 import { AngularReactBrowserModule } from '@angular-react/core';
-import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabCheckboxModule, FabChoiceGroupModule, FabCommandBarModule, FabDialogModule, FabIconModule, FabImageModule, FabPanelModule } from '@angular-react/fabric';
+import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabCheckboxModule, FabChoiceGroupModule, FabComboBoxModule, FabCommandBarModule, FabDialogModule, FabFabricModule, FabIconModule, FabImageModule, FabPanelModule } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
@@ -9,6 +9,7 @@ import { AppComponent, PanelBodyComponent } from './app.component';
   imports: [
     AngularReactBrowserModule,
     NxModule.forRoot(),
+    FabFabricModule,
     FabIconModule,
     FabButtonModule,
     FabDialogModule,
@@ -19,6 +20,7 @@ import { AppComponent, PanelBodyComponent } from './app.component';
     FabCalloutModule,
     FabCheckboxModule,
     FabChoiceGroupModule,
+    FabComboBoxModule,
   ],
   declarations: [AppComponent, PanelBodyComponent],
   bootstrap: [AppComponent],

libs/fabric/public-api.ts

@@ -3,8 +3,10 @@ export * from './src/button/public-api';
 export * from './src/callout/public-api';
 export * from './src/checkbox/public-api';
 export * from './src/choice-group/public-api';
+export * from './src/combo-box/public-api';
 export * from './src/command-bar/public-api';
 export * from './src/dialog/public-api';
+export * from './src/fabric/public-api';
 export * from './src/icon/public-api';
 export * from './src/image/public-api';
 export * from './src/panel/public-api';

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

@@ -0,0 +1,76 @@
+// tslint:disable:component-selector
+// tslint:disable:no-input-rename
+// tslint:disable:no-output-rename
+// tslint:disable:use-host-property-decorator
+// tslint:disable:no-output-on-prefix
+
+import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
+import { ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/components/ComboBox';
+
+export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
+  @Input() componentRef?: IComboBoxProps['componentRef'];
+  @Input() options: IComboBoxProps['options'];
+  @Input() allowFreeform?: IComboBoxProps['allowFreeform'];
+  @Input() autoComplete?: IComboBoxProps['autoComplete'];
+  @Input() text?: IComboBoxProps['text'];
+  @Input() buttonIconProps?: IComboBoxProps['buttonIconProps'];
+  @Input() theme?: IComboBoxProps['theme'];
+  @Input() styles?: IComboBoxProps['styles'];
+  @Input() getClassNames?: IComboBoxProps['getClassNames'];
+  @Input() caretDownButtonStyles?: IComboBoxProps['caretDownButtonStyles'];
+  @Input() comboBoxOptionStyles?: IComboBoxProps['comboBoxOptionStyles'];
+  @Input() scrollSelectedToTop?: IComboBoxProps['scrollSelectedToTop'];
+  @Input() dropdownWidth?: IComboBoxProps['dropdownWidth'];
+  @Input() useComboBoxAsMenuWidth?: IComboBoxProps['useComboBoxAsMenuWidth'];
+  @Input() multiSelect?: IComboBoxProps['multiSelect'];
+  @Input() isButtonAriaHidden?: IComboBoxProps['isButtonAriaHidden'];
+  @Input() keytipProps?: IComboBoxProps['keytipProps'];
+  @Input() resolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
+
+  @Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
+
+  @Output() readonly onChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any }>();
+  @Output() readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string }>();
+  @Output() readonly onMenuOpen = new EventEmitter<void>();
+  @Output() readonly onMenuDismissed = new EventEmitter<void>();
+  @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
+
+  onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;
+
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+
+    // coming from React context - we need to bind to this so we can access the Angular Component properties
+    this.onChangedHandler = this.onChangedHandler.bind(this);
+    this.onPendingValueChangedHandler = this.onPendingValueChangedHandler.bind(this);
+    this.onScrollToItemHandler = this.onScrollToItemHandler.bind(this);
+  }
+
+  ngOnInit() {
+    this.onRenderLowerContent = this.createRenderPropHandler(this.renderLowerContent);
+  }
+
+  onChangedHandler(option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) {
+    this.onChanged.emit({
+      option,
+      index,
+      value,
+      submitPendingValueEvent,
+    });
+  }
+
+  onPendingValueChangedHandler(option?: IComboBoxOption, index?: number, value?: string) {
+    this.onPendingValueChanged.emit({
+      option,
+      index,
+      value,
+    });
+  }
+
+  onScrollToItemHandler(itemIndex: number) {
+    this.onScrollToItem.emit({
+      itemIndex
+    });
+  }
+}

libs/fabric/src/combo-box/combo-box.component.ts

@@ -0,0 +1,54 @@
+// tslint:disable:component-selector
+// tslint:disable:no-input-rename
+// tslint:disable:no-output-rename
+// tslint:disable:use-host-property-decorator
+// tslint:disable:no-output-on-prefix
+
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { FabBaseComboBoxComponent } from './base-combo-box.component';
+
+@Component({
+  selector: 'fab-combo-box',
+  exportAs: 'fabComboBox',
+  template: `
+    <ComboBox
+      #reactNode
+      [componentRef]="componentRef"
+      [options]="options"
+      [allowFreeform]="allowFreeform"
+      [autoComplete]="autoComplete"
+      [text]="text"
+      [buttonIconProps]="buttonIconProps"
+      [theme]="theme"
+      [styles]="styles"
+      [getClassNames]="getClassNames"
+      [caretDownButtonStyles]="caretDownButtonStyles"
+      [comboBoxOptionStyles]="comboBoxOptionStyles"
+      [scrollSelectedToTop]="scrollSelectedToTop"
+      [dropdownWidth]="dropdownWidth"
+      [useComboBoxAsMenuWidth]="useComboBoxAsMenuWidth"
+      [multiSelect]="multiSelect"
+      [isButtonAriaHidden]="isButtonAriaHidden"
+      [keytipProps]="keytipProps"
+      [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
+      [Changed]="onChangedHandler"
+      [PendingValueChanged]="onPendingValueChangedHandler"
+      [ResolveOptions]="resolveOptions"
+      [ScrollToItem]="onScrollToItemHandler"
+      (onMenuOpen)="onMenuOpen.emit()"
+      (onMenuDismissed)="onMenuDismissed.emit()">
+    </ComboBox>
+  `,
+  styles: [
+    'react-renderer',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'class': 'fab-combo-box' }
+})
+export class FabComboBoxComponent extends FabBaseComboBoxComponent {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+  }
+}

libs/fabric/src/combo-box/combo-box.module.ts

@@ -0,0 +1,27 @@
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComboBox, VirtualizedComboBox } from 'office-ui-fabric-react/lib/ComboBox';
+import { FabComboBoxComponent } from './combo-box.component';
+import { FabVirtualizedComboBoxComponent } from './virtualized-combo-box.component';
+
+const components = [
+  FabComboBoxComponent,
+  FabVirtualizedComboBoxComponent,
+];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class FabComboBoxModule {
+
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('ComboBox', () => ComboBox);
+    registerElement('VirtualizedComboBox', () => VirtualizedComboBox);
+  }
+
+}

libs/fabric/src/combo-box/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

libs/fabric/src/combo-box/public-api.ts

@@ -0,0 +1,2 @@
+export * from './combo-box.component';
+export * from './combo-box.module';

libs/fabric/src/combo-box/virtualized-combo-box.component.ts

@@ -0,0 +1,54 @@
+// tslint:disable:component-selector
+// tslint:disable:no-input-rename
+// tslint:disable:no-output-rename
+// tslint:disable:use-host-property-decorator
+// tslint:disable:no-output-on-prefix
+
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { FabBaseComboBoxComponent } from './base-combo-box.component';
+
+@Component({
+  selector: 'fab-virtualized-combo-box',
+  exportAs: 'fabVirtualizedComboBox',
+  template: `
+    <VirtualizedComboBox
+      #reactNode
+      [componentRef]="componentRef"
+      [options]="options"
+      [allowFreeform]="allowFreeform"
+      [autoComplete]="autoComplete"
+      [text]="text"
+      [buttonIconProps]="buttonIconProps"
+      [theme]="theme"
+      [styles]="styles"
+      [getClassNames]="getClassNames"
+      [caretDownButtonStyles]="caretDownButtonStyles"
+      [comboBoxOptionStyles]="comboBoxOptionStyles"
+      [scrollSelectedToTop]="scrollSelectedToTop"
+      [dropdownWidth]="dropdownWidth"
+      [useComboBoxAsMenuWidth]="useComboBoxAsMenuWidth"
+      [multiSelect]="multiSelect"
+      [isButtonAriaHidden]="isButtonAriaHidden"
+      [keytipProps]="keytipProps"
+      [RenderLowerContent]="renderLowerContent && onRenderLowerContent"
+      [Changed]="onChangedHandler"
+      [PendingValueChanged]="onPendingValueChangedHandler"
+      [ResolveOptions]="resolveOptions"
+      [ScrollToItem]="onScrollToItemHandler"
+      (onMenuOpen)="onMenuOpen.emit()"
+      (onMenuDismissed)="onMenuDismissed.emit()">
+    </VirtualizedComboBox>
+  `,
+  styles: [
+    'react-renderer',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'class': 'fab-combo-box fab-virtualized-combo-box' }
+})
+export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+  }
+}

libs/fabric/src/fabric/fabric.component.ts

@@ -0,0 +1,38 @@
+// tslint:disable:component-selector
+// tslint:disable:no-input-rename
+// tslint:disable:no-output-rename
+// tslint:disable:use-host-property-decorator
+// tslint:disable:no-output-on-prefix
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
+
+@Component({
+  selector: 'fab-fabric',
+  exportAs: 'fabFabric',
+  template: `
+    <Fabric
+      #reactNode
+      [componentRef]="componentRef"
+      [theme]="theme">
+      <ReactContent><ng-content></ng-content></ReactContent>
+    </Fabric>
+  `,
+  styles: [
+    'react-renderer',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'class': 'fab-fabric' }
+})
+export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: IFabricProps['componentRef'];
+  @Input() theme?: IFabricProps['theme'];
+
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+  }
+
+}

libs/fabric/src/fabric/fabric.module.ts

@@ -0,0 +1,24 @@
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { FabFabricComponent } from './fabric.component';
+
+const components = [
+  FabFabricComponent,
+];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class FabFabricModule {
+
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('Fabric', () => Fabric);
+  }
+
+}

libs/fabric/src/fabric/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

libs/fabric/src/fabric/public-api.ts

@@ -0,0 +1,2 @@
+export * from './fabric.component';
+export * from './fabric.module';

libs/fabric/src/image/image.module.ts

@@ -2,7 +2,6 @@ import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Image } from 'office-ui-fabric-react/lib/components/Image';
-import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { FabImageComponent } from './image.component';
 
 const components = [
@@ -19,7 +18,6 @@ export class FabImageModule {
 
   constructor() {
     // Add any React elements to the registry (used by the renderer).
-    registerElement('Fabric', () => Fabric);
     registerElement('Image', () => Image);
   }