[Fabric] Add TextField and MaskedTextField components

.vscode/settings.json

@@ -16,6 +16,7 @@
     "messagebar",
     "nrwl",
     "renderprop",
+    "resizable",
     "scrollable",
     "stylenames",
     "submenu",

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

@@ -12,6 +12,10 @@ <h2>Getting up and running...</h2>
 <fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
 </fab-icon>
 
+<fab-text-field [(value)]="textFieldValue"></fab-text-field>
+
+<span>{{ textFieldValue }}</span>
+
 <div>
   <fab-pivot>
     <fab-pivot-item headerText="Tab 1"> <div>Tab 1's content</div> </fab-pivot-item>

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

@@ -21,6 +21,8 @@ export class AppComponent {
     console.log('onMouseOver', { ev });
   }
 
+  textFieldValue = 'Hello';
+
   marqueeEnabled: boolean;
   runDisabled: boolean;
   selection: ISelection;

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

@@ -31,6 +31,7 @@ import {
   FabSpinnerModule,
   FabToggleModule,
   FabTooltipModule,
+  FabTextFieldModule,
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
@@ -73,6 +74,7 @@ import { CounterComponent } from './counter/counter.component';
     FabDetailsListModule,
     FabGroupModule,
     FabMarqueeSelectionModule,
+    FabTextFieldModule,
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,97 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core';
+import {
+  ChangeDetectorRef,
+  EventEmitter,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
+
+export class FabBaseTextFieldComponent extends ReactWrapperComponent<ITextFieldProps> implements OnInit {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: ITextFieldProps['componentRef'];
+  @Input() multiline?: ITextFieldProps['multiline'];
+  @Input() resizable?: ITextFieldProps['resizable'];
+  @Input() autoAdjustHeight?: ITextFieldProps['autoAdjustHeight'];
+  @Input() underlined?: ITextFieldProps['underlined'];
+  @Input() borderless?: ITextFieldProps['borderless'];
+  @Input() label?: ITextFieldProps['label'];
+  @Input() description?: ITextFieldProps['description'];
+  @Input() prefix?: ITextFieldProps['prefix'];
+  @Input() suffix?: ITextFieldProps['suffix'];
+  @Input() iconProps?: ITextFieldProps['iconProps'];
+  @Input() defaultValue?: ITextFieldProps['defaultValue'];
+  @Input() value?: ITextFieldProps['value'];
+  @Input() disabled?: ITextFieldProps['disabled'];
+  @Input() readOnly?: ITextFieldProps['readOnly'];
+  @Input() errorMessage?: ITextFieldProps['errorMessage'];
+  @Input() deferredValidationTime?: ITextFieldProps['deferredValidationTime'];
+  @Input() className?: ITextFieldProps['className'];
+  @Input() inputClassName?: ITextFieldProps['inputClassName'];
+  @Input() ariaLabel?: ITextFieldProps['ariaLabel'];
+  @Input() validateOnFocusIn?: ITextFieldProps['validateOnFocusIn'];
+  @Input() validateOnFocusOut?: ITextFieldProps['validateOnFocusOut'];
+  @Input() validateOnLoad?: ITextFieldProps['validateOnLoad'];
+  @Input() theme?: ITextFieldProps['theme'];
+  @Input() styles?: ITextFieldProps['styles'];
+  @Input() autoComplete?: ITextFieldProps['autoComplete'];
+  @Input() mask?: ITextFieldProps['mask'];
+  @Input() maskChar?: ITextFieldProps['maskChar'];
+  @Input() maskFormat?: ITextFieldProps['maskFormat'];
+  @Input() getErrorMessage?: ITextFieldProps['onGetErrorMessage'];
+
+  @Input() renderLabel?: InputRendererOptions<ITextFieldProps>;
+  @Input() renderDescription?: InputRendererOptions<ITextFieldProps>;
+  @Input() renderPrefix?: InputRendererOptions<ITextFieldProps>;
+  @Input() renderSuffix?: InputRendererOptions<ITextFieldProps>;
+
+  @Output() readonly onChange = new EventEmitter<{ event: Event; newValue?: string }>();
+  @Output() readonly onBeforeChange = new EventEmitter<{ newValue: any }>();
+  @Output() readonly onNotifyValidationResult = new EventEmitter<{ errorMessage: string; value: string | undefined }>();
+
+  /* Non-React props, more native support for Angular */
+  // support for two-way data binding for `@Input() checked`.
+  @Output() readonly valueChange = new EventEmitter<string>();
+
+  onRenderLabel: (props?: ITextFieldProps, defaultRender?: JsxRenderFunc<ITextFieldProps>) => JSX.Element;
+  onRenderDescription: (props?: ITextFieldProps, defaultRender?: JsxRenderFunc<ITextFieldProps>) => JSX.Element;
+  onRenderPrefix: (props?: ITextFieldProps, defaultRender?: JsxRenderFunc<ITextFieldProps>) => JSX.Element;
+  onRenderSuffix: (props?: ITextFieldProps, defaultRender?: JsxRenderFunc<ITextFieldProps>) => JSX.Element;
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+
+    this.onChangeHandler = this.onChangeHandler.bind(this);
+    this.onBeforeChangeHandler = this.onBeforeChangeHandler.bind(this);
+    this.onNotifyValidationResultHandler = this.onNotifyValidationResultHandler.bind(this);
+  }
+
+  ngOnInit() {
+    this.onRenderLabel = this.createRenderPropHandler(this.renderLabel);
+    this.onRenderDescription = this.createRenderPropHandler(this.renderDescription);
+    this.onRenderPrefix = this.createRenderPropHandler(this.renderPrefix);
+    this.onRenderSuffix = this.createRenderPropHandler(this.renderSuffix);
+  }
+
+  onChangeHandler(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) {
+    this.onChange.emit({ event: event.nativeEvent, newValue });
+
+    this.valueChange.emit(newValue);
+  }
+
+  onBeforeChangeHandler(newValue: any) {
+    this.onBeforeChange.emit({ newValue });
+  }
+
+  onNotifyValidationResultHandler(errorMessage: string, value: string | undefined) {
+    this.onNotifyValidationResult.emit({ errorMessage, value });
+  }
+}

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

@@ -0,0 +1,62 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { FabBaseTextFieldComponent } from './base-text-field.component';
+
+@Component({
+  selector: 'fab-masked-text-field',
+  exportAs: 'fabMaskedTextField',
+  template: `
+    <MaskedTextField
+      #reactNode
+      [componentRef]="componentRef"
+      [multiline]="multiline"
+      [resizable]="resizable"
+      [autoAdjustHeight]="autoAdjustHeight"
+      [underlined]="underlined"
+      [borderless]="borderless"
+      [label]="label"
+      [description]="description"
+      [prefix]="prefix"
+      [suffix]="suffix"
+      [iconProps]="iconProps"
+      [defaultValue]="defaultValue"
+      [value]="value"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [errorMessage]="errorMessage"
+      [deferredValidationTime]="deferredValidationTime"
+      [className]="className"
+      [inputClassName]="inputClassName"
+      [ariaLabel]="ariaLabel"
+      [validateOnFocusIn]="validateOnFocusIn"
+      [validateOnFocusOut]="validateOnFocusOut"
+      [validateOnLoad]="validateOnLoad"
+      [theme]="theme"
+      [styles]="styles"
+      [autoComplete]="autoComplete"
+      [mask]="mask"
+      [maskChar]="maskChar"
+      [maskFormat]="maskFormat"
+      [GetErrorMessage]="getErrorMessage"
+      [RenderLabel]="renderLabel"
+      [RenderDescription]="renderDescription"
+      [RenderPrefix]="renderPrefix"
+      [RenderSuffix]="renderSuffix"
+      [Change]="onChangeHandler"
+      [BeforeChange]="onBeforeChangeHandler"
+      [NotifyValidationResult]="onNotifyValidationResultHandler"
+    >
+    </MaskedTextField>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabMaskedTextFieldComponent extends FabBaseTextFieldComponent {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

libs/fabric/src/lib/components/text-field/public-api.ts

@@ -0,0 +1,3 @@
+export * from './text-field.module';
+export * from './masked-text-field.component';
+export * from './text-field.component';

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

@@ -0,0 +1,62 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { FabBaseTextFieldComponent } from './base-text-field.component';
+
+@Component({
+  selector: 'fab-text-field',
+  exportAs: 'fabTextField',
+  template: `
+    <TextField
+      #reactNode
+      [componentRef]="componentRef"
+      [multiline]="multiline"
+      [resizable]="resizable"
+      [autoAdjustHeight]="autoAdjustHeight"
+      [underlined]="underlined"
+      [borderless]="borderless"
+      [label]="label"
+      [description]="description"
+      [prefix]="prefix"
+      [suffix]="suffix"
+      [iconProps]="iconProps"
+      [defaultValue]="defaultValue"
+      [value]="value"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [errorMessage]="errorMessage"
+      [deferredValidationTime]="deferredValidationTime"
+      [className]="className"
+      [inputClassName]="inputClassName"
+      [ariaLabel]="ariaLabel"
+      [validateOnFocusIn]="validateOnFocusIn"
+      [validateOnFocusOut]="validateOnFocusOut"
+      [validateOnLoad]="validateOnLoad"
+      [theme]="theme"
+      [styles]="styles"
+      [autoComplete]="autoComplete"
+      [mask]="mask"
+      [maskChar]="maskChar"
+      [maskFormat]="maskFormat"
+      [GetErrorMessage]="getErrorMessage"
+      [RenderLabel]="renderLabel"
+      [RenderDescription]="renderDescription"
+      [RenderPrefix]="renderPrefix"
+      [RenderSuffix]="renderSuffix"
+      [Change]="onChangeHandler"
+      [BeforeChange]="onBeforeChangeHandler"
+      [NotifyValidationResult]="onNotifyValidationResultHandler"
+    >
+    </TextField>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabTextFieldComponent extends FabBaseTextFieldComponent {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

libs/fabric/src/lib/components/text-field/text-field.module.ts

@@ -0,0 +1,25 @@
+// 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 { TextField, MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
+import { FabTextFieldComponent } from './text-field.component';
+import { FabMaskedTextFieldComponent } from './masked-text-field.component';
+
+const components = [FabTextFieldComponent, FabMaskedTextFieldComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabTextFieldModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('TextField', () => TextField);
+    registerElement('MaskedTextField', () => MaskedTextField);
+  }
+}

libs/fabric/src/public-api.ts

@@ -31,6 +31,7 @@ export * from './lib/components/search-box/public-api';
 export * from './lib/components/shimmer/public-api';
 export * from './lib/components/slider/public-api';
 export * from './lib/components/spinner/public-api';
+export * from './lib/components/text-field/public-api';
 export * from './lib/components/toggle/public-api';
 export * from './lib/components/tooltip/public-api';