chore(demo): improve documentation page Number (add `maskitoCaretGu…

…ard`) (#357)
taiga-family · Jul 3, 2023 · b95c93e · b95c93e
1 parent ed8221e
commit b95c93e
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 43 deletions.
diff --git a/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts b/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts
@@ -52,7 +52,7 @@ describe('Number | Prefix & Postfix', () => {
                 .should('have.value', '$1_234 per day')
                 .should('have.prop', 'selectionStart', '$1_234'.length)
                 .should('have.prop', 'selectionEnd', '$1_234'.length)
-                .type('{moveToStart}{rightArrow}{del}')
+                .type('{moveToStart}{del}')
                 .should('have.value', '$234 per day')
                 .should('have.prop', 'selectionStart', 1)
                 .should('have.prop', 'selectionEnd', 1);
@@ -131,17 +131,10 @@ describe('Number | Prefix & Postfix', () => {
         it('$|42 per day => Backspace => $|42 per day', () => {
             cy.get('@input')
                 .type('42')
-                .type('{moveToStart}{rightArrow}')
-                .type('{backspace}'.repeat(5))
-                .should('have.value', '$42 per day')
+                .type('{moveToStart}')
                 .should('have.prop', 'selectionStart', '$'.length)
-                .should('have.prop', 'selectionEnd', '$'.length);
-        });
-
-        it('|$42 per day => Delete => $|42 per day', () => {
-            cy.get('@input')
-                .type('42')
-                .type('{moveToStart}{del}')
+                .should('have.prop', 'selectionEnd', '$'.length)
+                .type('{backspace}'.repeat(5))
                 .should('have.value', '$42 per day')
                 .should('have.prop', 'selectionStart', '$'.length)
                 .should('have.prop', 'selectionEnd', '$'.length);
@@ -157,14 +150,28 @@ describe('Number | Prefix & Postfix', () => {
                 .should('have.prop', 'selectionEnd', 1);
         });
 
-        it('$42 per day| => Backspace => $42 per| day', () => {
+        it('$42| per day => Delete x4 => $42| per day', () => {
             cy.get('@input')
                 .type('42')
                 .type('{moveToEnd}')
-                .type('{backspace}'.repeat(4))
+                .should('have.prop', 'selectionStart', '$42'.length)
+                .should('have.prop', 'selectionEnd', '$42'.length)
+                .type('{del}'.repeat(4))
                 .should('have.value', '$42 per day')
-                .should('have.prop', 'selectionStart', '$42 per'.length)
-                .should('have.prop', 'selectionEnd', '$42 per'.length);
+                .should('have.prop', 'selectionStart', '$42'.length)
+                .should('have.prop', 'selectionEnd', '$42'.length);
+        });
+    });
+
+    describe('with maskitoCaretGuard', () => {
+        it('$|42 per day => ArrowLeft => $|42 per day', () => {
+            cy.get('@input')
+                .type('42')
+                .type('{moveToStart}')
+                .type('{leftArrow}'.repeat(3))
+                .should('have.value', '$42 per day')
+                .should('have.prop', 'selectionStart', '$'.length)
+                .should('have.prop', 'selectionEnd', '$'.length);
         });
     });
 });
diff --git a/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts b/projects/demo/src/pages/kit/number/examples/3-postfix/component.ts
@@ -35,13 +35,6 @@ export class NumberMaskDocExample3 {
         if (!this.value) {
             this.value = this.postfix;
         }
-
-        const newCaretIndex = this.value.length - this.postfix.length;
-
-        setTimeout(() => {
-            // To put cursor before postfix
-            this.inputRef.nativeElement.setSelectionRange(newCaretIndex, newCaretIndex);
-        });
     }
 
     onBlur(): void {

diff --git a/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts b/projects/demo/src/pages/kit/number/examples/3-postfix/mask.ts
@@ -1,8 +1,18 @@
-import {maskitoNumberOptionsGenerator} from '@maskito/kit';
+import type {MaskitoOptions} from '@maskito/core';
+import {maskitoCaretGuard, maskitoNumberOptionsGenerator} from '@maskito/kit';
 
-export default maskitoNumberOptionsGenerator({
+const {plugins, ...numberOptions} = maskitoNumberOptionsGenerator({
     postfix: '%',
     min: 0,
     max: 100,
     precision: 2,
 });
+
+export default {
+    ...numberOptions,
+    plugins: [
+        ...plugins,
+        // Forbids caret to be placed after postfix
+        maskitoCaretGuard(value => [0, value.length - 1]),
+    ],
+} as MaskitoOptions;
diff --git a/projects/demo/src/pages/kit/number/number-mask-doc.component.ts b/projects/demo/src/pages/kit/number/number-mask-doc.component.ts
@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angula
 import {FormControl} from '@angular/forms';
 import {DocExamplePrimaryTab} from '@demo/constants';
 import {MaskitoOptions} from '@maskito/core';
-import {maskitoNumberOptionsGenerator} from '@maskito/kit';
+import {maskitoCaretGuard, maskitoNumberOptionsGenerator} from '@maskito/kit';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiInputCountOptionsProvider} from '@taiga-ui/kit';
 
@@ -70,10 +70,10 @@ export class NumberMaskDocComponent implements GeneratorOptions {
     prefix = '';
     postfix = '';
 
-    maskitoOptions: MaskitoOptions = maskitoNumberOptionsGenerator(this);
+    maskitoOptions: MaskitoOptions = this.calculateMask(this);
 
     updateOptions(): void {
-        this.maskitoOptions = maskitoNumberOptionsGenerator(this);
+        this.maskitoOptions = this.calculateMask(this);
     }
 
     onFocus(): void {
@@ -83,18 +83,6 @@ export class NumberMaskDocComponent implements GeneratorOptions {
             value = this.prefix + this.postfix;
             this.apiPageControl.patchValue(value);
         }
-
-        if (this.postfix) {
-            const newCaretIndex = value.length - this.postfix.length;
-
-            setTimeout(() => {
-                // To put cursor before postfix
-                this.apiPageInput.nativeElement.setSelectionRange(
-                    newCaretIndex,
-                    newCaretIndex,
-                );
-            });
-        }
     }
 
     onBlur(): void {
@@ -104,4 +92,20 @@ export class NumberMaskDocComponent implements GeneratorOptions {
             this.apiPageControl.patchValue('');
         }
     }
+
+    private calculateMask(options: GeneratorOptions): MaskitoOptions {
+        const {prefix, postfix} = options;
+        const {plugins, ...numberOptions} = maskitoNumberOptionsGenerator(options);
+
+        return {
+            ...numberOptions,
+            plugins: [
+                ...plugins,
+                maskitoCaretGuard(value => [
+                    prefix.length,
+                    value.length - postfix.length,
+                ]),
+            ],
+        };
+    }
 }
diff --git a/projects/demo/src/pages/kit/number/number-mask-doc.template.html b/projects/demo/src/pages/kit/number/number-mask-doc.template.html
@@ -64,17 +64,22 @@
             [description]="postfixDescription"
         >
             <ng-template #postfixDescription>
-                <p class="tui-space_top-0">
+                <div>
                     Use
                     <code>postfix</code>
                     parameter to set non-removable text after the number.
-                </p>
-                <p>
+                </div>
+                <div>
+                    Additionally you can use
+                    <code>maskitoCaretGuard</code>
+                    to clamp caret inside allowable range.
+                </div>
+                <div class="tui-space_top-4">
                     This example also shows how to restrict the greatest
                     permitted value via
                     <code>max</code>
                     parameter.
-                </p>
+                </div>
             </ng-template>
             <number-mask-doc-example-3></number-mask-doc-example-3>
         </tui-doc-example>