feat: add time-picker component

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

@@ -59,6 +59,19 @@ choice group:
 data picker:
 <fab-date-picker></fab-date-picker>
 
+time picker:
+<fab-time-picker
+  [styles]="timePickerStyles"
+  [allowFreeform]="allowFreeform"
+  [useHour12]="useHour12"
+  (onChange)="handleTimePickerChange($event)"
+  (onItemClick)="handleTimePickerItemClick($event)"
+  (onInputValueChange)="handleTimePickerInputValueChange($event)"
+  (onMenuOpen)="handleTimePickerMenuOpen()"
+  (onMenuDismissed)="handleTimePickerMenuDismissed()"
+  (onMenuDismiss)="handleTimePickerMenuDismiss()"
+></fab-time-picker>
+
 divider:
 <fab-vertical-divider></fab-vertical-divider>
 
@@ -66,15 +79,15 @@ divider:
 dropdown:
 <fab-dropdown></fab-dropdown>
 
-<div>
+<!-- <div>
   combo-box:
   <fab-combo-box></fab-combo-box>
-</div>
+</div> -->
 
-<div>
+<!-- <div>
   callout:
   <button #calloutTarget (click)="handCalloutClicked()">{{ showCallout ? 'hide callout' : 'show callout' }}</button>
   <fab-callout *ngIf="showCallout" [target]="calloutTarget" (onDismiss)="showCallout = false">
     <div>I am a callout</div>
   </fab-callout>
-</div>
+</div> -->

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

@@ -85,6 +85,45 @@ export class AppComponent {
     { key: 'G', text: 'Option g' },
   ];
 
+  allowFreeform = true;
+  useHour12 = true;
+  timePickerStyles = {
+    optionsContainerWrapper: {
+      height: '500px',
+    },
+    root: {
+      width: '50%',
+    },
+  }
+
+  onFormatDate(date) {
+    console.log(date)
+  }
+
+  handleTimePickerChange($event) {
+    console.log($event);
+  }
+
+  handleTimePickerItemClick($event) {
+    console.log($event)
+  }
+
+  handleTimePickerInputValueChange(v) {
+    console.log(v);
+  }
+
+  handleTimePickerMenuOpen() {
+    console.log('handleTimePickerMenuOpen')
+  }
+
+  handleTimePickerMenuDismissed() {
+    console.log('handleTimePickerMenuDismissed')
+  }
+
+  handleTimePickerMenuDismiss() {
+    console.log('handleTimePickerMenuDismiss')
+  }
+
   // tslint:disable-next-line: member-ordering
   textFieldValue = 'Hello';
 

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

@@ -41,6 +41,7 @@ import { FabTextFieldModule } from '@angular-react/fabric/lib/components/text-fi
 import { FabPeoplePickerModule, FabTagPickerModule } from '@angular-react/fabric/lib/components/pickers';
 import { FabProgressIndicatorModule } from '@angular-react/fabric/lib/components/progress-indicator';
 import { FabRatingModule } from '@angular-react/fabric/lib/components/rating';
+import { FabTimePickerModule } from '@angular-react/fabric/lib/components/time-picker';
 
 @NgModule({
   imports: [
@@ -83,7 +84,8 @@ import { FabRatingModule } from '@angular-react/fabric/lib/components/rating';
     FabPeoplePickerModule,
     FabTagPickerModule,
     FabProgressIndicatorModule,
-    FabRatingModule
+    FabRatingModule,
+    FabTimePickerModule
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

libs/fabric/lib/components/time-picker/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

libs/fabric/lib/components/time-picker/public-api.ts

@@ -0,0 +1,2 @@
+export * from './time-picker.component';
+export * from './time-picker.module';

libs/fabric/lib/components/time-picker/time-picker.component.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import type { ITimePickerProps } from '@fluentui/react/lib/TimePicker';
+import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
+import type { IComboBox, IComboBoxOption } from '@fluentui/react/lib/components/ComboBox';
+import { formatTimeString } from '@fluentui/date-time-utilities';
+
+@AngularReact()
+@Styled('FabTimePickerComponent')
+@Component({
+  selector: 'fab-time-picker',
+  exportAs: 'fabTimePicker',
+  template: `
+    <TimePicker
+      #reactNode
+      [componentRef]="componentRef"
+      [theme]="theme"
+      [styles]="styles"
+      [label]="label"
+      [increments]="increments"
+      [showSeconds]="showSeconds"
+      [useHour12]="useHour12"
+      [allowFreeform]="allowFreeform"
+      [autoComplete]="autoComplete"
+      [timeRange]="timeRange"
+      [strings]="strings"
+      [defaultValue]="defaultValue"
+      [useComboBoxAsMenuWidth]="useComboBoxAsMenuWidth"
+      [FormatDate]="onFormatDate"
+      [ValidateUserInput]="onValidateUserInput"
+      [Change]="handleChange"
+      [ItemClick]="handleItemClick"
+      [InputValueChange]="handleInputValueChange"
+      [MenuOpen]="handleMenuOpen"
+      [MenuDismissed]="handleMenuDismissed"
+      [MenuDismiss]="handleMenuDismiss"
+    >
+    </TimePicker>
+  `
+})
+export class FabTimePickerComponent extends ReactWrapperComponent<ITimePickerProps> {
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+  @Input() componentRef?: ITimePickerProps['componentRef'];
+  @Input() theme?: ITimePickerProps['theme'];
+  @Input() styles?: ITimePickerProps['styles'];
+  @Input() label?: ITimePickerProps['label'];
+  @Input() increments?: ITimePickerProps['increments'];
+  @Input() showSeconds?: ITimePickerProps['showSeconds'];
+  @Input() useHour12?: ITimePickerProps['useHour12'];
+  @Input() allowFreeform?: ITimePickerProps['allowFreeform'];
+  @Input() autoComplete?: ITimePickerProps['autoComplete'];
+  @Input() timeRange?: ITimePickerProps['timeRange'];
+  @Input() strings?: ITimePickerProps['strings'];
+  @Input() defaultValue?: ITimePickerProps['defaultValue'];
+  @Input() useComboBoxAsMenuWidth?: ITimePickerProps['useComboBoxAsMenuWidth'] = true;
+  @Input() onFormatDate?: ITimePickerProps['onFormatDate']
+  @Input() onValidateUserInput?: ITimePickerProps['onValidateUserInput']
+
+  @Output() readonly onChange = new EventEmitter<{event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string}>();
+  @Output() readonly onItemClick = new EventEmitter<{event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number}>();
+  @Output() readonly onInputValueChange = new EventEmitter<string>();
+  @Output() readonly onMenuOpen = new EventEmitter();
+  @Output() readonly onMenuDismissed = new EventEmitter();
+  @Output() readonly onMenuDismiss = new EventEmitter();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+
+  handleChange = (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => {
+    this.onChange.emit({ event, option, index, value })
+  }
+
+  handleItemClick = (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number) => {
+    this.onItemClick.emit({ event, option, index });
+  }
+
+  handleInputValueChange = (text: string) => {
+    this.onInputValueChange.emit(text);
+  }
+
+  handleMenuOpen = () => {
+    this.onMenuOpen.emit();
+  }
+
+  handleMenuDismissed = () => {
+    this.onMenuDismissed.emit();
+  }
+
+  handleMenuDismiss = () => {
+    this.onMenuDismiss.emit();
+  }
+}

libs/fabric/lib/components/time-picker/time-picker.module.ts

@@ -0,0 +1,28 @@
+// 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 { TimePicker } from '@fluentui/react/lib/TimePicker';
+// import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
+// import { noop } from '@angular-react/fabric/lib/utils';
+import { FabTimePickerComponent } from './time-picker.component';
+
+// Dummy action to force CalendarCss to load and not be tree-shaken away.
+// noop(CalendarCss);
+
+const components = [FabTimePickerComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabTimePickerModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('TimePicker', () => TimePicker);
+  }
+}

libs/fabric/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-react/fabric",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Use Fabric React components inside Angular",
   "author": {
     "name": "Ben Feely",