@alfalab/core-components-phone-input 7.2.2 → 7.2.4

package/Component.js

@@ -38,6 +38,17 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var inputRef = React.useRef(null);
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
+        var previousValueWithoutFormatting = previousConformedValue
+            ? utils_index.deleteFormatting(previousConformedValue)
+            : '';
+        /*
+         * Удаляем лишний символ маски при вводе или вставке значений перед знаком + или после него.
+         */
+        if (previousConformedValue && rawValue.indexOf('+7') !== 0) {
+            var newRaw = utils_index.deleteMaskChar(previousValueWithoutFormatting, rawValue);
+            conformedValue = textMaskCore.conformToMask(newRaw, mask, config).conformedValue;
+        }
+        var currentValueWithoutFormatting = utils_index.deleteFormatting(conformedValue) || '';
         /*
          * код ниже нужен для фикса следующих багов библиотеки text-mask:
          * 1) так как код страны указан в маске жестко как "+7",
@@ -46,10 +57,6 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
          * при редактировании цифр рядом с этими символами каретка перескакивает через них,
          * а не остается на том же месте, на котором была до редактирования
          */
-        var previousValueWithoutFormatting = previousConformedValue
-            ? utils_index.deleteFormatting(previousConformedValue)
-            : '';
-        var currentValueWithoutFormatting = utils_index.deleteFormatting(conformedValue) || '';
         if (previousConformedValue &&
             (([3, 6].includes(currentCaretPosition) &&
                 Math.abs(previousValueWithoutFormatting.length -

package/cssm/Component.js

@@ -38,6 +38,17 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var inputRef = React.useRef(null);
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
+        var previousValueWithoutFormatting = previousConformedValue
+            ? utils_index.deleteFormatting(previousConformedValue)
+            : '';
+        /*
+         * Удаляем лишний символ маски при вводе или вставке значений перед знаком + или после него.
+         */
+        if (previousConformedValue && rawValue.indexOf('+7') !== 0) {
+            var newRaw = utils_index.deleteMaskChar(previousValueWithoutFormatting, rawValue);
+            conformedValue = textMaskCore.conformToMask(newRaw, mask, config).conformedValue;
+        }
+        var currentValueWithoutFormatting = utils_index.deleteFormatting(conformedValue) || '';
         /*
          * код ниже нужен для фикса следующих багов библиотеки text-mask:
          * 1) так как код страны указан в маске жестко как "+7",
@@ -46,10 +57,6 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
          * при редактировании цифр рядом с этими символами каретка перескакивает через них,
          * а не остается на том же месте, на котором была до редактирования
          */
-        var previousValueWithoutFormatting = previousConformedValue
-            ? utils_index.deleteFormatting(previousConformedValue)
-            : '';
-        var currentValueWithoutFormatting = utils_index.deleteFormatting(conformedValue) || '';
         if (previousConformedValue &&
             (([3, 6].includes(currentCaretPosition) &&
                 Math.abs(previousValueWithoutFormatting.length -

package/cssm/utils/index.d.ts

@@ -14,4 +14,5 @@ declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPref
     countryPrefix: string;
     previousConformedValue: string;
 }): string;
-export { deleteFormatting, setCaretPosition, getInsertedNumber };
+declare function deleteMaskChar(previousValue: string, rawValue: string): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber, deleteMaskChar };

package/cssm/utils/index.js

@@ -27,7 +27,24 @@ function getInsertedNumber(_a) {
     }
     return rawValue;
 }
+function deleteMaskChar(previousValue, rawValue) {
+    var prevRawValueAsArr = deleteFormatting(rawValue).split('').reverse();
+    var prevConformedCharIdx = previousValue.length - 1;
+    var isMaskRemoved = false;
+    var newRaw = [];
+    prevRawValueAsArr.forEach(function (char) {
+        if (isMaskRemoved || char === previousValue[prevConformedCharIdx]) {
+            newRaw.push(char);
+            prevConformedCharIdx -= 1;
+        }
+        else if (char === '7') {
+            isMaskRemoved = true;
+        }
+    });
+    return newRaw.reverse().join('');
+}
 
 exports.deleteFormatting = deleteFormatting;
+exports.deleteMaskChar = deleteMaskChar;
 exports.getInsertedNumber = getInsertedNumber;
 exports.setCaretPosition = setCaretPosition;

package/esm/Component.js

@@ -3,7 +3,7 @@ import React, { useRef, useCallback } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { conformToMask } from 'text-mask-core';
 import { MaskedInput } from '@alfalab/core-components-masked-input/esm';
-import { deleteFormatting, setCaretPosition, getInsertedNumber } from './utils/index.js';
+import { deleteFormatting, deleteMaskChar, setCaretPosition, getInsertedNumber } from './utils/index.js';
 
 var mask = [
     '+',
@@ -29,6 +29,17 @@ var PhoneInput = React.forwardRef(function (_a, ref) {
     var inputRef = useRef(null);
     var handleBeforeDisplay = useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
+        var previousValueWithoutFormatting = previousConformedValue
+            ? deleteFormatting(previousConformedValue)
+            : '';
+        /*
+         * Удаляем лишний символ маски при вводе или вставке значений перед знаком + или после него.
+         */
+        if (previousConformedValue && rawValue.indexOf('+7') !== 0) {
+            var newRaw = deleteMaskChar(previousValueWithoutFormatting, rawValue);
+            conformedValue = conformToMask(newRaw, mask, config).conformedValue;
+        }
+        var currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
         /*
          * код ниже нужен для фикса следующих багов библиотеки text-mask:
          * 1) так как код страны указан в маске жестко как "+7",
@@ -37,10 +48,6 @@ var PhoneInput = React.forwardRef(function (_a, ref) {
          * при редактировании цифр рядом с этими символами каретка перескакивает через них,
          * а не остается на том же месте, на котором была до редактирования
          */
-        var previousValueWithoutFormatting = previousConformedValue
-            ? deleteFormatting(previousConformedValue)
-            : '';
-        var currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
         if (previousConformedValue &&
             (([3, 6].includes(currentCaretPosition) &&
                 Math.abs(previousValueWithoutFormatting.length -

package/esm/utils/index.d.ts

@@ -14,4 +14,5 @@ declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPref
     countryPrefix: string;
     previousConformedValue: string;
 }): string;
-export { deleteFormatting, setCaretPosition, getInsertedNumber };
+declare function deleteMaskChar(previousValue: string, rawValue: string): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber, deleteMaskChar };

package/esm/utils/index.js

@@ -23,5 +23,21 @@ function getInsertedNumber(_a) {
     }
     return rawValue;
 }
+function deleteMaskChar(previousValue, rawValue) {
+    var prevRawValueAsArr = deleteFormatting(rawValue).split('').reverse();
+    var prevConformedCharIdx = previousValue.length - 1;
+    var isMaskRemoved = false;
+    var newRaw = [];
+    prevRawValueAsArr.forEach(function (char) {
+        if (isMaskRemoved || char === previousValue[prevConformedCharIdx]) {
+            newRaw.push(char);
+            prevConformedCharIdx -= 1;
+        }
+        else if (char === '7') {
+            isMaskRemoved = true;
+        }
+    });
+    return newRaw.reverse().join('');
+}
 
-export { deleteFormatting, getInsertedNumber, setCaretPosition };
+export { deleteFormatting, deleteMaskChar, getInsertedNumber, setCaretPosition };

package/modern/Component.js

@@ -2,8 +2,9 @@ import React, { useRef, useCallback } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { conformToMask } from 'text-mask-core';
 import { MaskedInput } from '@alfalab/core-components-masked-input/modern';
-import { deleteFormatting, setCaretPosition, getInsertedNumber } from './utils/index.js';
+import { deleteFormatting, deleteMaskChar, setCaretPosition, getInsertedNumber } from './utils/index.js';
 
+/* eslint-disable complexity, no-param-reassign */
 const mask = [
     '+',
     '7',
@@ -27,6 +28,17 @@ const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps
     const inputRef = useRef(null);
     const handleBeforeDisplay = useCallback((conformedValue, config) => {
         const { rawValue, previousConformedValue, currentCaretPosition } = config;
+        const previousValueWithoutFormatting = previousConformedValue
+            ? deleteFormatting(previousConformedValue)
+            : '';
+        /*
+         * Удаляем лишний символ маски при вводе или вставке значений перед знаком + или после него.
+         */
+        if (previousConformedValue && rawValue.indexOf('+7') !== 0) {
+            const newRaw = deleteMaskChar(previousValueWithoutFormatting, rawValue);
+            conformedValue = conformToMask(newRaw, mask, config).conformedValue;
+        }
+        const currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
         /*
          * код ниже нужен для фикса следующих багов библиотеки text-mask:
          * 1) так как код страны указан в маске жестко как "+7",
@@ -35,10 +47,6 @@ const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps
          * при редактировании цифр рядом с этими символами каретка перескакивает через них,
          * а не остается на том же месте, на котором была до редактирования
          */
-        const previousValueWithoutFormatting = previousConformedValue
-            ? deleteFormatting(previousConformedValue)
-            : '';
-        const currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
         if (previousConformedValue &&
             (([3, 6].includes(currentCaretPosition) &&
                 Math.abs(previousValueWithoutFormatting.length -

package/modern/utils/index.d.ts

@@ -14,4 +14,5 @@ declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPref
     countryPrefix: string;
     previousConformedValue: string;
 }): string;
-export { deleteFormatting, setCaretPosition, getInsertedNumber };
+declare function deleteMaskChar(previousValue: string, rawValue: string): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber, deleteMaskChar };

package/modern/utils/index.js

@@ -19,5 +19,21 @@ function getInsertedNumber({ rawValue, clearableCountryCode, countryPrefix, prev
     }
     return rawValue;
 }
+function deleteMaskChar(previousValue, rawValue) {
+    const prevRawValueAsArr = deleteFormatting(rawValue).split('').reverse();
+    let prevConformedCharIdx = previousValue.length - 1;
+    let isMaskRemoved = false;
+    const newRaw = [];
+    prevRawValueAsArr.forEach((char) => {
+        if (isMaskRemoved || char === previousValue[prevConformedCharIdx]) {
+            newRaw.push(char);
+            prevConformedCharIdx -= 1;
+        }
+        else if (char === '7') {
+            isMaskRemoved = true;
+        }
+    });
+    return newRaw.reverse().join('');
+}
 
-export { deleteFormatting, getInsertedNumber, setCaretPosition };
+export { deleteFormatting, deleteMaskChar, getInsertedNumber, setCaretPosition };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-phone-input",
-    "version": "7.2.2",
+    "version": "7.2.4",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.2.2",
+        "@alfalab/core-components-masked-input": "^6.2.3",
         "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0"

package/src/Component.tsx

@@ -1,10 +1,11 @@
+/* eslint-disable complexity, no-param-reassign */
 import React, { useCallback, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { conformToMask, TextMaskConfig } from 'text-mask-core';
 
 import { MaskedInput, MaskedInputProps } from '@alfalab/core-components-masked-input';
 
-import { deleteFormatting, getInsertedNumber, setCaretPosition } from './utils';
+import { deleteFormatting, deleteMaskChar, getInsertedNumber, setCaretPosition } from './utils';
 
 const mask = [
     '+',
@@ -39,6 +40,21 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
             (conformedValue: string, config: TextMaskConfig) => {
                 const { rawValue, previousConformedValue, currentCaretPosition } = config;
 
+                const previousValueWithoutFormatting = previousConformedValue
+                    ? deleteFormatting(previousConformedValue)
+                    : '';
+
+                /*
+                 * Удаляем лишний символ маски при вводе или вставке значений перед знаком + или после него.
+                 */
+                if (previousConformedValue && rawValue.indexOf('+7') !== 0) {
+                    const newRaw = deleteMaskChar(previousValueWithoutFormatting, rawValue);
+
+                    conformedValue = conformToMask(newRaw, mask, config).conformedValue;
+                }
+
+                const currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
+
                 /*
                  * код ниже нужен для фикса следующих багов библиотеки text-mask:
                  * 1) так как код страны указан в маске жестко как "+7",
@@ -47,11 +63,6 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
                  * при редактировании цифр рядом с этими символами каретка перескакивает через них,
                  * а не остается на том же месте, на котором была до редактирования
                  */
-                const previousValueWithoutFormatting = previousConformedValue
-                    ? deleteFormatting(previousConformedValue)
-                    : '';
-                const currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
-
                 if (
                     previousConformedValue &&
                     (([3, 6].includes(currentCaretPosition) &&

package/src/utils/index.ts

@@ -41,3 +41,21 @@ export function getInsertedNumber({
 
     return rawValue;
 }
+
+export function deleteMaskChar(previousValue: string, rawValue: string) {
+    const prevRawValueAsArr = deleteFormatting(rawValue).split('').reverse();
+    let prevConformedCharIdx = previousValue.length - 1;
+    let isMaskRemoved = false;
+    const newRaw: string[] = [];
+
+    prevRawValueAsArr.forEach((char) => {
+        if (isMaskRemoved || char === previousValue[prevConformedCharIdx]) {
+            newRaw.push(char);
+            prevConformedCharIdx -= 1;
+        } else if (char === '7') {
+            isMaskRemoved = true;
+        }
+    });
+
+    return newRaw.reverse().join('');
+}

package/utils/index.d.ts

@@ -14,4 +14,5 @@ declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPref
     countryPrefix: string;
     previousConformedValue: string;
 }): string;
-export { deleteFormatting, setCaretPosition, getInsertedNumber };
+declare function deleteMaskChar(previousValue: string, rawValue: string): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber, deleteMaskChar };

package/utils/index.js

@@ -27,7 +27,24 @@ function getInsertedNumber(_a) {
     }
     return rawValue;
 }
+function deleteMaskChar(previousValue, rawValue) {
+    var prevRawValueAsArr = deleteFormatting(rawValue).split('').reverse();
+    var prevConformedCharIdx = previousValue.length - 1;
+    var isMaskRemoved = false;
+    var newRaw = [];
+    prevRawValueAsArr.forEach(function (char) {
+        if (isMaskRemoved || char === previousValue[prevConformedCharIdx]) {
+            newRaw.push(char);
+            prevConformedCharIdx -= 1;
+        }
+        else if (char === '7') {
+            isMaskRemoved = true;
+        }
+    });
+    return newRaw.reverse().join('');
+}
 
 exports.deleteFormatting = deleteFormatting;
+exports.deleteMaskChar = deleteMaskChar;
 exports.getInsertedNumber = getInsertedNumber;
 exports.setCaretPosition = setCaretPosition;