@alfalab/core-components-international-phone-input 1.0.0

package/src/types.ts

@@ -0,0 +1,132 @@
+import type { ChangeEvent, ElementType, FC } from 'react';
+import { FocusEvent } from 'react';
+
+import type { InputProps } from '@alfalab/core-components-input';
+import type { InputDesktopProps } from '@alfalab/core-components-input/desktop';
+import type { InputMobileProps } from '@alfalab/core-components-input/mobile';
+import type { InputAutocompleteProps } from '@alfalab/core-components-input-autocomplete';
+import type { InputAutocompleteDesktopProps } from '@alfalab/core-components-input-autocomplete/desktop';
+import type { InputAutocompleteMobileProps } from '@alfalab/core-components-input-autocomplete/mobile';
+import { OptionShape } from '@alfalab/core-components-select/typings';
+
+import type { SharedCountrySelectProps } from './components/country-select';
+
+export type Country = {
+    name: string;
+    regions?: string[];
+    iso2: string;
+    countryCode: string;
+    dialCode: string;
+    format?: string;
+    priority: number;
+    mainCode?: boolean;
+};
+
+export type AreaItem = Country & {
+    isAreaCode: boolean;
+    areaCodeLength: number;
+};
+
+type CommonPhoneInputProps = {
+    /**
+     *  Выбранная страна
+     */
+    country?: Country;
+
+    /**
+     * Список необходимых iso2 стран
+     */
+    countries?: string[];
+
+    /**
+     * Дефолтный код страны
+     */
+    defaultIso2?: string;
+
+    /**
+     * Возможность стереть код страны
+     */
+    clearableCountryCode?: boolean;
+
+    /**
+     *  Свойства селекта выбора стран
+     */
+    countrySelectProps?: SharedCountrySelectProps;
+
+    /**
+     *Показывать крестик очистки
+     */
+    clear?: boolean;
+
+    /**
+     * Функция фильтрации номеров для автокомплита
+     */
+    filterFn?: (value: string | undefined, option: OptionShape) => boolean;
+
+    /**
+     * Обработчик события изменения страны
+     */
+    onCountryChange?: (country?: Country) => void;
+
+    /**
+     *  Обработчик изменения номера
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement> | null, { value }: { value: string }) => void;
+
+    /**
+     * Обработчик блюра поля
+     */
+    onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+
+    /**
+     * Обработчик фокуса поля
+     */
+    onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
+};
+
+export type BaseInternationalPhoneInputProps = CommonPhoneInputProps & {
+    Input: FC<InputProps>;
+    InputAutocomplete: FC<InputAutocompleteProps>;
+    SelectComponent: ElementType;
+    view: 'desktop' | 'mobile';
+    countriesData: Country[][];
+} & Omit<InputProps, 'onFocus' | 'onBlur' | 'onScroll'> &
+    Partial<Omit<InputAutocompleteProps, 'onChange' | 'leftAddons' | 'onScroll'>>;
+
+export type InternationalPhoneInputDesktopProps = CommonPhoneInputProps &
+    (
+        | ({ options?: never } & Omit<
+              InputDesktopProps,
+              'onFocus' | 'onBlur' | 'clear' | 'onClear' | 'onChange'
+          >)
+        | ({ options: InputAutocompleteDesktopProps['options'] } & Omit<
+              InputAutocompleteDesktopProps,
+              'onChange'
+          >)
+    );
+
+export type InternationalPhoneInputMobileProps = CommonPhoneInputProps &
+    (
+        | ({ options?: never } & Omit<
+              InputMobileProps,
+              'onFocus' | 'onBlur' | 'clear' | 'onClear' | 'onChange'
+          >)
+        | ({ options: InputAutocompleteMobileProps['options'] } & Omit<
+              InputAutocompleteMobileProps,
+              'onChange' | 'onFilter' | 'filter' | 'onClearFilter'
+          >)
+    );
+
+export type InternationalPhoneInputProps = InternationalPhoneInputDesktopProps &
+    InternationalPhoneInputMobileProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+
+        /**
+         * Значение по-умолчанию для хука useMatchMedia
+         */
+        defaultMatchMediaValue?: boolean | (() => boolean);
+    };

package/src/utils/index.ts

@@ -0,0 +1,246 @@
+import type { MaskitoOptions } from '@maskito/core';
+
+import type { InputAutocompleteDesktopProps } from '@alfalab/core-components-input-autocomplete/desktop';
+import { GroupShape, isGroup, OptionShape } from '@alfalab/core-components-select/shared';
+import { maskUtils } from '@alfalab/core-components-shared';
+
+import { DEFAULT_PHONE_FORMAT } from '../consts';
+import { countriesData } from '../data/country-data';
+import type { AreaItem, Country } from '../types';
+
+export function initCountries(iso2s?: string[]) {
+    const filteredCountriesData = Array.isArray(iso2s)
+        ? countriesData.filter((country) => iso2s.includes(country[2]))
+        : countriesData;
+
+    return filteredCountriesData.map((country) => {
+        const countryItem: Country = {
+            name: country[0],
+            regions: country[1],
+            iso2: country[2],
+            countryCode: country[3],
+            dialCode: country[3],
+            format: country[4],
+            priority: country[5] || 0,
+        };
+
+        const areaItems: AreaItem[] = [];
+
+        if (country[6]) {
+            country[6]?.forEach((areaCode) => {
+                const areaItem: Partial<AreaItem> = { ...countryItem };
+
+                areaItem.dialCode = country[3] + areaCode;
+                areaItem.isAreaCode = true;
+                areaItem.areaCodeLength = areaCode.length;
+
+                areaItems.push(areaItem as AreaItem);
+            });
+        }
+
+        if (areaItems.length > 0) {
+            countryItem.mainCode = true;
+
+            return [countryItem, ...areaItems];
+        }
+
+        return [countryItem];
+    });
+}
+
+export function findCountry(
+    countries: Country[][],
+    value?: string,
+    iso2?: string,
+    country?: Country,
+) {
+    if (country) return country;
+
+    if (value) {
+        const inputNumber = clearMask(value);
+        const nextCountry = guessCountry(inputNumber, countries);
+
+        if (nextCountry) return nextCountry;
+    }
+
+    if (!iso2) return undefined;
+
+    return countries.find((c) => c[0].iso2 === iso2)?.[0];
+}
+
+export function guessCountry(inputNumber: string, data: Country[][]) {
+    const inputNumberDialCode = inputNumber.slice(0, 6);
+    const result = data.reduce((selectedCountry, countryData) => {
+        let guess;
+
+        countryData.forEach((country) => {
+            if (inputNumberDialCode.startsWith(country.dialCode)) {
+                const selectedCountryDialCode = selectedCountry?.dialCode || '';
+                const selectedCountryPriority = selectedCountry?.priority || 100;
+
+                if (country.dialCode.length > selectedCountryDialCode.length) {
+                    guess = country;
+                }
+
+                if (
+                    country.dialCode.length === selectedCountryDialCode.length &&
+                    country.priority < selectedCountryPriority
+                ) {
+                    guess = country;
+                }
+            }
+        });
+
+        return guess || selectedCountry;
+    }, undefined as Country | undefined);
+
+    if (!result && inputNumber.length > 5 && inputNumber.startsWith('8'))
+        return data.find((countryData) => countryData[0].iso2 === 'ru')?.[0];
+
+    return result;
+}
+
+export function clearMask(value: string) {
+    return value.replace(/\D/g, '');
+}
+
+function itemToMask(item: string) {
+    return item === '.' ? /\d/ : item;
+}
+
+function prepareDefaultFormat(countryCode?: string, clearableCountryCode?: boolean) {
+    if (!countryCode) return ['+', ...DEFAULT_PHONE_FORMAT.split('').map(itemToMask)];
+
+    const removeDots = (count: number) => {
+        let removed = 0;
+        let res = DEFAULT_PHONE_FORMAT;
+
+        while (removed < count) {
+            res = res.replace(/\./, '');
+            removed += 1;
+        }
+
+        return res.trim();
+    };
+
+    if (clearableCountryCode) {
+        return [
+            '+',
+            ...countryCode.split('').map(() => /\d/),
+            ' ',
+            ...removeDots(countryCode.length).split('').map(itemToMask).reverse(),
+        ];
+    }
+
+    return [
+        '+',
+        ...countryCode.split(''),
+        ' ',
+        ...removeDots(countryCode.length).split('').map(itemToMask).reverse(),
+    ];
+}
+
+export function createPhoneMaskExpression(
+    country?: Country,
+    clearableCountryCode?: boolean,
+): Array<RegExp | string> {
+    const { countryCode, format } = country || {};
+
+    if (!countryCode || !format) {
+        return prepareDefaultFormat(countryCode, clearableCountryCode);
+    }
+
+    return [
+        '+',
+        ...(clearableCountryCode ? countryCode.split('').map(() => /\d/) : countryCode.split('')),
+        ' ',
+        ...format.split('').map((item) => (item === '.' ? /\d/ : item)),
+    ];
+}
+
+export function createMaskOptions(
+    country?: Country,
+    clearableCountryCode?: boolean,
+): MaskitoOptions {
+    const prefixLen =
+        !clearableCountryCode && country?.countryCode ? country.countryCode.length + 1 : 0;
+
+    const mask = createPhoneMaskExpression(country, clearableCountryCode);
+
+    return {
+        mask,
+        preprocessors: [
+            maskUtils.insertionPhonePreprocessor(mask, country?.countryCode, clearableCountryCode),
+        ],
+        postprocessors: [
+            maskUtils.prefixPostprocessor(prefixLen ? `+${country?.countryCode}` : ''),
+        ],
+        plugins: [
+            maskUtils.caretGuard((value, [from, to]) => [
+                from === to ? prefixLen : 0,
+                value.length,
+            ]),
+        ],
+    };
+}
+
+function defaultFilterFn(value = '', option: OptionShape) {
+    return clearMask(option.key).includes(clearMask(value));
+}
+
+export const filterPhones = (
+    value = '',
+    options?: InputAutocompleteDesktopProps['options'],
+    filterFn = defaultFilterFn,
+) => {
+    if (!options || options.length === 0) return options;
+
+    const filteredOptions: InputAutocompleteDesktopProps['options'] = [];
+
+    options.forEach((option) => {
+        if (isGroup(option)) {
+            const group: GroupShape = {
+                ...option,
+                options: [],
+            };
+
+            option.options.forEach((groupOption) => {
+                if (filterFn(value, groupOption)) group.options.push(groupOption);
+            });
+
+            if (group.options.length) filteredOptions.push(group);
+        } else if (filterFn(value, option)) filteredOptions.push(option);
+    });
+
+    return filteredOptions;
+};
+
+export function getPhoneData(phone: string, countries: Country[][], defaultIso2?: string) {
+    let nextPhone = phone;
+    const inputNumber = clearMask(nextPhone);
+    const nextCountry = findCountry(countries, phone, defaultIso2);
+
+    if (nextCountry?.iso2 === 'ru' && inputNumber.length > 5 && inputNumber.startsWith('8')) {
+        nextPhone = phone.replace(/\+?8/, '+7');
+    }
+
+    return {
+        nextPhone,
+        nextCountry,
+    };
+}
+
+export function getClear(
+    clear?: boolean,
+    clearableCountryCode?: boolean,
+    value = '',
+    countryCode = '',
+) {
+    if (!clear) return clear;
+
+    const trimmedValue = value.trim();
+
+    return clearableCountryCode
+        ? trimmedValue !== '' && trimmedValue !== '+'
+        : trimmedValue.length > countryCode.length + 1;
+}

package/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };

package/types-72dda473.d.ts

@@ -0,0 +1,276 @@
+/// <reference types="react-transition-group" />
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { HandledEvents } from 'react-swipeable/es/types';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     */
+    disableFocusLock?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: Array<number | string>;
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
+    /**
+     * Вызывается в начале свайпа
+     */
+    onSwipeStart?: (event: HandledEvents) => void;
+    /**
+     * Вызывается после окончания свайпа
+     */
+    onSwipeEnd?: (event: HandledEvents | null) => void;
+};
+export { BottomSheetTitleAlign, BottomSheetProps };