[fabric] add example for spin button component

Author: bengry

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

@@ -12,6 +12,14 @@ <h2>Getting up and running...</h2>
 <fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
 </fab-icon>
 
+<fab-spin-button
+  label="my label"
+  [value]="7 + ' cm'"
+  [validate]="onValidate"
+  [increment]="onIncrement"
+  [decrement]="onDecrement"
+></fab-spin-button>
+
 <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

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ICalendarStrings, IContextualMenuProps, ISelection, Selection } from 'office-ui-fabric-react';
 
+const suffix = ' cm';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,6 +15,8 @@ export class AppComponent {
     dismissMenu: (ev?: any, dismissAll?: boolean) => void;
   }>;
 
+  textFieldValue = 'Hello';
+
   onClickEventHandler(ev) {
     console.log('onClick', { ev });
   }
@@ -92,8 +96,53 @@ export class AppComponent {
     console.log('Column header clicked', event);
   }
 
+  onIncrement(value: string): string | void {
+    value = this._removeSuffix(value, suffix);
+
+    if (+value >= 13) {
+      return value + suffix;
+    }
+
+    return String(+value + 2) + suffix;
+  }
+
+  onDecrement(value: string): string | void {
+    value = this._removeSuffix(value, suffix);
+
+    if (+value <= 3) {
+      return value + suffix;
+    }
+    return String(+value - 2) + suffix;
+  }
+
+  onValidate(value: string, event: Event): string | void {
+    value = this._removeSuffix(value, suffix);
+    if (value.trim().length === 0 || isNaN(+value)) {
+      return '0' + suffix;
+    }
+
+    return String(value) + suffix;
+  }
+
+  private _hasSuffix(value: string, suffix: string): Boolean {
+    const subString = value.substr(value.length - suffix.length);
+    return subString === suffix;
+  }
+
+  private _removeSuffix(value: string, suffix: string): string {
+    if (!this._hasSuffix(value, suffix)) {
+      return value;
+    }
+
+    return value.substr(0, value.length - suffix.length);
+  }
+
   constructor(private readonly cd: ChangeDetectorRef) {
     this.selection = new Selection();
+
+    this.onValidate = this.onValidate.bind(this);
+    this.onIncrement = this.onIncrement.bind(this);
+    this.onDecrement = this.onDecrement.bind(this);
   }
 
   customItemCount = 1;

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

@@ -31,6 +31,7 @@ import {
   FabSpinnerModule,
   FabToggleModule,
   FabTooltipModule,
+  FabSpinButtonModule,
 } 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,
+    FabSpinButtonModule,
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],