@alfalab/core-components-phone-input 5.2.0

package/dist/modern/Component.js

@@ -0,0 +1,88 @@
+import React, { useRef, useImperativeHandle, useCallback } from 'react';
+import { conformToMask } from 'text-mask-core';
+import { MaskedInput } from '@alfalab/core-components-masked-input/dist/modern';
+import { deleteFormatting, setCaretPosition, getInsertedNumber } from './utils/index.js';
+
+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);
+    // Оставляет возможность прокинуть ref извне
+    useImperativeHandle(ref, () => inputRef.current);
+    const handleBeforeDisplay = useCallback((conformedValue, config) => {
+        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 (React.createElement(MaskedInput, Object.assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+});
+
+export { PhoneInput };

package/dist/modern/index.d.ts

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

package/dist/modern/index.js

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

package/dist/modern/utils/index.d.ts

@@ -0,0 +1,17 @@
+/// <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;
+export { deleteFormatting, setCaretPosition, getInsertedNumber };

package/dist/modern/utils/index.js

@@ -0,0 +1,27 @@
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+const deleteFormatting = (phone) => phone
+    .replace('+', '')
+    .replace(/^7/, '')
+    .replace(/\s/g, '')
+    .replace(/-/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;
+}
+
+export { deleteFormatting, getInsertedNumber, setCaretPosition };

package/dist/send-stats.js

@@ -0,0 +1,82 @@
+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);
+    });

package/dist/utils/index.d.ts

@@ -0,0 +1,17 @@
+/// <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;
+export { deleteFormatting, setCaretPosition, getInsertedNumber };

package/dist/utils/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+var deleteFormatting = function (phone) {
+    return phone
+        .replace('+', '')
+        .replace(/^7/, '')
+        .replace(/\s/g, '')
+        .replace(/-/g, '');
+};
+function setCaretPosition(_a) {
+    var position = _a.position, inputRef = _a.inputRef;
+    window.requestAnimationFrame(function () {
+        if (inputRef === null || !inputRef.current)
+            return;
+        inputRef.current.setSelectionRange(position, position);
+    });
+}
+function getInsertedNumber(_a) {
+    var rawValue = _a.rawValue, clearableCountryCode = _a.clearableCountryCode, countryPrefix = _a.countryPrefix, previousConformedValue = _a.previousConformedValue;
+    if (!clearableCountryCode && previousConformedValue === countryPrefix) {
+        if (rawValue.startsWith('7') || rawValue.startsWith('8')) {
+            return rawValue;
+        }
+        return rawValue.slice(countryPrefix.length);
+    }
+    return rawValue;
+}
+
+exports.deleteFormatting = deleteFormatting;
+exports.getInsertedNumber = getInsertedNumber;
+exports.setCaretPosition = setCaretPosition;

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@alfalab/core-components-phone-input",
+    "version": "5.2.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1"
+    },
+    "dependencies": {
+        "@alfalab/core-components-masked-input": "^4.2.0",
+        "classnames": "^2.2.6",
+        "text-mask-core": "^5.1.2"
+    },
+    "gitHead": "a80a4377703da0cb8fd257612117ef3eb2d9bc42"
+}