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

package/src/components/base-international-phone-input/Component.tsx

@@ -0,0 +1,174 @@
+import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { maskitoTransform } from '@maskito/core';
+import { useMaskito } from '@maskito/react';
+
+import type { InputAutocompleteProps } from '@alfalab/core-components-input-autocomplete';
+import { BaseOption } from '@alfalab/core-components-select/shared';
+import type { BaseSelectChangePayload } from '@alfalab/core-components-select/typings';
+
+import type { BaseInternationalPhoneInputProps, Country } from '../../types';
+import { createMaskOptions, getPhoneData } from '../../utils';
+import { CountrySelect } from '../country-select';
+
+import styles from './index.module.css';
+
+export const BaseInternationalPhoneInput = forwardRef<
+    HTMLInputElement,
+    BaseInternationalPhoneInputProps
+>(
+    (
+        {
+            clearableCountryCode,
+            value,
+            country,
+            onChange,
+            onCountryChange,
+            countrySelectProps,
+            countries,
+            defaultIso2,
+            disabled,
+            options,
+            size = 'm',
+            Input,
+            InputAutocomplete,
+            SelectComponent,
+            view,
+            bottomSheetHeaderAddonsProps,
+            countriesData,
+            clear,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement>(null);
+        const inputWrapperRef = useRef<HTMLDivElement>(null);
+
+        const maskOptions = useMemo(
+            () => createMaskOptions(country, clearableCountryCode),
+            [country, clearableCountryCode],
+        );
+
+        const maskRef = useMaskito({ options: maskOptions });
+
+        const changeNumber = (e: ChangeEvent<HTMLInputElement> | null, phone: string) => {
+            onChange?.(e, { value: phone });
+        };
+
+        const updatePhoneData = (phone: string, e: ChangeEvent<HTMLInputElement> | null) => {
+            const { nextCountry, nextPhone } = getPhoneData(phone, countriesData, defaultIso2);
+
+            if (nextCountry !== country) {
+                onCountryChange?.(nextCountry);
+            }
+            changeNumber(e, nextPhone);
+        };
+
+        const handleSelectCountry = ({ selected }: BaseSelectChangePayload) => {
+            const nextCountry = selected?.value as Country;
+
+            onCountryChange?.(nextCountry);
+
+            if (nextCountry) {
+                changeNumber(null, `+${nextCountry.dialCode}`);
+            }
+
+            requestAnimationFrame(() => inputRef.current?.focus());
+        };
+
+        const handleOptionSelect = (payload: BaseSelectChangePayload | string) => {
+            updatePhoneData(
+                maskitoTransform(
+                    typeof payload === 'string' ? payload : payload.selected?.key || '',
+                    maskOptions,
+                ),
+                null,
+            );
+        };
+
+        const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+            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',
+        } as const;
+
+        const renderCountrySelect = () => (
+            <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) ? (
+            <InputAutocomplete
+                closeOnSelect={true}
+                Option={BaseOption}
+                size={size}
+                {...(restProps as InputAutocompleteProps)}
+                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(),
+                }}
+            />
+        ) : (
+            <Input
+                {...restProps}
+                {...inputProps}
+                onClear={clear ? handleClear : undefined}
+                clear={clear}
+                leftAddons={renderCountrySelect()}
+                size={size}
+                onInput={handleInput}
+                value={value}
+                disabled={disabled}
+            />
+        );
+    },
+);

package/src/components/base-international-phone-input/index.module.css

@@ -0,0 +1,5 @@
+.component {
+    & .addons {
+        padding-left: 0;
+    }
+}

package/src/components/base-international-phone-input/index.ts

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

package/src/components/country-select/Component.tsx

@@ -0,0 +1,120 @@
+import React, { ElementType, useCallback, useMemo } from 'react';
+
+import {
+    BaseOption,
+    BaseSelectProps,
+    OptionsListProps,
+    VirtualOptionsList,
+} from '@alfalab/core-components-select/shared';
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { WorldMagnifierMIcon } from '@alfalab/icons-glyph/WorldMagnifierMIcon';
+
+import { Country } from '../../types';
+import { FlagIcon } from '../flag-icon';
+import { EMPTY_COUNTRY_SELECT_FIELD, SelectField } from '../select-field';
+
+import styles from './index.module.css';
+
+export 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;
+};
+
+export const CountrySelect: React.FC<CountrySelectProps> = ({
+    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: (
+                        <span className={styles.option}>
+                            <FlagIcon country={iso2} className={styles.flag} />
+
+                            <span className={styles.optionTextWrap}>
+                                <span className={styles.countryName}>{name}</span>
+                                <span className={styles.dialCode}>+{dialCode}</span>
+                            </span>
+                        </span>
+                    ),
+                };
+            }) || [],
+        [countries],
+    );
+
+    const renderOptionsList = useCallback(
+        (props: OptionsListProps) => (
+            <div style={{ width: fieldWidth || 0 }}>
+                <VirtualOptionsList {...props} optionsListWidth='field' />
+            </div>
+        ),
+        [fieldWidth],
+    );
+
+    const renderFlagIcon = () => (
+        <span className={styles.flagIconWrapper}>
+            {country?.iso2 ? (
+                <FlagIcon country={country.iso2} />
+            ) : (
+                <WorldMagnifierMIcon className={styles.emptyCountryIcon} />
+            )}
+        </span>
+    );
+
+    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
+            <div className={styles.component} onClick={(event) => event.stopPropagation()}>
+                <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: 'Выберите страну',
+                        },
+                    })}
+                />
+            </div>
+        );
+    };
+
+    return hideCountrySelect || options.length < 2 ? renderFlagIcon() : renderCountrySelect();
+};

package/src/components/country-select/index.module.css

@@ -0,0 +1,40 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    position: static;
+    display: flex;
+    min-width: initial;
+    height: 100%;
+}
+
+.option {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--gap-s);
+}
+
+.flag {
+    flex-shrink: 0;
+    margin-right: var(--gap-xs);
+}
+
+.countryName {
+    margin-right: var(--gap-xs);
+}
+
+.dialCode {
+    color: var(--text-secondary-color);
+}
+
+.flagIconWrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-s);
+}
+
+.emptyCountryIcon {
+    color: var(--color-light-graphic-secondary);
+}

package/src/components/country-select/index.ts

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

package/src/components/flag-icon/component.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { flagSprite } from './flagSprite';
+
+import styles from './index.module.css';
+
+export 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;
+};
+
+/**
+ * Компонент флага в виде иконки.
+ */
+export const FlagIcon: FC<FlagIconProps> = ({ country = '', className }) =>
+    flagSprite[country] ? (
+        <span
+            className={cn(styles.flagIcon, className)}
+            data-test-id={`flag-icon-${country}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: flagSprite[country] }}
+        />
+    ) : (
+        <div className={cn(styles.flagPlaceholder, className)} />
+    );