feat(kit)!: Slider | InputSlider | Range | InputRange use str…

…ict version of `TuiKeySteps` (#2220) * feat(kit)!: `Slider` | `InputSlider` | `Range` | `InputRange` use strict version of `TuiKeySteps` * chore: apply changes after linting [tinkoff-bot] Co-authored-by: tinkoff-bot <[email protected]>
taiga-family · Aug 25, 2022 · 278aa9d · 278aa9d
1 parent 14069bf
commit 278aa9d
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 42 deletions.
diff --git a/projects/demo/src/modules/components/input-range/input-range.component.ts b/projects/demo/src/modules/components/input-range/input-range.component.ts
@@ -83,7 +83,13 @@ export class ExampleTuiInputRangeComponent extends AbstractExampleTuiControl {
 
     pluralize: Record<string, string> | null = null;
 
-    keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]];
+    keyStepsVariants: readonly TuiKeySteps[] = [
+        [
+            [0, 0],
+            [50, 1_000],
+            [100, 10_000],
+        ],
+    ];
 
     keySteps: TuiKeySteps | null = null;
 

diff --git a/projects/demo/src/modules/components/input-slider/examples/3/index.ts b/projects/demo/src/modules/components/input-slider/examples/3/index.ts
@@ -20,8 +20,10 @@ export class TuiInputSliderExample3 {
 
     readonly keySteps: TuiKeySteps = [
         // [percent, value]
+        [0, this.min],
         [25, 10_000],
         [50, 100_000],
         [75, 500_000],
+        [100, this.max],
     ];
 }
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.component.ts b/projects/demo/src/modules/components/input-slider/input-slider.component.ts
@@ -91,7 +91,13 @@ export class ExampleTuiInputSliderComponent extends AbstractExampleTuiControl {
 
     valueContent = this.valueContentVariants[0];
 
-    readonly keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]];
+    readonly keyStepsVariants: readonly TuiKeySteps[] = [
+        [
+            [0, 0],
+            [50, 1_000],
+            [100, 10_000],
+        ],
+    ];
 
     keySteps: TuiKeySteps | null = null;
 

diff --git a/projects/demo/src/modules/components/range/range.component.ts b/projects/demo/src/modules/components/range/range.component.ts
@@ -68,7 +68,13 @@ export class ExampleTuiRangeComponent {
 
     steps = this.stepsVariants[0];
 
-    readonly keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]];
+    readonly keyStepsVariants: readonly TuiKeySteps[] = [
+        [
+            [0, 0],
+            [50, 1_000],
+            [100, 10_000],
+        ],
+    ];
 
     keySteps: TuiKeySteps | null = null;
 

diff --git a/projects/kit/components/input-slider/input-slider.component.ts b/projects/kit/components/input-slider/input-slider.component.ts
@@ -143,12 +143,13 @@ export class TuiInputSliderComponent
     }
 
     @tuiPure
-    computePureKeySteps(
-        keySteps: TuiKeySteps | null,
-        min: number,
-        max: number,
-    ): TuiKeySteps {
-        return [[0, min], ...(keySteps || []), [100, max]];
+    computeKeySteps(keySteps: TuiKeySteps | null, min: number, max: number): TuiKeySteps {
+        return (
+            keySteps || [
+                [0, min],
+                [100, max],
+            ]
+        );
     }
 
     focusTextInput(): void {

diff --git a/projects/kit/components/input-slider/input-slider.template.html b/projects/kit/components/input-slider/input-slider.template.html
@@ -34,7 +34,7 @@
     [tuiFocusable]="false"
     [max]="computedSteps"
     [segments]="segments"
-    [keySteps]="computePureKeySteps(keySteps, min, max)"
+    [keySteps]="computeKeySteps(keySteps, min, max)"
     [attr.disabled]="readOnly || disabled || null"
     [ngModel]="value"
     (keyStepsInput)="onSliderChange($event)"

diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts
@@ -22,7 +22,6 @@ import {
     quantize,
     round,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
-    tuiAssert,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     tuiIsNativeFocusedIn,
@@ -36,7 +35,6 @@ import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants';
 import {TUI_FROM_TO_TEXTS} from '@taiga-ui/kit/tokens';
 import {TuiKeySteps} from '@taiga-ui/kit/types';
 import {
-    tuiCheckKeyStepsHaveMinMaxPercents,
     tuiKeyStepValueToPercentage,
     tuiPercentageToKeyStepValue,
 } from '@taiga-ui/kit/utils';
@@ -248,20 +246,12 @@ export class TuiRangeComponent
         min: number,
         max: number,
     ): TuiKeySteps {
-        if (keySteps && tuiCheckKeyStepsHaveMinMaxPercents(keySteps)) {
-            return keySteps;
-        }
-
-        // TODO replace all function by `return keySteps || [[0, min], [100, max]]` in v3.0
-        tuiAssert.assert(
-            !keySteps,
-            `\n` +
-                `Input property [keySteps] should contain min and max percents.\n` +
-                `We have taken [min] and [max] properties of your component for now (but it will not work in v3.0).\n` +
-                `See example how properly use [keySteps]: https://taiga-ui.dev/components/range#key-steps`,
+        return (
+            keySteps || [
+                [0, min],
+                [100, max],
+            ]
         );
-
-        return [[0, min], ...(keySteps || []), [100, max]];
     }
 
     private updateStart(value: number): void {

diff --git a/projects/kit/components/slider/helpers/slider-key-steps.directive.ts b/projects/kit/components/slider/helpers/slider-key-steps.directive.ts
@@ -15,14 +15,12 @@ import {
     AbstractTuiControl,
     clamp,
     tuiAssert,
-    tuiDefaultProp,
     TuiFocusableElementAccessor,
     tuiIsNativeFocused,
     typedFromEvent,
 } from '@taiga-ui/cdk';
 import {TuiKeySteps} from '@taiga-ui/kit/types';
 import {
-    tuiCheckKeyStepsHaveMinMaxPercents,
     tuiKeyStepValueToPercentage,
     tuiPercentageToKeyStepValue,
 } from '@taiga-ui/kit/utils';
@@ -45,11 +43,7 @@ export class TuiSliderKeyStepsDirective
     implements TuiFocusableElementAccessor
 {
     @Input()
-    @tuiDefaultProp(
-        tuiCheckKeyStepsHaveMinMaxPercents,
-        `Should contain min and max values`,
-    )
-    keySteps: TuiKeySteps = [];
+    keySteps!: TuiKeySteps;
 
     @Output()
     keyStepsInput = typedFromEvent(this.elementRef.nativeElement, `input`).pipe(

diff --git a/projects/kit/types/key-steps.ts b/projects/kit/types/key-steps.ts
@@ -3,15 +3,17 @@
  * Each element of the array has the form [percent, value]
  *
  * Thus, to set a field from 50,000 to 30,000,000 in steps:
- * 1) От 50 000 до 200 000 по 5000 (30 steps)
- * 2) От 200 000 до 1 000 000 по 50 000 (16 steps)
- * 3) От 1 000 000 до 30 000 000 по 500 000 (58 steps)
+ * 1) From 50 000 to 200 000 by 5000 per step (30 steps)
+ * 2) From 200 000 to 1 000 000 by 50 000 per step (16 steps)
+ * 3) From 1 000 000 to 30 000 000 by 500 000 per step (58 steps)
  *
  * You need to pass the following keyStep (where 104 = 30 + 16 + 58 is the total number of steps):
  *  [
- *      [100 / 104 * 30, 200000],
- *      [100 / 104 * (30 + 16), 1000000]
+ *      [0, 50_000],
+ *      [100 / 104 * 30, 200_000],
+ *      [100 / 104 * (30 + 16), 1_000_000],
+ *      [100, 30_000_000],
  *  ];
  *
  */
-export type TuiKeySteps = Array<[number, number]>;
+export type TuiKeySteps = [[0, number], ...Array<[number, number]>, [100, number]];
diff --git a/projects/kit/types/test/key-steps.spec.ts b/projects/kit/types/test/key-steps.spec.ts
@@ -0,0 +1,68 @@
+import {TuiKeySteps} from '@taiga-ui/kit';
+
+describe(`TuiKeySteps type`, () => {
+    /**
+     * Let's check that type {@link TuiKeySteps} works as expected using @ts-expect-error
+     * @link https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#-ts-expect-error-comments
+     */
+
+    describe(`Valid cases`, () => {
+        it(`Min + Max + values between`, () => {
+            const keySteps: TuiKeySteps = [
+                [0, 10],
+                [25, 10_000],
+                [50, 100_000],
+                [75, 500_000],
+                [100, 1_000_000],
+            ];
+
+            expect(keySteps).toBeDefined();
+        });
+
+        it(`Min + Max (NO values between)`, () => {
+            const keySteps: TuiKeySteps = [
+                [0, 10],
+                [100, 1_000_000],
+            ];
+
+            expect(keySteps).toBeDefined();
+        });
+    });
+
+    describe(`Invalid cases`, () => {
+        it(`no minimum`, () => {
+            const keySteps: TuiKeySteps = [
+                // @ts-expect-error
+                [25, 10_000],
+                [50, 100_000],
+                [75, 500_000],
+                [100, 1_000_000],
+            ];
+
+            expect(keySteps).toBeDefined();
+        });
+
+        it(`no maximum`, () => {
+            // @ts-expect-error
+            const keySteps: TuiKeySteps = [
+                [0, 0],
+                [25, 10_000],
+                [50, 100_000],
+                [75, 500_000],
+            ];
+
+            expect(keySteps).toBeDefined();
+        });
+
+        it(`no max and no min`, () => {
+            const keySteps: TuiKeySteps = [
+                // @ts-expect-error
+                [25, 10_000],
+                [50, 100_000],
+                [75, 500_000],
+            ];
+
+            expect(keySteps).toBeDefined();
+        });
+    });
+});
diff --git a/projects/kit/utils/math/key-steps.ts b/projects/kit/utils/math/key-steps.ts
@@ -42,7 +42,3 @@ export function tuiKeyStepValueToPercentage(
 
     return (upperStepPercent - lowerStepPercent) * ratio + lowerStepPercent;
 }
-
-export function tuiCheckKeyStepsHaveMinMaxPercents(steps: TuiKeySteps): boolean {
-    return !steps.length || (steps[0][0] === 0 && steps[steps.length - 1][0] === 100);
-}