refactor(kit): InputTime uses built-in feature step from Time M…

…askito mask
taiga-family · Oct 18, 2024 · 8172d63 · 8172d63
1 parent 968e417
commit 8172d63
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 66 deletions.
diff --git a/projects/legacy/components/input-time/input-time.component.ts b/projects/legacy/components/input-time/input-time.component.ts
@@ -10,11 +10,10 @@ import type {MaskitoOptions} from '@maskito/core';
 import {maskitoTimeOptionsGenerator} from '@maskito/kit';
 import type {TuiValueTransformer} from '@taiga-ui/cdk/classes';
 import {TUI_FALSE_HANDLER, TUI_STRICT_MATCHER} from '@taiga-ui/cdk/constants';
-import type {TuiTimeLike, TuiTimeMode} from '@taiga-ui/cdk/date-time';
+import type {TuiTimeMode} from '@taiga-ui/cdk/date-time';
 import {TuiTime} from '@taiga-ui/cdk/date-time';
 import {TUI_IS_IOS, TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import type {TuiBooleanHandler, TuiIdentityMatcher} from '@taiga-ui/cdk/types';
-import {tuiIsElement, tuiIsInput} from '@taiga-ui/cdk/utils/dom';
 import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiDataListHost} from '@taiga-ui/core/components/data-list';
@@ -182,7 +181,7 @@ export class TuiInputTimeComponent
     }
 
     protected get maskOptions(): MaskitoOptions {
-        return this.calculateMask(this.mode);
+        return this.calculateMask(this.mode, this.readOnly);
     }
 
     protected get computedSearch(): string {
@@ -232,22 +231,6 @@ export class TuiInputTimeComponent
             });
     }
 
-    protected onArrowUp(event: Event): void {
-        if (this.items.length) {
-            return;
-        }
-
-        this.processArrow(event, 1);
-    }
-
-    protected onArrowDown(event: Event): void {
-        if (this.items.length) {
-            return;
-        }
-
-        this.processArrow(event, -1);
-    }
-
     protected onOpen(open: boolean): void {
         this.open = open;
     }
@@ -257,11 +240,12 @@ export class TuiInputTimeComponent
     }
 
     @tuiPure
-    private calculateMask(mode: TuiTimeMode): MaskitoOptions {
+    private calculateMask(mode: TuiTimeMode, readOnly: boolean): MaskitoOptions {
         const {HH, MM, SS, MS} = this.options.maxValues;
 
         return maskitoTimeOptionsGenerator({
             mode,
+            step: readOnly ? 0 : 1,
             timeSegmentMaxValues: {
                 hours: HH,
                 minutes: MM,
@@ -281,7 +265,6 @@ export class TuiInputTimeComponent
     }
 
     private findNearestTimeFromItems(value: TuiTime): TuiTime | null {
-        // eslint-disable-next-line no-restricted-syntax
         return this.items.reduce((previous, current) =>
             Math.abs(current.valueOf() - value.valueOf()) <
             Math.abs(previous.valueOf() - value.valueOf())
@@ -298,49 +281,6 @@ export class TuiInputTimeComponent
         this.open = false;
     }
 
-    private processArrow(event: Event, shift: -1 | 1): void {
-        const {target} = event;
-
-        if (this.readOnly || !tuiIsElement(target) || !tuiIsInput(target)) {
-            return;
-        }
-
-        const selectionStart = target.selectionStart || 0;
-
-        this.shiftTime(this.calculateShift(selectionStart, shift));
-
-        target.setSelectionRange(selectionStart, selectionStart);
-        event.preventDefault();
-    }
-
-    private calculateShift(selectionStart: number, shift: number): TuiTimeLike {
-        if (selectionStart <= 2) {
-            return {hours: shift};
-        }
-
-        if (selectionStart <= 5) {
-            return {minutes: shift};
-        }
-
-        if (selectionStart <= 8) {
-            return {seconds: shift};
-        }
-
-        return {ms: shift};
-    }
-
-    private shiftTime(shift: TuiTimeLike): void {
-        if (this.value === null) {
-            return;
-        }
-
-        const increasedTime = this.value.shift(shift);
-
-        // Manual update so we can set caret position properly
-        this.nativeValue = increasedTime.toString(this.mode);
-        this.value = increasedTime;
-    }
-
     private focusInput(preventScroll = false): void {
         if (this.nativeFocusableElement) {
             this.nativeFocusableElement.focus({preventScroll});

diff --git a/projects/legacy/components/input-time/input-time.template.html b/projects/legacy/components/input-time/input-time.template.html
@@ -22,8 +22,6 @@
         [tuiTextfieldFiller]="(getFiller$(mode) | async) || ''"
         [tuiTextfieldIcon]="iconContent"
         [value]="computedValue"
-        (keydown.arrowDown)="onArrowDown($event)"
-        (keydown.arrowUp)="onArrowUp($event)"
         (valueChange)="onValueChange($event)"
     >
         <ng-content />

diff --git a/projects/legacy/components/input-time/test/input-time.component.spec.ts b/projects/legacy/components/input-time/test/input-time.component.spec.ts
@@ -175,6 +175,7 @@ describe('InputTime', () => {
             fixture.detectChanges();
 
             expect(input.value).toBe('13:30');
+            expect(testComponent.control.value).toEqual(new TuiTime(13, 30));
         });
 
         it('if the cursor is at position 4, then pressing UP increases the minute by 1', () => {
@@ -184,6 +185,7 @@ describe('InputTime', () => {
             fixture.detectChanges();
 
             expect(input.value).toBe('12:31');
+            expect(testComponent.control.value).toEqual(new TuiTime(12, 31));
         });
 
         it('if the cursor is at position 0, then pressing DOWN decreases the hour by 1', () => {
@@ -193,6 +195,7 @@ describe('InputTime', () => {
             fixture.detectChanges();
 
             expect(input.value).toBe('11:30');
+            expect(testComponent.control.value).toEqual(new TuiTime(11, 30));
         });
 
         it('if the cursor is at position 4, then pressing DOWN decreases the minute by 1', () => {
@@ -202,6 +205,7 @@ describe('InputTime', () => {
             fixture.detectChanges();
 
             expect(input.value).toBe('12:29');
+            expect(testComponent.control.value).toEqual(new TuiTime(12, 29));
         });
 
         it('when readOnly is ignored', async () => {
@@ -215,11 +219,13 @@ describe('InputTime', () => {
             fixture.detectChanges();
 
             expect(input.value).toBe('12:30');
+            expect(testComponent.control.value).toEqual(new TuiTime(12, 30));
 
             input.dispatchEvent(tuiCreateKeyboardEvent('ArrowDown', 'keydown'));
             fixture.detectChanges();
 
             expect(input.value).toBe('12:30');
+            expect(testComponent.control.value).toEqual(new TuiTime(12, 30));
         });
     });