From d068eb0758cfb9a16c92c72a7faac054fdc6bab9 Mon Sep 17 00:00:00 2001 From: Barsukov Nikita Date: Thu, 28 Jul 2022 10:08:08 +0300 Subject: [PATCH] feat(kit)!: `Slider` | `InputSlider` | `Range` | `InputRange` use strict 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 --- .../input-range/input-range.component.ts | 8 ++- .../input-slider/examples/3/index.ts | 2 + .../input-slider/input-slider.component.ts | 8 ++- .../components/range/range.component.ts | 8 ++- .../input-slider/input-slider.component.ts | 13 ++-- .../input-slider/input-slider.template.html | 2 +- .../kit/components/range/range.component.ts | 20 ++---- .../helpers/slider-key-steps.directive.ts | 8 +-- projects/kit/types/key-steps.ts | 14 ++-- projects/kit/types/test/key-steps.spec.ts | 68 +++++++++++++++++++ projects/kit/utils/math/key-steps.ts | 4 -- 11 files changed, 113 insertions(+), 42 deletions(-) create mode 100644 projects/kit/types/test/key-steps.spec.ts 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 index a3e24fdc23531..12bbe33c68b79 100644 --- 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 | 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 index ed645ec51d5bf..57bccc0161447 100644 --- 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 index c9a9338d71d63..b6abacb7ab196 100644 --- 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 index 42ac97ff45156..6379a1f857cca 100644 --- 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 index 9228bf1c34e8d..7905f299c184f 100644 --- 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 index 1cc2b230fef2b..0b7c327d0a159 100644 --- 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 index 351063869bae2..93740c9f440ba 100644 --- 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 index bc0947136daa4..088621afaa77a 100644 --- 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 index 6729c66fb1822..5f06608bc7e8f 100644 --- 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 new file mode 100644 index 0000000000000..a808e8a93d20c --- /dev/null +++ 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 index 31053f02f3d7a..c635a22674432 100644 --- 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); -}