fix(time-picker): fix time picker pan event #9717 (#9973)

Author: PlamenaMiteva

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -15,9 +15,10 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
 import { PlatformUtil } from '../core/utils';
 import { DatePart, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
-import { IgxTimeItemDirective } from './time-picker.directives';
+import { IgxItemListDirective, IgxTimeItemDirective } from './time-picker.directives';
 import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/public_api';
 import { Subscription } from 'rxjs';
+import { HammerGesturesManager } from '../core/touch';
 
 const CSS_CLASS_TIMEPICKER = 'igx-time-picker';
 const CSS_CLASS_INPUTGROUP = 'igx-input-group';
@@ -435,6 +436,26 @@ describe('IgxTimePicker', () => {
             date.setHours(20);
             expect(timePicker.validate(mockFormControl)).toEqual({ maxValue: true });
         });
+
+        it('should handle panmove event correctly', () => {
+            const touchManager = new HammerGesturesManager(null, null, new PlatformUtil(1));
+            const itemListDirective = new IgxItemListDirective(timePicker, elementRef, touchManager);
+            spyOn(touchManager, 'addEventListener');
+
+            itemListDirective.ngOnInit();
+            expect(touchManager.addEventListener).toHaveBeenCalledTimes(1);
+            const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }]] };
+            expect(touchManager.addEventListener).toHaveBeenCalledWith(
+                elementRef.nativeElement,
+                'pan',
+                (itemListDirective as any).onPanMove,
+                hammerOptions);
+
+            spyOn<any>(itemListDirective, 'onPanMove').and.callThrough();
+            const event = { type: 'pan' };
+            (itemListDirective as any).onPanMove(event);
+            expect(itemListDirective['onPanMove']).toHaveBeenCalled();
+        });
     });
 
     describe('Interaction tests', () => {

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -14,7 +14,6 @@ import {
     ViewChild,
     ContentChild,
     Inject,
-    Injectable,
     AfterViewInit,
     Injector,
     PipeTransform,
@@ -29,7 +28,6 @@ import {
     Validator,
     NG_VALIDATORS
 } from '@angular/forms';
-import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
 import { IgxIconModule } from '../icon/public_api';
 import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxInputDirective, IgxInputState } from '../directives/input/input.directive';
@@ -65,15 +63,6 @@ import { IgxPickerClearComponent, IgxPickersCommonModule } from '../date-common/
 import { TimeFormatPipe, TimeItemPipe } from './time-picker.pipes';
 
 let NEXT_ID = 0;
-const ITEMS_COUNT = 7;
-
-@Injectable()
-export class TimePickerHammerConfig extends HammerGestureConfig {
-    public overrides = {
-        pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 1 }
-    };
-}
-
 export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs {
     previousValue: Date | string;
     currentValue: Date | string;
@@ -86,10 +75,6 @@ export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs {
             useExisting: IgxTimePickerComponent,
             multi: true
         },
-        {
-            provide: HAMMER_GESTURE_CONFIG,
-            useClass: TimePickerHammerConfig
-        },
         {
             provide: IGX_TIME_PICKER_COMPONENT,
             useExisting: IgxTimePickerComponent

projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

@@ -11,16 +11,20 @@ import {
     HostListener,
     Inject,
     Input,
+    OnDestroy,
+    OnInit,
     TemplateRef
 } from '@angular/core';
+import { HammerGesturesManager } from '../core/touch';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.common';
 
 /** @hidden */
 @Directive({
-    selector: '[igxItemList]'
+    selector: '[igxItemList]',
+    providers: [HammerGesturesManager]
 })
-export class IgxItemListDirective {
+export class IgxItemListDirective implements OnInit, OnDestroy {
     @HostBinding('attr.tabindex')
     public tabindex = 0;
 
@@ -31,7 +35,8 @@ export class IgxItemListDirective {
 
     constructor(
         @Inject(IGX_TIME_PICKER_COMPONENT) public timePicker: IgxTimePickerBase,
-        private elementRef: ElementRef
+        private elementRef: ElementRef,
+        private touchManager: HammerGesturesManager
     ) { }
 
     @HostBinding('class.igx-time-picker__column')
@@ -166,54 +171,31 @@ export class IgxItemListDirective {
 
         const delta = event.deltaY;
         if (delta !== 0) {
-            switch (this.type) {
-                case 'hourList': {
-                    this.timePicker.nextHour(delta);
-                    break;
-                }
-                case 'minuteList': {
-                    this.timePicker.nextMinute(delta);
-                    break;
-                }
-                case 'secondsList': {
-                    this.timePicker.nextSeconds(delta);
-                    break;
-                }
-                case 'ampmList': {
-                    this.timePicker.nextAmPm(delta);
-                    break;
-                }
-            }
+            this.nextItem(delta);
         }
     }
 
     /**
-     * @hidden
+     * @hidden @internal
+     */
+    public ngOnInit() {
+        const hammerOptions: HammerOptions = { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }]] };
+        this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions);
+    }
+
+    /**
+     * @hidden @internal
      */
-    @HostListener('panmove', ['$event'])
-    public onPanMove(event) {
-        const delta = event.deltaY < 0 ? 1 : event.deltaY > 0 ? -1 : 0;
+     public ngOnDestroy() {
+        this.touchManager.destroy();
+    }
+
+    private onPanMove = (event: HammerInput) => {
+        const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0;
         if (delta !== 0) {
-            switch (this.type) {
-                case 'hourList': {
-                    this.timePicker.nextHour(delta);
-                    break;
-                }
-                case 'minuteList': {
-                    this.timePicker.nextMinute(delta);
-                    break;
-                }
-                case 'secondsList': {
-                    this.timePicker.nextSeconds(delta);
-                    break;
-                }
-                case 'ampmList': {
-                    this.timePicker.nextAmPm(delta);
-                    break;
-                }
-            }
+            this.nextItem(delta);
         }
-    }
+    };
 
     private nextItem(delta: number): void {
         switch (this.type) {