[Fabric] Add SpinButton component

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

@@ -16,6 +16,14 @@ <h2>Getting up and running...</h2>
 
 <span>{{ textFieldValue }}</span>
 
+<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',
@@ -94,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,
   FabTextFieldModule,
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
@@ -74,6 +75,7 @@ import { CounterComponent } from './counter/counter.component';
     FabDetailsListModule,
     FabGroupModule,
     FabMarqueeSelectionModule,
+    FabSpinButtonModule,
     FabTextFieldModule,
   ],
   declarations: [AppComponent, CounterComponent],

libs/fabric/src/lib/components/spin-button/public-api.ts

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

libs/fabric/src/lib/components/spin-button/spin-button.component.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+  EventEmitter,
+  Output,
+  OnInit,
+} from '@angular/core';
+import { ISpinButtonProps } from 'office-ui-fabric-react/lib/SpinButton';
+
+@Component({
+  selector: 'fab-spin-button',
+  exportAs: 'fabSpinButton',
+  template: `
+    <SpinButton
+      #reactNode
+      [componentRef]="componentRef"
+      [defaultValue]="defaultValue"
+      [value]="value"
+      [min]="min"
+      [max]="max"
+      [step]="step"
+      [ariaLabel]="ariaLabel"
+      [title]="title"
+      [disabled]="disabled"
+      [className]="className"
+      [label]="label"
+      [labelPosition]="labelPosition"
+      [iconProps]="iconProps"
+      [incrementButtonIcon]="incrementButtonIcon"
+      [decrementButtonIcon]="decrementButtonIcon"
+      [styles]="styles"
+      [getClassNames]="getClassNames"
+      [upArrowButtonStyles]="upArrowButtonStyles"
+      [downArrowButtonStyles]="downArrowButtonStyles"
+      [theme]="theme"
+      [incrementButtonAriaLabel]="incrementButtonAriaLabel"
+      [decrementButtonAriaLabel]="decrementButtonAriaLabel"
+      [precision]="precision"
+      [ariaPositionInSet]="ariaPositionInSet"
+      [ariaSetSize]="ariaSetSize"
+      [ariaValueNow]="ariaValueNow"
+      [ariaValueText]="ariaValueText"
+      [keytipProps]="keytipProps"
+      [Validate]="validate"
+      [Increment]="increment"
+      [Decrement]="decrement"
+      (onFocus)="onFocus.emit($event)"
+      (onBlur)="onBlur.emit($event)"
+    >
+    </SpinButton>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabSpinButtonComponent extends ReactWrapperComponent<ISpinButtonProps> {
+  @ViewChild('reactNode') protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: ISpinButtonProps['componentRef'];
+  @Input() defaultValue?: ISpinButtonProps['defaultValue'];
+  @Input() value?: ISpinButtonProps['value'];
+  @Input() min?: ISpinButtonProps['min'];
+  @Input() max?: ISpinButtonProps['max'];
+  @Input() step?: ISpinButtonProps['step'];
+  @Input() ariaLabel?: ISpinButtonProps['ariaLabel'];
+  @Input() title?: ISpinButtonProps['title'];
+  @Input() disabled?: ISpinButtonProps['disabled'];
+  @Input() className?: ISpinButtonProps['className'];
+  @Input() label: ISpinButtonProps['label'];
+  @Input() labelPosition?: ISpinButtonProps['labelPosition'];
+  @Input() iconProps?: ISpinButtonProps['iconProps'];
+  @Input() incrementButtonIcon?: ISpinButtonProps['incrementButtonIcon'];
+  @Input() decrementButtonIcon?: ISpinButtonProps['decrementButtonIcon'];
+  @Input() styles?: ISpinButtonProps['styles'];
+  @Input() getClassNames?: ISpinButtonProps['getClassNames'];
+  @Input() upArrowButtonStyles?: ISpinButtonProps['upArrowButtonStyles'];
+  @Input() downArrowButtonStyles?: ISpinButtonProps['downArrowButtonStyles'];
+  @Input() theme?: ISpinButtonProps['theme'];
+  @Input() incrementButtonAriaLabel?: ISpinButtonProps['incrementButtonAriaLabel'];
+  @Input() decrementButtonAriaLabel?: ISpinButtonProps['decrementButtonAriaLabel'];
+  @Input() precision?: ISpinButtonProps['precision'];
+  @Input() ariaPositionInSet?: ISpinButtonProps['ariaPositionInSet'];
+  @Input() ariaSetSize?: ISpinButtonProps['ariaSetSize'];
+  @Input() ariaValueNow?: ISpinButtonProps['ariaValueNow'];
+  @Input() ariaValueText?: ISpinButtonProps['ariaValueText'];
+  @Input() keytipProps?: ISpinButtonProps['keytipProps'];
+
+  @Input() validate?: ISpinButtonProps['onValidate'];
+  @Input() increment?: ISpinButtonProps['onIncrement'];
+  @Input() decrement?: ISpinButtonProps['onDecrement'];
+
+  @Output() readonly onFocus = new EventEmitter<Event>();
+  @Output() readonly onBlur = new EventEmitter<Event>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

libs/fabric/src/lib/components/spin-button/spin-button.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 { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
+import { FabSpinButtonComponent } from './spin-button.component';
+
+const components = [FabSpinButtonComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabSpinButtonModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('SpinButton', () => SpinButton);
+  }
+}

libs/fabric/src/public-api.ts

@@ -30,6 +30,7 @@ export * from './lib/components/pivot/public-api';
 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/spin-button/public-api';
 export * from './lib/components/spinner/public-api';
 export * from './lib/components/text-field/public-api';
 export * from './lib/components/toggle/public-api';