From fe519905900177406e130495f54b6aa8de8d3e9b Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Fri, 15 Sep 2023 17:00:57 +0300 Subject: [PATCH] chore: fix coments --- .../phone/examples/3-non-strict/component.ts | 2 +- .../phone/examples/4-lazy-metadata/simple.md | 3 ++- .../src/pages/phone/phone-doc.component.ts | 2 +- .../src/pages/phone/phone-doc.template.html | 2 +- .../lib/masks/phone/phone-mask-non-strict.ts | 25 +++++++++++-------- .../src/lib/masks/phone/phone-mask-strict.ts | 22 ++++++++-------- .../processors/validate-phone-preprocessor.ts | 2 +- .../phone/src/lib/masks/phone/utils/index.ts | 1 + .../lib/masks/phone/utils/select-template.ts | 16 ++++++++++++ 9 files changed, 49 insertions(+), 26 deletions(-) create mode 100644 projects/phone/src/lib/masks/phone/utils/select-template.ts 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 index 111972078..4e2b92f42 100644 --- 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 index 50dcc061a..18e4ef635 100644 --- 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 index 8b4625dda..a451121b7 100644 --- 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 index c9bd88066..91b83cdf8 100644 --- a/projects/demo/src/pages/phone/phone-doc.template.html +++ b/projects/demo/src/pages/phone/phone-doc.template.html @@ -90,7 +90,6 @@ @@ -131,6 +130,7 @@ autocomplete="tel" inputmode="tel" tuiTextfield + [attr.pattern]="pattern" [maskito]="maskitoOptions" /> 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 index 356687929..4208bc60e 100644 --- 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 { 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 index bfab00375..743b9f865 100644 --- 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 index 34e574065..bf8e663e7 100644 --- 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 index 4bae960af..ba9f3c180 100644 --- 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 new file mode 100644 index 000000000..eb126e40c --- /dev/null +++ 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; +}