fix: Timepicker — am/pm clipboard insertion fails

positive-js · May 17, 2019 · 4900c9b · 4900c9b
1 parent 43ac4ab
commit 4900c9b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/packages/mosaic/timepicker/timepicker.module.ts b/packages/mosaic/timepicker/timepicker.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { A11yModule } from '@ptsecurity/cdk/a11y';
 import { PlatformModule } from '@ptsecurity/cdk/platform';
+import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter/adapter';
 
 import { McTimepicker } from './timepicker';
 
@@ -13,7 +14,8 @@ import { McTimepicker } from './timepicker';
         CommonModule,
         A11yModule,
         PlatformModule,
-        FormsModule
+        FormsModule,
+        McMomentDateModule
     ],
     declarations: [
         McTimepicker

diff --git a/packages/mosaic/timepicker/timepicker.spec.ts b/packages/mosaic/timepicker/timepicker.spec.ts
@@ -293,6 +293,27 @@ describe('McTimepicker', () => {
                     expect(testComponent.timeValue.toString()).toContain('19:01:08');
                 });
         });
+
+        it('Paste 12h value from clipboard', () => {
+            return fixture.whenStable()
+                .then(() => {
+                    inputElementDebug.triggerEventHandler(
+                        'paste',
+                        {
+                            preventDefault: () => null,
+                            clipboardData: {
+                                getData: () => '07:15 pm'
+                            }
+                        });
+                    fixture.detectChanges();
+
+                    return fixture.whenStable();
+                })
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(testComponent.timeValue.toString()).toContain('19:15:00');
+                });
+        });
     });
 
     describe('Keyboard value control', () => {

diff --git a/packages/mosaic/timepicker/timepicker.ts b/packages/mosaic/timepicker/timepicker.ts
@@ -23,6 +23,8 @@ import {
     Validators
 } from '@angular/forms';
 import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime';
+import { MomentDateAdapter } from '@ptsecurity/mosaic-moment-adapter/adapter';
 import {
     CanUpdateErrorState,
     CanUpdateErrorStateCtor,
@@ -31,6 +33,7 @@ import {
 } from '@ptsecurity/mosaic/core';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { MC_INPUT_VALUE_ACCESSOR } from '@ptsecurity/mosaic/input';
+import { Moment } from 'moment';
 import {
     noop,
     Subject
@@ -123,6 +126,11 @@ export const McTimepickerMixinBase:
         {
             provide: McFormFieldControl,
             useExisting: forwardRef(() => McTimepicker)
+        },
+        {
+            provide: DateAdapter,
+            useClass: MomentDateAdapter,
+            deps: [MC_DATE_LOCALE]
         }
     ]
 
@@ -262,7 +270,8 @@ export class McTimepicker extends McTimepickerMixinBase
                 @Optional() parentFormGroup: FormGroupDirective,
                 defaultErrorStateMatcher: ErrorStateMatcher,
                 @Optional() @Self() @Inject(MC_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
-                private readonly renderer: Renderer2) {
+                private readonly renderer: Renderer2,
+                @Inject(DateAdapter) public dateAdapter: DateAdapter<Moment>) {
         super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
 
         // If no input value accessor was explicitly specified, use the element as the input value
@@ -338,6 +347,7 @@ export class McTimepicker extends McTimepickerMixinBase
         if (this.getDateFromTimeString(clipboardUserInput) === undefined) { return; }
 
         this.elementRef.nativeElement.value = clipboardUserInput;
+
         this.onInput();
     }
 
@@ -645,9 +655,20 @@ export class McTimepicker extends McTimepickerMixinBase
         hoursAndMinutes: any;
         hoursAndMinutesAndSeconds: any;
     } {
-        const hoursAndMinutesAndSeconds = timeString.match(HOURS_MINUTES_SECONDS_REGEXP);
-        const hoursAndMinutes = timeString.match(HOURS_MINUTES_REGEXP);
-        const hoursOnly = timeString.match(HOURS_ONLY_REGEXP);
+        const momentWrappedTime = this.dateAdapter.parse(timeString, [
+            'h:m a',
+            'h:m:s a',
+            'H:m',
+            'H:m:s'
+        ]);
+
+        const convertedTimeString = momentWrappedTime !== null
+            ? momentWrappedTime.format('HH:mm:ss').toString()
+            : '';
+
+        const hoursAndMinutesAndSeconds = convertedTimeString.match(HOURS_MINUTES_SECONDS_REGEXP);
+        const hoursAndMinutes = convertedTimeString.match(HOURS_MINUTES_REGEXP);
+        const hoursOnly = convertedTimeString.match(HOURS_ONLY_REGEXP);
 
         return {
             hoursOnly,