chore: fix coments

taiga-family · Sep 15, 2023 · fe51990 · fe51990
1 parent b662120
commit fe51990
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 26 deletions.
diff --git a/projects/demo/src/pages/phone/examples/3-non-strict/component.ts b/projects/demo/src/pages/phone/examples/3-non-strict/component.ts
@@ -44,6 +44,6 @@ export class PhoneMaskDocExample3 {
     constructor(@Inject(TUI_IS_APPLE) private readonly isApple: boolean) {}
 
     get pattern(): string {
-        return this.isApple ? '+{1}[0-9]{1,3} [0-9]{1,14}' : '';
+        return this.isApple ? '+[0-9-]{1,20}' : '';
     }
 }
diff --git a/projects/demo/src/pages/phone/examples/4-lazy-metadata/simple.md b/projects/demo/src/pages/phone/examples/4-lazy-metadata/simple.md
@@ -3,7 +3,8 @@ import {Maskito, MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
 import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
 
 const element = document.querySelector('input,textarea');
-let maskedInput = new Maskito(element, MASKITO_DEFAULT_OPTIONS);
+
+let maskedInput;
 
 (async function initMask() {
   const maskitoOptions = maskitoPhoneOptionsGenerator({

diff --git a/projects/demo/src/pages/phone/phone-doc.component.ts b/projects/demo/src/pages/phone/phone-doc.component.ts
@@ -62,7 +62,7 @@ export class PhoneDocComponent implements GeneratorOptions {
     constructor(@Inject(TUI_IS_APPLE) private readonly isApple: boolean) {}
 
     get pattern(): string {
-        return this.isApple ? '+{1}[0-9]{1,3} [0-9]{1,14}' : '';
+        return this.isApple ? '+[0-9-]{1,20}' : '';
     }
 
     updateOptions(): void {

diff --git a/projects/demo/src/pages/phone/phone-doc.template.html b/projects/demo/src/pages/phone/phone-doc.template.html
@@ -90,7 +90,6 @@
         <tui-doc-example
             id="lazy-metadata"
             heading="Lazy metadata"
-            [attr.pattern]="pattern"
             [content]="lazyMetadata"
             [description]="lazyDescription"
         >
@@ -131,6 +130,7 @@
                         autocomplete="tel"
                         inputmode="tel"
                         tuiTextfield
+                        [attr.pattern]="pattern"
                         [maskito]="maskitoOptions"
                     />
                 </tui-input>

diff --git a/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts b/projects/phone/src/lib/masks/phone/phone-mask-non-strict.ts
@@ -5,7 +5,7 @@ import {
     phoneLengthPostprocessorGenerator,
     validatePhonePreprocessorGenerator,
 } from './processors';
-import {generatePhoneMask, getPhoneTemplate} from './utils';
+import {generatePhoneMask, getPhoneTemplate, selectTemplate} from './utils';
 
 export function maskitoPhoneNonStrictOptionsGenerator({
     defaultIsoCode,
@@ -16,23 +16,26 @@ export function maskitoPhoneNonStrictOptionsGenerator({
 }): Required<MaskitoOptions> {
     const formatter = new AsYouType(defaultIsoCode, metadata);
     const prefix = '+';
-    let template = '';
-    let prevPhoneLength = 0;
+    let currentTemplate = '';
+    let currentPhoneLength = 0;
 
     return {
         ...MASKITO_DEFAULT_OPTIONS,
         mask: ({value}) => {
             const newTemplate = getPhoneTemplate(formatter, value);
-            const phoneLength = value.replace(/\D/g, '').length;
+            const newPhoneLength = value.replace(/\D/g, '').length;
 
-            template =
-                newTemplate.length < template.length && phoneLength > prevPhoneLength
-                    ? template
-                    : newTemplate;
-            prevPhoneLength = phoneLength;
-            const mask = generatePhoneMask({value, template, prefix});
+            currentTemplate = selectTemplate({
+                currentTemplate,
+                newTemplate,
+                currentPhoneLength,
+                newPhoneLength,
+            });
+            currentPhoneLength = newPhoneLength;
 
-            return template.length === 1 ? ['+', /\d/] : mask;
+            return currentTemplate.length === 1
+                ? ['+', /\d/]
+                : generatePhoneMask({value, template: currentTemplate, prefix});
         },
         postprocessors: [phoneLengthPostprocessorGenerator(metadata)],
         preprocessors: [

diff --git a/projects/phone/src/lib/masks/phone/phone-mask-strict.ts b/projects/phone/src/lib/masks/phone/phone-mask-strict.ts
@@ -17,7 +17,7 @@ import {
     phoneLengthPostprocessorGenerator,
     validatePhonePreprocessorGenerator,
 } from './processors';
-import {generatePhoneMask, getPhoneTemplate} from './utils';
+import {generatePhoneMask, getPhoneTemplate, selectTemplate} from './utils';
 
 export function maskitoPhoneStrictOptionsGenerator({
     countryIsoCode,
@@ -30,22 +30,24 @@ export function maskitoPhoneStrictOptionsGenerator({
     const formatter = new AsYouType(countryIsoCode, metadata);
     const prefix = `+${code} `;
 
-    let template = '';
-    let prevPhoneLength = 0;
+    let currentTemplate = '';
+    let currentPhoneLength = 0;
 
     return {
         ...MASKITO_DEFAULT_OPTIONS,
         mask: ({value}) => {
             const newTemplate = getPhoneTemplate(formatter, value);
-            const phoneLength = value.replace(/\D/g, '').length;
+            const newPhoneLength = value.replace(/\D/g, '').length;
 
-            template =
-                newTemplate.length < template.length && phoneLength > prevPhoneLength
-                    ? template
-                    : newTemplate;
-            prevPhoneLength = phoneLength;
+            currentTemplate = selectTemplate({
+                currentTemplate,
+                newTemplate,
+                currentPhoneLength,
+                newPhoneLength,
+            });
+            currentPhoneLength = newPhoneLength;
 
-            return generatePhoneMask({value, template, prefix});
+            return generatePhoneMask({value, template: currentTemplate, prefix});
         },
         plugins: [
             maskitoCaretGuard((value, [from, to]) => [

diff --git a/projects/phone/src/lib/masks/phone/processors/validate-phone-preprocessor.ts b/projects/phone/src/lib/masks/phone/processors/validate-phone-preprocessor.ts
@@ -42,7 +42,7 @@ export function validatePhonePreprocessorGenerator({
             );
 
             if (!validationError) {
-                // handle past-event with different code, for example for 8 / +7
+                // handle paste-event with different code, for example for 8 / +7
                 const phone = countryIsoCode
                     ? parsePhoneNumber(data, countryIsoCode, metadata)
                     : parsePhoneNumber(data, metadata);

diff --git a/projects/phone/src/lib/masks/phone/utils/index.ts b/projects/phone/src/lib/masks/phone/utils/index.ts
@@ -2,3 +2,4 @@ export * from './cut-phone-by-valid-length';
 export * from './generate-phone-mask';
 export * from './get-country-from-number';
 export * from './get-phone-template';
+export * from './select-template';
diff --git a/projects/phone/src/lib/masks/phone/utils/select-template.ts b/projects/phone/src/lib/masks/phone/utils/select-template.ts
@@ -0,0 +1,16 @@
+export function selectTemplate({
+    currentTemplate,
+    newTemplate,
+    currentPhoneLength,
+    newPhoneLength,
+}: {
+    currentTemplate: string;
+    newTemplate: string;
+    currentPhoneLength: number;
+    newPhoneLength: number;
+}): string {
+    return newTemplate.length < currentTemplate.length &&
+        newPhoneLength > currentPhoneLength
+        ? currentTemplate
+        : newTemplate;
+}