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

package/modern/components/base-international-phone-input/Component.js

@@ -0,0 +1,91 @@
+import React, { forwardRef, useRef, useMemo, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { maskitoTransform } from '@maskito/core';
+import { useMaskito } from '@maskito/react';
+import { BaseOption } from '@alfalab/core-components-select/modern/shared';
+import { createMaskOptions, getPhoneData } from '../../utils/index.js';
+import { CountrySelect } from '../country-select/Component.js';
+import '@alfalab/core-components-shared/modern';
+import '../../consts.js';
+import '../../data/country-data.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../select-field/component.js';
+import '@alfalab/hooks';
+
+const styles = {"component":"international-phone-input__component_18u8d","addons":"international-phone-input__addons_18u8d"};
+require('./index.css')
+
+const BaseInternationalPhoneInput = forwardRef(({ clearableCountryCode, value, country, onChange, onCountryChange, countrySelectProps, countries, defaultIso2, disabled, options, size = 'm', Input, InputAutocomplete, SelectComponent, view, bottomSheetHeaderAddonsProps, countriesData, clear, ...restProps }, ref) => {
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const maskOptions = useMemo(() => createMaskOptions(country, clearableCountryCode), [country, clearableCountryCode]);
+    const maskRef = useMaskito({ options: maskOptions });
+    const changeNumber = (e, phone) => {
+        onChange?.(e, { value: phone });
+    };
+    const updatePhoneData = (phone, e) => {
+        const { nextCountry, nextPhone } = getPhoneData(phone, countriesData, defaultIso2);
+        if (nextCountry !== country) {
+            onCountryChange?.(nextCountry);
+        }
+        changeNumber(e, nextPhone);
+    };
+    const handleSelectCountry = ({ selected }) => {
+        const nextCountry = selected?.value;
+        onCountryChange?.(nextCountry);
+        if (nextCountry) {
+            changeNumber(null, `+${nextCountry.dialCode}`);
+        }
+        requestAnimationFrame(() => inputRef.current?.focus());
+    };
+    const handleOptionSelect = (payload) => {
+        updatePhoneData(maskitoTransform(typeof payload === 'string' ? payload : payload.selected?.key || '', maskOptions), null);
+    };
+    const handleInput = (e) => {
+        updatePhoneData(e.target.value, e);
+    };
+    const handleClear = () => {
+        if (clearableCountryCode) {
+            changeNumber(null, '');
+        }
+        else {
+            changeNumber(null, `+${country?.countryCode}` || '');
+        }
+    };
+    useEffect(() => {
+        if (value) {
+            const newValue = maskitoTransform(value, maskOptions);
+            if (value !== newValue) {
+                updatePhoneData(newValue, null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, maskOptions]);
+    const inputProps = {
+        className: styles.component,
+        ref: mergeRefs([maskRef, ref, inputRef]),
+        wrapperRef: inputWrapperRef,
+        addonsClassName: styles.addons,
+        type: 'tel',
+    };
+    const renderCountrySelect = () => (React.createElement(CountrySelect, { ...countrySelectProps, view: view, SelectComponent: SelectComponent, disabled: disabled || countrySelectProps?.disabled, onChange: handleSelectCountry, country: country, countries: countriesData, fieldWidth: inputWrapperRef.current?.getBoundingClientRect().width }));
+    return Array.isArray(options) ? (React.createElement(InputAutocomplete, { closeOnSelect: true, Option: BaseOption, size: size, ...restProps, disabled: disabled, options: options, value: value, onChange: handleOptionSelect, bottomSheetHeaderAddonsProps: {
+            ...bottomSheetHeaderAddonsProps,
+            ...inputProps,
+        }, inputProps: {
+            ...inputProps,
+            clear,
+            onClear: handleClear,
+            leftAddons: renderCountrySelect(),
+            onInput: handleInput,
+        }, fieldProps: {
+            className: inputProps.className,
+            addonsClassName: inputProps.addonsClassName,
+            leftAddons: renderCountrySelect(),
+        } })) : (React.createElement(Input, { ...restProps, ...inputProps, onClear: clear ? handleClear : undefined, clear: clear, leftAddons: renderCountrySelect(), size: size, onInput: handleInput, value: value, disabled: disabled }));
+});
+
+export { BaseInternationalPhoneInput };

package/modern/components/base-international-phone-input/index.css

@@ -0,0 +1,5 @@
+/* hash: oxfst */
+
+    .international-phone-input__component_18u8d .international-phone-input__addons_18u8d {
+        padding-left: 0;
+    }

package/modern/components/base-international-phone-input/index.d.ts

@@ -0,0 +1 @@
+export { BaseInternationalPhoneInput } from "./Component";

package/modern/components/base-international-phone-input/index.js

@@ -0,0 +1,17 @@
+export { BaseInternationalPhoneInput } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import '@alfalab/core-components-select/modern/shared';
+import '../../utils/index.js';
+import '@alfalab/core-components-shared/modern';
+import '../../consts.js';
+import '../../data/country-data.js';
+import '../country-select/Component.js';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../select-field/component.js';
+import '@alfalab/hooks';

package/modern/components/country-select/Component.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from 'react';
+import { ElementType } from "react";
+import { BaseSelectProps } from "../../shared-4cd3936b";
+import { Country } from "../../types";
+type SharedCountrySelectProps = Omit<BaseSelectProps, 'fieldProps' | 'options' | 'Field' | 'OptionsList' | 'selected'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: Record<string, unknown>;
+    hideCountrySelect?: boolean;
+};
+type CountrySelectProps = SharedCountrySelectProps & {
+    countries?: Country[][];
+    country?: Country;
+    fieldWidth?: number;
+    view: 'desktop' | 'mobile';
+    SelectComponent: ElementType;
+};
+declare const CountrySelect: React.FC<CountrySelectProps>;
+export { SharedCountrySelectProps, CountrySelect };

package/modern/components/country-select/Component.js

@@ -0,0 +1,47 @@
+import React, { useMemo, useCallback } from 'react';
+import { VirtualOptionsList, BaseOption } from '@alfalab/core-components-select/modern/shared';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import { FlagIcon } from '../flag-icon/component.js';
+import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+
+const styles = {"component":"international-phone-input__component_g8rhr","option":"international-phone-input__option_g8rhr","flag":"international-phone-input__flag_g8rhr","countryName":"international-phone-input__countryName_g8rhr","dialCode":"international-phone-input__dialCode_g8rhr","flagIconWrapper":"international-phone-input__flagIconWrapper_g8rhr","emptyCountryIcon":"international-phone-input__emptyCountryIcon_g8rhr"};
+require('./index.css')
+
+const CountrySelect = ({ hideCountrySelect, countries, country, dataTestId, fieldWidth, onChange, view = 'desktop', SelectComponent, ...restProps }) => {
+    const options = useMemo(() => countries?.map((areas) => {
+        const { iso2, dialCode, name } = areas[0];
+        return {
+            key: iso2,
+            value: areas[0],
+            content: (React.createElement("span", { className: styles.option },
+                React.createElement(FlagIcon, { country: iso2, className: styles.flag }),
+                React.createElement("span", { className: styles.optionTextWrap },
+                    React.createElement("span", { className: styles.countryName }, name),
+                    React.createElement("span", { className: styles.dialCode },
+                        "+",
+                        dialCode)))),
+        };
+    }) || [], [countries]);
+    const renderOptionsList = useCallback((props) => (React.createElement("div", { style: { width: fieldWidth || 0 } },
+        React.createElement(VirtualOptionsList, { ...props, optionsListWidth: 'field' }))), [fieldWidth]);
+    const renderFlagIcon = () => (React.createElement("span", { className: styles.flagIconWrapper }, country?.iso2 ? (React.createElement(FlagIcon, { country: country.iso2 })) : (React.createElement(WorldMagnifierMIcon, { className: styles.emptyCountryIcon }))));
+    const renderCountrySelect = () => {
+        const selected = options.find((c) => c.key === country?.iso2)?.key;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        React.createElement("div", { className: styles.component, onClick: (event) => event.stopPropagation() },
+            React.createElement(SelectComponent, { Option: BaseOption, ...restProps, dataTestId: getDataTestId(dataTestId, 'country-select'), options: options, selected: selected || EMPTY_COUNTRY_SELECT_FIELD, onChange: onChange, Field: SelectField, OptionsList: view === 'mobile' ? VirtualOptionsList : renderOptionsList, ...(view === 'mobile' && {
+                    bottomSheetProps: {
+                        title: 'Выберите страну',
+                    },
+                }) })));
+    };
+    return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();
+};
+
+export { CountrySelect };

package/modern/components/country-select/index.css

@@ -0,0 +1,47 @@
+/* hash: 1hqzw */
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-secondary: #86868a;
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+} :root {
+} :root {
+    --text-secondary-color: var(--color-light-text-secondary);
+} .international-phone-input__component_g8rhr {
+    position: static;
+    display: flex;
+    min-width: initial;
+    height: 100%;
+} .international-phone-input__option_g8rhr {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--gap-s);
+} .international-phone-input__flag_g8rhr {
+    flex-shrink: 0;
+    margin-right: var(--gap-xs);
+} .international-phone-input__countryName_g8rhr {
+    margin-right: var(--gap-xs);
+} .international-phone-input__dialCode_g8rhr {
+    color: var(--text-secondary-color);
+} .international-phone-input__flagIconWrapper_g8rhr {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+} .international-phone-input__emptyCountryIcon_g8rhr {
+    color: var(--color-light-graphic-secondary);
+}

package/modern/components/country-select/index.d.ts

@@ -0,0 +1 @@
+export { CountrySelect, SharedCountrySelectProps } from "./Component";

package/modern/components/country-select/index.js

@@ -0,0 +1,11 @@
+export { CountrySelect } from './Component.js';
+import 'react';
+import '@alfalab/core-components-select/modern/shared';
+import '@alfalab/core-components-shared/modern';
+import '@alfalab/icons-glyph/WorldMagnifierMIcon';
+import '../flag-icon/component.js';
+import 'classnames';
+import '../flag-icon/flagSprite.js';
+import '../select-field/component.js';
+import 'react-merge-refs';
+import '@alfalab/hooks';

package/modern/components/flag-icon/component.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+type FlagIconProps = {
+    /**
+     * Код страны из <a href="https://ru.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank">ISO 3166-1 alpha-2</a>
+     */
+    country?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+/**
+ * Компонент флага в виде иконки.
+ */
+declare const FlagIcon: FC<FlagIconProps>;
+export { FlagIconProps, FlagIcon };

package/modern/components/flag-icon/component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import { flagSprite } from './flagSprite.js';
+
+const styles = {"flagIcon":"international-phone-input__flagIcon_1xrmt","flagPlaceholder":"international-phone-input__flagPlaceholder_1xrmt"};
+require('./index.css')
+
+/**
+ * Компонент флага в виде иконки.
+ */
+const FlagIcon = ({ country = '', className }) => flagSprite[country] ? (React.createElement("span", { className: cn(styles.flagIcon, className), "data-test-id": `flag-icon-${country}`, 
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: { __html: flagSprite[country] } })) : (React.createElement("div", { className: cn(styles.flagPlaceholder, className) }));
+
+export { FlagIcon };

package/modern/components/flag-icon/flagSprite.d.ts

@@ -0,0 +1,2 @@
+declare const flagSprite: Record<string, string>;
+export { flagSprite };