feat(kit): add margin and limit properties for Range component (#8076)

Co-authored-by: l.golovina <[email protected]>
taiga-family · Jul 12, 2024 · 8c54c10 · 8c54c10
1 parent 734faa7
commit 8c54c10
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 3 deletions.
diff --git a/projects/demo-cypress/src/tests/range.cy.ts b/projects/demo-cypress/src/tests/range.cy.ts
@@ -14,6 +14,8 @@ describe('TuiRange', () => {
             <tui-range
                 [formControl]="testValue"
                 [keySteps]="keySteps"
+                [limit]="limit"
+                [margin]="margin"
                 [max]="max"
                 [min]="min"
                 [segments]="segments"
@@ -34,6 +36,8 @@ describe('TuiRange', () => {
         public segments = 10;
         public step = 1;
         public keySteps: TuiKeySteps | null = null;
+        public margin = 0;
+        public limit = Infinity;
     }
 
     beforeEach(() => {
@@ -148,7 +152,7 @@ describe('TuiRange', () => {
                 .type('{rightArrow}')
                 .then(() => {
                     expect(component.testValue.value?.[0]).to.equal(5);
-                    expect(component.testValue.value?.[0]).to.equal(5);
+                    expect(component.testValue.value?.[1]).to.equal(5);
                 });
         });
 
@@ -192,6 +196,54 @@ describe('TuiRange', () => {
                     expect(component.testValue.value?.[0]).to.equal(4);
                 });
         });
+
+        it('Prevents the value from exceeding the limit', () => {
+            component.step = 3;
+            component.limit = 2;
+            component.testValue.setValue([1, 5]);
+            cy.get('@rightThumb')
+                .focus()
+                .type('{rightArrow}')
+                .then(() => {
+                    expect(component.testValue.value?.[1]).to.equal(5);
+                });
+        });
+
+        it('Allow the value in the limit', () => {
+            component.step = 2;
+            component.limit = 2;
+            component.testValue.setValue([1, 1]);
+            cy.get('@rightThumb')
+                .focus()
+                .type('{rightArrow}')
+                .then(() => {
+                    expect(component.testValue.value?.[1]).to.equal(3);
+                });
+        });
+
+        it('Prevents the value from exceeding the margin', () => {
+            component.limit = 0;
+            component.step = 1;
+            component.margin = 5;
+            component.testValue.setValue([1, 5]);
+            cy.get('@rightThumb')
+                .focus()
+                .type('{leftArrow}')
+                .then(() => {
+                    expect(component.testValue.value?.[1]).to.equal(5);
+                });
+        });
+
+        it('Allow the value within the margin', () => {
+            component.margin = 5;
+            component.testValue.setValue([1, 7]);
+            cy.get('@rightThumb')
+                .focus()
+                .type('{leftArrow}')
+                .then(() => {
+                    expect(component.testValue.value?.[1]).to.equal(6);
+                });
+        });
     });
 
     describe('[step] prop', () => {

diff --git a/projects/demo/src/modules/components/range/index.html b/projects/demo/src/modules/components/range/index.html
@@ -57,6 +57,8 @@
                 <tui-range
                     [formControl]="control"
                     [keySteps]="keySteps"
+                    [limit]="limit"
+                    [margin]="margin"
                     [max]="max"
                     [min]="min"
                     [segments]="segments"
@@ -161,6 +163,35 @@
                     .
                 </p>
             </ng-template>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="limit"
+                documentationPropertyType="number"
+                [(documentationPropertyValue)]="limit"
+            >
+                Limiting the maximum distance between two thumbs.
+
+                <p>
+                    The default is
+                    <code>Infinity</code>
+                    .
+                </p>
+            </ng-template>
+
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="margin"
+                documentationPropertyType="number"
+                [(documentationPropertyValue)]="margin"
+            >
+                Limiting the minimum distance between two thumbs.
+
+                <p>
+                    The default is
+                    <code>0</code>
+                    .
+                </p>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 

diff --git a/projects/demo/src/modules/components/range/index.ts b/projects/demo/src/modules/components/range/index.ts
@@ -23,6 +23,10 @@ export default class Page {
 
     protected max = 100;
 
+    protected margin = 0;
+
+    protected limit = Infinity;
+
     protected step = 1;
 
     protected segments = 1;

diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts
@@ -84,6 +84,12 @@ export class TuiRange extends TuiControl<[number, number]> implements OnChanges
     @Input()
     public focusable = true;
 
+    @Input()
+    public margin = 0;
+
+    @Input()
+    public limit = Infinity;
+
     @ViewChildren(TuiSliderComponent, {read: ElementRef})
     public readonly slidersRefs: QueryList<ElementRef<HTMLInputElement>> = EMPTY_QUERY;
 
@@ -167,10 +173,28 @@ export class TuiRange extends TuiControl<[number, number]> implements OnChanges
     }
 
     private updateStart(value: number): void {
-        this.onChange([Math.min(value, this.value()[1]), this.value()[1]]);
+        const newValue = Math.min(value, this.value()[1]);
+        const distance = this.value()[1] - newValue;
+
+        if (!this.checkDistance(distance)) {
+            return;
+        }
+
+        this.onChange([newValue, this.value()[1]]);
     }
 
     private updateEnd(value: number): void {
-        this.onChange([this.value()[0], Math.max(value, this.value()[0])]);
+        const newValue = Math.max(value, this.value()[0]);
+        const distance = newValue - this.value()[0];
+
+        if (!this.checkDistance(distance)) {
+            return;
+        }
+
+        this.onChange([this.value()[0], newValue]);
+    }
+
+    private checkDistance(distance: number): boolean {
+        return tuiClamp(distance, this.margin, this.limit) === distance;
     }
 }