@alfalab/core-components-phone-input 7.1.18 → 7.2.1

package/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var textMaskCore = require('text-mask-core');
 var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
 var utils_index = require('./utils/index.js');
@@ -11,6 +12,7 @@ var utils_index = require('./utils/index.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
 var mask = [
     '+',
@@ -34,8 +36,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["clearableCountryCode"]);
     var inputRef = React.useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    React.useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -92,7 +92,7 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs__default.default([ref, inputRef]) })));
 });
 
 exports.PhoneInput = PhoneInput;

package/cssm/Component.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var textMaskCore = require('text-mask-core');
 var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
 var utils_index = require('./utils/index.js');
@@ -11,6 +12,7 @@ var utils_index = require('./utils/index.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
 var mask = [
     '+',
@@ -34,8 +36,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = tslib.__rest(_a, ["clearableCountryCode"]);
     var inputRef = React.useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    React.useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -92,7 +92,7 @@ var PhoneInput = React__default.default.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, tslib.__assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs__default.default([ref, inputRef]) })));
 });
 
 exports.PhoneInput = PhoneInput;

package/cssm/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('text-mask-core');
 require('@alfalab/core-components-masked-input/cssm');
 require('./utils/index.js');

package/esm/Component.js

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useImperativeHandle, useCallback } from 'react';
+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';
@@ -26,8 +27,6 @@ var countryPrefix = '+7 ';
 var PhoneInput = React.forwardRef(function (_a, ref) {
     var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["clearableCountryCode"]);
     var inputRef = useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    useImperativeHandle(ref, function () { return inputRef.current; });
     var handleBeforeDisplay = useCallback(function (conformedValue, config) {
         var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
         /*
@@ -84,7 +83,7 @@ var PhoneInput = React.forwardRef(function (_a, ref) {
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React.createElement(MaskedInput, __assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+    return (React.createElement(MaskedInput, __assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs([ref, inputRef]) })));
 });
 
 export { PhoneInput };

package/esm/index.js

@@ -1,6 +1,7 @@
 export { PhoneInput } from './Component.js';
 import 'tslib';
 import 'react';
+import 'react-merge-refs';
 import 'text-mask-core';
 import '@alfalab/core-components-masked-input/esm';
 import './utils/index.js';

package/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('text-mask-core');
 require('@alfalab/core-components-masked-input');
 require('./utils/index.js');

package/modern/Component.js

@@ -1,4 +1,5 @@
-import React, { useRef, useImperativeHandle, useCallback } from 'react';
+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';
@@ -24,8 +25,6 @@ const mask = [
 const countryPrefix = '+7 ';
 const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps }, ref) => {
     const inputRef = useRef(null);
-    // Оставляет возможность прокинуть ref извне
-    useImperativeHandle(ref, () => inputRef.current);
     const handleBeforeDisplay = useCallback((conformedValue, config) => {
         const { rawValue, previousConformedValue, currentCaretPosition } = config;
         /*
@@ -82,7 +81,7 @@ const PhoneInput = React.forwardRef(({ clearableCountryCode = true, ...restProps
         }
         return conformedValue;
     }, [clearableCountryCode]);
-    return (React.createElement(MaskedInput, { ...restProps, defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef }));
+    return (React.createElement(MaskedInput, { ...restProps, defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: mergeRefs([ref, inputRef]) }));
 });
 
 export { PhoneInput };

package/modern/index.js

@@ -1,5 +1,6 @@
 export { PhoneInput } from './Component.js';
 import 'react';
+import 'react-merge-refs';
 import 'text-mask-core';
 import '@alfalab/core-components-masked-input/modern';
 import './utils/index.js';

package/package.json

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

package/src/Component.tsx

@@ -0,0 +1,128 @@
+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';
+
+const mask = [
+    '+',
+    '7',
+    ' ',
+    /([0-6]|[8-9])/,
+    /\d/,
+    /\d/,
+    ' ',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+];
+
+const countryPrefix = '+7 ';
+
+export type PhoneInputProps = Omit<MaskedInputProps, 'onBeforeDisplay' | 'type' | 'mask'> & {
+    clearableCountryCode?: boolean;
+};
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+    ({ clearableCountryCode = true, ...restProps }, ref) => {
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        const handleBeforeDisplay = useCallback(
+            (conformedValue: string, config: TextMaskConfig) => {
+                const { rawValue, previousConformedValue, currentCaretPosition } = config;
+
+                /*
+                 * код ниже нужен для фикса следующих багов библиотеки text-mask:
+                 * 1) так как код страны указан в маске жестко как "+7",
+                 * то при удалении цифры перед ним каретка устанавливается перед кодом страны
+                 * 2) в номере телефона есть пробелы и дефисы,
+                 * при редактировании цифр рядом с этими символами каретка перескакивает через них,
+                 * а не остается на том же месте, на котором была до редактирования
+                 */
+                const previousValueWithoutFormatting = previousConformedValue
+                    ? deleteFormatting(previousConformedValue)
+                    : '';
+                const currentValueWithoutFormatting = deleteFormatting(conformedValue) || '';
+
+                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;
+                }
+
+                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 (
+            <MaskedInput
+                {...restProps}
+                defaultValue={clearableCountryCode ? restProps.defaultValue : countryPrefix}
+                mask={mask}
+                onBeforeDisplay={handleBeforeDisplay}
+                type='tel'
+                ref={mergeRefs([ref, inputRef])}
+            />
+        );
+    },
+);

package/src/index.ts

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

package/src/utils/index.ts

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