@alfalab/core-components-phone-input 7.3.18 → 7.3.20

package/moderncssm/Component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { MaskedInputProps } from "@alfalab/core-components-masked-input";
+type PhoneInputProps = Omit<MaskedInputProps, 'onBeforeDisplay' | 'type' | 'mask'> & {
+    clearableCountryCode?: boolean;
+};
+declare const PhoneInput: React.ForwardRefExoticComponent<Omit<MaskedInputProps, "mask" | "type" | "onBeforeDisplay"> & {
+    clearableCountryCode?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { PhoneInputProps, PhoneInput };

package/moderncssm/Component.js

@@ -0,0 +1,104 @@
+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/moderncssm';
+import { deleteFormatting, deleteMaskChar, setCaretPosition, getInsertedNumber } from './utils/index.js';
+
+/* eslint-disable complexity, no-param-reassign */
+const mask = [
+    '+',
+    '7',
+    ' ',
+    /([0-6]|[8-9])/,
+    /\d/,
+    /\d/,
+    ' ',
+    /\d/,
+    /\d/,
+    /\d/,
+    ' ',
+    /\d/,
+    /\d/,
+    ' ',
+    /\d/,
+    /\d/,
+];
+const countryPrefix = '+7 ';
+const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps }, ref) => {
+    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",
+         * то при удалении цифры перед ним каретка устанавливается перед кодом страны
+         * 2) в номере телефона есть пробелы и дефисы,
+         * при редактировании цифр рядом с этими символами каретка перескакивает через них,
+         * а не остается на том же месте, на котором была до редактирования
+         */
+        if (previousConformedValue &&
+            (([3, 6].includes(currentCaretPosition) &&
+                Math.abs(previousValueWithoutFormatting.length -
+                    currentValueWithoutFormatting.length) === 1) ||
+                ([7, 10, 13].includes(currentCaretPosition) &&
+                    previousConformedValue.length > currentCaretPosition))) {
+            setCaretPosition({ position: currentCaretPosition, inputRef });
+        }
+        // Удаление цифры перед кодом страны удаляет только саму цифру, код остается ("+7 1" -> "+7 ")
+        if (rawValue === countryPrefix) {
+            return rawValue;
+        }
+        // Вставка номера с 10 цифрами без кода страны
+        if (rawValue.length === 10 && conformedValue.length === mask.length) {
+            const masked = conformToMask(`+7${rawValue}`, mask, config);
+            return masked.conformedValue;
+        }
+        /*
+         * Код нужен для исправления ошибки в библиотеке text-mask: если цифра 7 находится на второй позиции при вставке, то она удаляется
+         * Это происходит потому что цифра 7 есть уже в маске
+         */
+        if (rawValue[1] === '7') {
+            const masked = conformToMask(`+7${rawValue}`, mask, config);
+            return masked.conformedValue;
+        }
+        const insertedNumber = getInsertedNumber({
+            rawValue,
+            clearableCountryCode,
+            countryPrefix,
+            previousConformedValue,
+        });
+        // Вставка номера, начинающегося с 8 или 7: 89990313131, 71112223344
+        if (conformedValue.length === mask.length &&
+            (insertedNumber.startsWith('8') || insertedNumber.startsWith('7'))) {
+            const masked = conformToMask(`+7${insertedNumber.slice(1)}`, mask, config);
+            return masked.conformedValue;
+        }
+        // Если ввод начат с 7 или 8 - выводит "+7 " и дает продолжить ввод со след. цифры
+        if (rawValue.length === 1 && ['7', '8'].includes(rawValue[0])) {
+            return countryPrefix;
+        }
+        const abortCountryCodeClearing = !clearableCountryCode && !conformedValue;
+        if (abortCountryCodeClearing) {
+            setCaretPosition({ position: countryPrefix.length, inputRef });
+            if (!rawValue.length)
+                return countryPrefix;
+            return false;
+        }
+        return conformedValue;
+    }, [clearableCountryCode]);
+    return (React.createElement(MaskedInput, { ...restProps, defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs([ref, inputRef]) }));
+});
+PhoneInput.displayName = 'PhoneInputs';
+
+export { PhoneInput };

package/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { PhoneInput } from './Component.js';

package/moderncssm/utils/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+declare const deleteFormatting: (phone: string) => string;
+declare function setCaretPosition({ position, inputRef, }: {
+    position: number;
+    inputRef: React.RefObject<HTMLInputElement>;
+}): void;
+declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPrefix, previousConformedValue, }: {
+    rawValue: string;
+    clearableCountryCode: boolean;
+    countryPrefix: string;
+    previousConformedValue: string;
+}): string;
+declare function deleteMaskChar(previousValue: string, rawValue: string): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber, deleteMaskChar };

package/moderncssm/utils/index.js

@@ -0,0 +1,39 @@
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+const deleteFormatting = (phone) => phone.replace('+', '').replace(/^7/, '').replace(/\s/g, '');
+function setCaretPosition({ position, inputRef, }) {
+    window.requestAnimationFrame(() => {
+        if (inputRef === null || !inputRef.current)
+            return;
+        inputRef.current.setSelectionRange(position, position);
+    });
+}
+function getInsertedNumber({ rawValue, clearableCountryCode, countryPrefix, previousConformedValue, }) {
+    if (!clearableCountryCode && previousConformedValue === countryPrefix) {
+        if (rawValue.startsWith('7') || rawValue.startsWith('8')) {
+            return rawValue;
+        }
+        return rawValue.slice(countryPrefix.length);
+    }
+    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, deleteMaskChar, getInsertedNumber, setCaretPosition };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-phone-input",
-    "version": "7.3.18",
+    "version": "7.3.20",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,11 +14,11 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.3.17",
+        "@alfalab/core-components-masked-input": "^6.3.19",
         "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }