add people picker (#132)

Author: krdeal

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

@@ -192,7 +192,7 @@ <h2>Getting up and running...</h2>
       weekNumberFormatString="Week number {0}"
     ></fab-calendar-strings>
   </fab-calendar>
-
+  
   <fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection">
     <fab-details-list
       [selection]="selection"
@@ -254,4 +254,6 @@ <h2>Getting up and running...</h2>
   <fab-default-button (onClick)="marqueeEnabled = !marqueeEnabled">
     Marquee {{ marqueeEnabled === false ? 'Disabled' : 'Enabled' }}
   </fab-default-button>
-</div>
+  <fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}"  [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker> 
+  <div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div> 
+ </div>

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

@@ -7,9 +7,12 @@ import {
   DropdownMenuItemType,
   IDropdownOption,
   ICheckboxProps,
+  IPersonaProps,
+  IPeoplePickerProps,
 } from 'office-ui-fabric-react';
 import { RenderPropOptions } from '@angular-react/core';
 import { FabDropdownComponent } from '@angular-react/fabric';
+import { FabPeoplePickerComponent } from '@angular-react/fabric/public-api';
 
 const suffix = ' cm';
 
@@ -44,6 +47,9 @@ export class AppComponent {
     console.log(args);
   }
 
+  peoplePickerSelectedItems: any[] = [{text:"Default person"}];
+  pickerSuggestions: IPersonaProps[] = [{text: "Bob Jones"},{text: "Steve Fred"}, {text: "Mary"}];
+
   selectedItem?: IDropdownOption;
   options: FabDropdownComponent['options'] = [
     { key: 'A', text: 'Option a' },
@@ -157,6 +163,15 @@ export class AppComponent {
     return String(value) + suffix;
   }
 
+  peoplePickerInputChanged(data: any){
+    const results = this.pickerSuggestions.filter(value => value.text.toLowerCase().indexOf(data.toLowerCase()) > -1);
+    return new Promise<IPersonaProps[]>((resolve, reject) => setTimeout(() => resolve(results), 250));
+  }
+
+  updatePeoplePickerSelectedItems(items){
+    this.peoplePickerSelectedItems = items.items;
+  }
+
   private _hasSuffix(value: string, suffix: string): Boolean {
     const subString = value.substr(value.length - suffix.length);
     return subString === suffix;
@@ -176,6 +191,7 @@ export class AppComponent {
     this.onValidate = this.onValidate.bind(this);
     this.onIncrement = this.onIncrement.bind(this);
     this.onDecrement = this.onDecrement.bind(this);
+    this.peoplePickerInputChanged = this.peoplePickerInputChanged.bind(this);
   }
 
   customItemCount = 1;

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

@@ -34,6 +34,8 @@ import {
   FabTooltipModule,
   FabSpinButtonModule,
   FabTextFieldModule,
+  FabPeoplePickerModule,
+  FabTagPickerModule,
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
@@ -79,6 +81,8 @@ import { CounterComponent } from './counter/counter.component';
     FabMarqueeSelectionModule,
     FabSpinButtonModule,
     FabTextFieldModule,
+    FabPeoplePickerModule,
+    FabTagPickerModule
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

libs/fabric/src/lib/components/pickers/people-picker/people-picker.component.ts

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    NgZone,
+    Renderer2,
+    ViewChild,
+    Output,
+    EventEmitter,
+  } from '@angular/core';
+  import { FabBasePickerComponent } from '../base-picker/base-picker.component';
+  import { IPersonaProps, IPeoplePickerProps, BaseAutoFill } from 'office-ui-fabric-react';
+  
+  @Component({
+    selector: 'fab-people-picker',
+    exportAs: 'fabPeoplePicker',
+    template: `
+      <PeoplePicker
+        #reactNode
+        [componentRef]="componentRef"
+        [resolveDelay]="resolveDelay"
+        [defaultSelectedItems]="defaultSelectedItems"
+        [getTextFromItem]="getTextFromItem"
+        [className]="className"
+        [pickerCalloutProps]="pickerCalloutProps"
+        [searchingText]="searchingText"
+        [disabled]="disabled"
+        [itemLimit]="itemLimit"
+        [createGenericItem]="createGenericItem"
+        [removeButtonAriaLabel]="removeButtonAriaLabel"
+        [selectedItems]="selectedItems"
+        [enableSelectedSuggestionAlert]="enableSelectedSuggestionAlert"
+        [inputProps]="inputProps"
+        [pickerSuggestionsProps]="pickerSuggestionsProps"
+        [ItemSelected]="onItemSelected"
+        [InputChange]="onInputChange"
+        [EmptyInputFocus]="onEmptyInputFocus"
+        [ResolveSuggestions]="onResolveSuggestions"
+        [GetMoreResults]="onGetMoreResults"
+        [ValidateInput]="onValidateInput"
+        [RenderItem]="renderItem && onRenderItem"
+        [RenderSuggestionsItem]="renderSuggestionsItem && onRenderSuggestionsItem"
+        [Change]="onChangeHandler"
+        [Focus]="onFocusHandler"
+        [Blur]="onBlurHandler"
+        [Dismiss]="onDismissHandler"
+        [RemoveSuggestion]="onRemoveSuggestionHandler"
+      >
+      </PeoplePicker>
+    `,
+    styles: ['react-renderer'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+  })
+  export class FabPeoplePickerComponent extends FabBasePickerComponent<IPersonaProps, IPeoplePickerProps> {
+    @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+    
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
+      super(elementRef, changeDetectorRef, renderer, ngZone);
+    }
+  }
+  

libs/fabric/src/lib/components/pickers/people-picker/people-picker.module.ts

@@ -0,0 +1,29 @@
+// 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 * as PeoplePickerItemCss from 'office-ui-fabric-react/lib-amd/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss';
+import { NormalPeoplePickerBase } from 'office-ui-fabric-react';
+import { noop } from '../../../utils/noop';
+import { FabBasePickerModule } from '../base-picker/base-picker.module';
+import { FabPeoplePickerComponent } from './people-picker.component';
+
+// Dummy action to force PeoplePickerItemCss to load and not be tree-shaken away.
+noop(PeoplePickerItemCss);
+
+const components = [FabPeoplePickerComponent];
+
+@NgModule({
+  imports: [CommonModule, FabBasePickerModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabPeoplePickerModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('PeoplePicker', () => NormalPeoplePickerBase as any);
+  }
+}

libs/fabric/src/lib/components/pickers/people-picker/public-api.ts

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

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

@@ -3,3 +3,4 @@
 
 export * from './base-picker/public-api';
 export * from './tag-picker/public-api';
+export * from './people-picker/public-api';

libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.component.ts

@@ -54,7 +54,7 @@ import { FabBasePickerComponent } from '../base-picker/base-picker.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPickerProps> {
-  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
 
   constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
     super(elementRef, changeDetectorRef, renderer, ngZone);

libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.module.ts

@@ -4,15 +4,10 @@
 import { registerElement } from '@angular-react/core';
 import { CommonModule } from '@angular/common';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as TagItemCss from 'office-ui-fabric-react/lib-amd/components/pickers/TagPicker/TagItem.scss';
 import { TagPicker } from 'office-ui-fabric-react';
-import { noop } from '../../../utils/noop';
 import { FabBasePickerModule } from '../base-picker/base-picker.module';
 import { FabTagPickerComponent } from './tag-picker.component';
 
-// Dummy action to force TagItemCss to load and not be tree-shaken away.
-noop(TagItemCss);
-
 const components = [FabTagPickerComponent];
 
 @NgModule({

libs/fabric/src/public-api.ts

@@ -37,6 +37,4 @@ export * from './lib/components/text-field/public-api';
 export * from './lib/components/toggle/public-api';
 export * from './lib/components/tooltip/public-api';
 export * from './lib/components/nav/public-api';
-
-// Pickers had some warnings at runtime. Leaving out of public API for now
-// export * from './lib/components/pickers/public-api';
+export * from './lib/components/pickers/public-api';