chore(kit): Range review comments

taiga-family · Apr 4, 2022 · 202c39b · 202c39b
1 parent 1d0fb87
commit 202c39b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 31 deletions.
diff --git a/projects/demo/src/modules/components/range/examples/import/insert-template.md b/projects/demo/src/modules/components/range/examples/import/insert-template.md
@@ -1,5 +1,5 @@
 ```html
-<tui-range max="10" [(ngModel)]="model"></tui-range>
+<tui-range [max]="10" [(ngModel)]="model"></tui-range>
 
 <tui-range [formControl]="testValue" [max]="10"></tui-range>
 ```
diff --git a/projects/kit/components/range/range-change.directive.ts b/projects/kit/components/range/range-change.directive.ts
@@ -1,15 +1,16 @@
 import {DOCUMENT} from '@angular/common';
 import {Directive, ElementRef, Inject} from '@angular/core';
-import {clamp, round, typedFromEvent} from '@taiga-ui/cdk';
+import {clamp, round, TuiDestroyService, typedFromEvent} from '@taiga-ui/cdk';
 import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants';
-import {merge} from 'rxjs';
+import {merge, Observable, race} from 'rxjs';
 import {filter, map, repeat, startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {TuiRangeComponent} from './range.component';
 
 // @dynamic
 @Directive({
     selector: 'tui-range',
+    providers: [TuiDestroyService],
 })
 export class TuiRangeChangeDirective {
     /**
@@ -41,6 +42,7 @@ export class TuiRangeChangeDirective {
         @Inject(DOCUMENT) private readonly documentRef: Document,
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(TuiRangeComponent) private readonly range: TuiRangeComponent,
+        @Inject(TuiDestroyService) destroy$: Observable<unknown>,
     ) {
         let activeThumb: 'left' | 'right';
 
@@ -52,7 +54,7 @@ export class TuiRangeChangeDirective {
                 }),
                 switchMap(event => this.pointerMove$.pipe(startWith(event))),
                 map(({clientX}) => clamp(this.getFractionFromEvents(clientX), 0, 1)),
-                takeUntil(this.pointerUp$),
+                takeUntil(race(this.pointerUp$, destroy$)),
                 repeat(),
             )
             .subscribe(fraction => {

diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts
@@ -20,7 +20,6 @@ import {
     EMPTY_QUERY,
     isNativeFocusedIn,
     nonNegativeFiniteAssertion,
-    setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
@@ -161,15 +160,16 @@ export class TuiRangeComponent
             target === this.elementRef.nativeElement
                 ? this.lastActiveThumb === 'right'
                 : target === rightThumbElement;
+        const activeThumbElement = isRightThumb ? rightThumbElement : leftThumbElement;
         const previousValue = isRightThumb ? this.value[1] : this.value[0];
         /** @bad TODO think about a solution without twice conversion */
         const previousFraction = this.getFractionFromValue(previousValue);
         const newFractionValue = previousFraction + coefficient * this.computedStep;
 
         this.processValue(this.getValueFromFraction(newFractionValue), isRightThumb);
 
-        if (rightThumbElement && leftThumbElement) {
-            setNativeFocused(isRightThumb ? rightThumbElement : leftThumbElement);
+        if (activeThumbElement) {
+            activeThumbElement.focus();
         }
     }
 

diff --git a/projects/kit/components/slider/slider-readonly.directive.ts b/projects/kit/components/slider/slider-readonly.directive.ts
@@ -1,45 +1,41 @@
-import {Directive, ElementRef, HostListener, Inject, Input} from '@angular/core';
-import {tuiDefaultProp, TuiDestroyService, typedFromEvent} from '@taiga-ui/cdk';
-import {Observable} from 'rxjs';
-import {filter, takeUntil} from 'rxjs/operators';
+import {Directive, HostListener, Input} from '@angular/core';
+import {tuiDefaultProp} from '@taiga-ui/cdk';
+
+const SLIDER_INTERACTION_KEYS = [
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+];
 
 /**
  * Native <input type='range' readonly> doesn't work.
  * This directive imitates this native behaviour.
  */
 @Directive({
     selector: 'input[tuiSlider][readonly]',
-    providers: [TuiDestroyService],
 })
 export class TuiSliderReadonlyDirective {
-    private readonly ARROWS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-
     @Input()
     @tuiDefaultProp()
     readonly: '' | boolean = true;
 
-    constructor(
-        @Inject(ElementRef) {nativeElement}: ElementRef,
-        @Inject(TuiDestroyService) destroy$: Observable<unknown>,
-    ) {
-        /* @HostListener('keydown.arrowLeft') doesn't invoke function if some system key (ctrl, control, meta) was pressed */
-        typedFromEvent(nativeElement, 'keydown')
-            .pipe(
-                filter(({key}) => this.ARROWS.includes(key)),
-                takeUntil(destroy$),
-            )
-            .subscribe(event => this.preventEvent(event));
-    }
-
     @HostListener('mousedown', ['$event'])
     @HostListener('touchstart', ['$event'])
-    @HostListener('keydown.home', ['$event'])
-    @HostListener('keydown.end', ['$event'])
-    @HostListener('keydown.pageUp', ['$event'])
-    @HostListener('keydown.pageDown', ['$event'])
     preventEvent(event: Event) {
         if (this.readonly === '' || this.readonly) {
             event.preventDefault();
         }
     }
+
+    @HostListener('keydown', ['$event'])
+    preventKeyboardInteraction(event: KeyboardEvent) {
+        if (SLIDER_INTERACTION_KEYS.includes(event.key)) {
+            this.preventEvent(event);
+        }
+    }
 }