@alfalab/core-components-phone-input 7.1.17 → 7.2.0

package/package.json

@@ -1,14 +1,11 @@
 {
     "name": "@alfalab/core-components-phone-input",
-    "version": "7.1.17",
+    "version": "7.2.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "scripts": {
-        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -17,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.1.17",
+        "@alfalab/core-components-masked-input": "^6.2.0",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0"
     }

package/src/Component.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
+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);
+
+        // Оставляет возможность прокинуть ref извне
+        useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
+        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={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;
+}

package/send-stats.js

@@ -1,82 +0,0 @@
-const http = require('http');
-const fs = require('fs');
-const { promisify } = require('util');
-const path = require('path');
-
-const readFile = promisify(fs.readFile);
-
-async function main() {
-    const remoteHost = process.env.NIS_HOST || 'digital';
-    const remotePort = process.env.NIS_PORT || 80;
-    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
-
-    try {
-        const [_, node, os, arch] =
-            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
-        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-
-        let ownPackageJson, packageJson;
-
-        try {
-            const result = await Promise.all([
-                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
-                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
-            ]);
-
-            ownPackageJson = JSON.parse(result[0]);
-            packageJson = JSON.parse(result[1]);
-        } catch (err) {
-            ownPackageJson = '';
-            packageJson = '';
-        }
-
-        const data = {
-            node,
-            npm,
-            yarn,
-            os,
-            arch,
-            ownPackageJson: JSON.stringify(ownPackageJson),
-            packageJson: JSON.stringify(packageJson),
-        };
-
-        const body = JSON.stringify(data);
-
-        const options = {
-            host: remoteHost,
-            port: remotePort,
-            path: remotePath,
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Content-Length': body.length,
-            },
-        };
-
-        return new Promise((resolve, reject) => {
-            const req = http.request(options, (res) => {
-                res.on('end', () => {
-                    resolve();
-                });
-            });
-
-            req.on('error', () => {
-                reject();
-            });
-
-            req.write(body);
-            req.end();
-        });
-    } catch (error) {
-        throw error;
-    }
-}
-
-main()
-    .then(() => {
-        process.exit(0);
-    })
-    .catch(() => {
-        process.exit(0);
-    });