[Fabric] Add Dropdown component (#63)

* [fabric] add dropdown component

.vscode/settings.json

@@ -1,10 +1,12 @@
 {
   "cSpell.words": [
     "Callout",
+    "Droppable",
     "Focusable",
     "Injectable",
     "Packagr",
     "Renderable",
+    "Reselect",
     "Selectable",
     "VDOM",
     "borderless",

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

@@ -9,6 +9,16 @@
   </ol>
 </div>
 
+<fab-dropdown
+  [label]="'test label'"
+  [selectedKey]="selectedItem && selectedItem.key"
+  [options]="options"
+  [placeholder]="'select one'"
+  (onChange)="logEvent('dropdown change', $event)"
+  (onFocus)="logEvent('dropdown focus', $event)"
+  (onBlur)="logEvent('dropdown blur', $event)"
+></fab-dropdown>
+
 <fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
 </fab-icon>
 

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

@@ -1,5 +1,13 @@
 import { ChangeDetectorRef, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ICalendarStrings, IContextualMenuProps, ISelection, Selection } from 'office-ui-fabric-react';
+import {
+  ICalendarStrings,
+  IContextualMenuProps,
+  ISelection,
+  Selection,
+  DropdownMenuItemType,
+  IDropdownOption,
+} from 'office-ui-fabric-react';
+import { FabDropdownComponent } from '@angular-react/fabric';
 
 const suffix = ' cm';
 
@@ -23,6 +31,22 @@ export class AppComponent {
     console.log('onMouseOver', { ev });
   }
 
+  logEvent(...args: any[]) {
+    console.log(args);
+  }
+
+  selectedItem?: IDropdownOption;
+  options: FabDropdownComponent['options'] = [
+    { key: 'A', text: 'Option a' },
+    { key: 'B', text: 'Option b' },
+    { key: 'C', text: 'Option c' },
+    { key: 'D', text: 'Option d' },
+    { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
+    { key: 'E', text: 'Option e' },
+    { key: 'F', text: 'Option f' },
+    { key: 'G', text: 'Option g' },
+  ];
+
   textFieldValue = 'Hello';
 
   marqueeEnabled: boolean;

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

@@ -13,6 +13,7 @@ import {
   FabDialogModule,
   FabDividerModule,
   FabFabricModule,
+  FabDropdownModule,
   FabGroupModule,
   FabGroupedListModule,
   FabHoverCardModule,
@@ -49,6 +50,7 @@ import { CounterComponent } from './counter/counter.component';
     FabButtonModule,
     FabDialogModule,
     FabImageModule,
+    FabDropdownModule,
     FabPanelModule,
     FabCommandBarModule,
     FabBreadcrumbModule,

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

@@ -0,0 +1,149 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Renderer2,
+  ViewChild,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { IDropdownProps, IDropdownOption, IDropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { ISelectableDroppableTextProps, ISelectableOption } from 'office-ui-fabric-react';
+
+@Component({
+  selector: 'fab-dropdown',
+  exportAs: 'fabDropdown',
+  template: `
+    <Dropdown
+      #reactNode
+      [componentRef]="componentRef"
+      [label]="label"
+      [ariaLabel]="ariaLabel"
+      [id]="id"
+      [className]="className"
+      [defaultSelectedKey]="defaultSelectedKey"
+      [selectedKey]="selectedKey"
+      [disabled]="disabled"
+      [required]="required"
+      [calloutProps]="calloutProps"
+      [panelProps]="panelProps"
+      [errorMessage]="errorMessage"
+      [placeholder]="placeholder"
+      [options]="options"
+      [dropdownWidth]="dropdownWidth"
+      [responsiveMode]="responsiveMode"
+      [multiSelect]="multiSelect"
+      [defaultSelectedKeys]="defaultSelectedKeys"
+      [selectedKeys]="selectedKeys"
+      [multiSelectDelimiter]="multiSelectDelimiter"
+      [notifyOnReselect]="notifyOnReselect"
+      [keytipProps]="keytipProps"
+      [theme]="theme"
+      [styles]="styles"
+      [RenderContainer]="renderContainer && onRenderContainer"
+      [RenderList]="renderList && onRenderList"
+      [RenderItem]="renderItem && onRenderItem"
+      [RenderOption]="renderOption && onRenderOption"
+      [RenderPlaceHolder]="renderPlaceHolder && onRenderPlaceHolder"
+      [RenderTitle]="renderTitle && onRenderTitle"
+      [RenderCaretDown]="renderCaretDown && onRenderCaretDown"
+      [Change]="onChangeHandler"
+      [Dismiss]="onDismissHandler"
+    ></Dropdown>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabDropdownComponent extends ReactWrapperComponent<IDropdownProps> implements OnInit {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: IDropdownProps['componentRef'];
+  @Input() label?: IDropdownProps['label'];
+  @Input() ariaLabel?: IDropdownProps['ariaLabel'];
+  @Input() id?: IDropdownProps['id'];
+  @Input() className?: IDropdownProps['className'];
+  @Input() defaultSelectedKey?: IDropdownProps['defaultSelectedKey'];
+  @Input() selectedKey?: IDropdownProps['selectedKey'];
+  @Input() disabled?: IDropdownProps['disabled'];
+  @Input() required?: IDropdownProps['required'];
+  @Input() calloutProps?: IDropdownProps['calloutProps'];
+  @Input() panelProps?: IDropdownProps['panelProps'];
+  @Input() errorMessage?: IDropdownProps['errorMessage'];
+
+  @Input() placeholder: IDropdownProps['placeholder'];
+  @Input() options: IDropdownProps['options'];
+  @Input() dropdownWidth?: IDropdownProps['dropdownWidth'];
+  @Input() responsiveMode?: IDropdownProps['responsiveMode'];
+  @Input() multiSelect?: IDropdownProps['multiSelect'];
+  @Input() defaultSelectedKeys?: IDropdownProps['defaultSelectedKeys'];
+  @Input() selectedKeys?: IDropdownProps['selectedKeys'];
+  @Input() multiSelectDelimiter?: IDropdownProps['multiSelectDelimiter'];
+  @Input() notifyOnReselect?: IDropdownProps['notifyOnReselect'];
+  @Input() keytipProps?: IDropdownProps['keytipProps'];
+  @Input() theme?: IDropdownProps['theme'];
+  @Input() styles?: IDropdownProps['styles'];
+
+  @Input() renderContainer?: InputRendererOptions<ISelectableDroppableTextProps<IDropdown>>;
+  @Input() renderList?: InputRendererOptions<ISelectableDroppableTextProps<IDropdown>>;
+  @Input() renderItem?: InputRendererOptions<ISelectableOption>;
+  @Input() renderOption?: InputRendererOptions<ISelectableOption>;
+  @Input() renderPlaceHolder?: InputRendererOptions<IDropdownProps>;
+  @Input() renderTitle?: InputRendererOptions<IDropdownOption | IDropdownOption[]>;
+  @Input() renderCaretDown?: InputRendererOptions<IDropdownProps>;
+
+  @Output() readonly onChange = new EventEmitter<{ event: Event; option?: IDropdownOption; index?: number }>();
+  @Output() readonly onDismiss = new EventEmitter<void>();
+
+  onRenderContainer: (
+    props?: ISelectableDroppableTextProps<IDropdown, IDropdown>,
+    defaultRender?: JsxRenderFunc<ISelectableDroppableTextProps<IDropdown, IDropdown>>
+  ) => JSX.Element;
+  onRenderList: (
+    props?: ISelectableDroppableTextProps<IDropdown, IDropdown>,
+    defaultRender?: JsxRenderFunc<ISelectableDroppableTextProps<IDropdown, IDropdown>>
+  ) => JSX.Element;
+  onRenderItem: (props?: ISelectableOption, defaultRender?: JsxRenderFunc<ISelectableOption>) => JSX.Element;
+  onRenderOption: (props?: ISelectableOption, defaultRender?: JsxRenderFunc<ISelectableOption>) => JSX.Element;
+  onRenderPlaceHolder: (props?: IDropdownProps, defaultRender?: JsxRenderFunc<IDropdownProps>) => JSX.Element;
+  onRenderTitle: (
+    props?: IDropdownOption | IDropdownOption[],
+    defaultRender?: JsxRenderFunc<IDropdownOption | IDropdownOption[]>
+  ) => JSX.Element;
+  onRenderCaretDown: (props?: IDropdownProps, defaultRender?: JsxRenderFunc<IDropdownProps>) => JSX.Element;
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
+
+    this.onChangeHandler = this.onChangeHandler.bind(this);
+    this.onDismissHandler = this.onDismissHandler.bind(this);
+  }
+
+  ngOnInit() {
+    this.onRenderContainer = this.createRenderPropHandler(this.renderContainer);
+    this.onRenderList = this.createRenderPropHandler(this.renderList);
+    this.onRenderItem = this.createRenderPropHandler(this.renderItem);
+    this.onRenderOption = this.createRenderPropHandler(this.renderOption);
+    this.onRenderPlaceHolder = this.createRenderPropHandler(this.renderPlaceHolder);
+    this.onRenderTitle = this.createRenderPropHandler(this.renderTitle);
+    this.onRenderCaretDown = this.createRenderPropHandler(this.renderCaretDown);
+  }
+
+  onChangeHandler(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) {
+    this.onChange.emit({
+      event: event && event.nativeEvent,
+      option,
+      index,
+    });
+  }
+
+  onDismissHandler() {
+    this.onDismiss.emit();
+  }
+}

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

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { FabDropdownComponent } from './dropdown.component';
+
+const components = [FabDropdownComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabDropdownModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('Dropdown', () => Dropdown);
+  }
+}

libs/fabric/src/lib/components/dropdown/public-api.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './dropdown.component';
+export * from './dropdown.module';

libs/fabric/src/lib/components/text-field/base-text-field.component.ts

@@ -67,7 +67,7 @@ export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldP
   onRenderSuffix: (props?: ITextFieldProps, defaultRender?: JsxRenderFunc<ITextFieldProps>) => JSX.Element;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
-    super(elementRef, changeDetectorRef, renderer);
+    super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });
 
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onBeforeChangeHandler = this.onBeforeChangeHandler.bind(this);

libs/fabric/src/public-api.ts

@@ -14,6 +14,7 @@ export * from './lib/components/date-picker/public-api';
 export * from './lib/components/details-list/public-api';
 export * from './lib/components/dialog/public-api';
 export * from './lib/components/divider/public-api';
+export * from './lib/components/dropdown/public-api';
 export * from './lib/components/fabric/public-api';
 export * from './lib/components/group/public-api';
 export * from './lib/components/grouped-list/public-api';