@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/dist/esm/components/FieldPhone/FieldPhone.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useIMask } from 'react-imask';
+import { TEST_IDS } from '../../constants.js';
+import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS } from './constants.js';
+import { useCountries } from './hooks/index.js';
+import styles from './styles.module.css';
+import { detectCountryByPhone, handleAutoInsert } from './utils.js';
+export const FieldPhone = forwardRef(function FieldPhone({ value: valueProp, onChangeCountry, onChange: onChangeProp, showClearButton = true, searchPlaceholder, onPaste, scrollList, options: optionsProp, className, autoFocus, ...rest }, ref) {
+    const localRef = useRef(null);
+    const { layoutType } = useAdaptiveLayout();
+    const isMobile = isMobileLayout(layoutType);
+    const options = useCountries(optionsProp);
+    const isOnlyOneCountryAvailable = options.length === 1;
+    const rawInsertRef = useRef('');
+    const insertSwitchRef = useRef(false);
+    const [country, setCountry] = useValueControl({
+        defaultValue: options[0],
+        onChange: onChangeCountry,
+    });
+    const [dropdownSearch, setDropDownSearch] = useState('');
+    const filteredOptions = useMemo(() => {
+        if (dropdownSearch.length) {
+            return options.filter(opt => [opt.content.label, opt.content.caption].some(val => String(val).toLowerCase().includes(dropdownSearch.toLowerCase())));
+        }
+        return options;
+    }, [options, dropdownSearch]);
+    const items = useMemo(() => filteredOptions.map(opt => ({
+        id: opt.id,
+        beforeContent: opt.beforeContent,
+        content: { label: opt.content.label, caption: opt.content.caption },
+    })), [filteredOptions]);
+    const maskOptions = useMemo(() => ({
+        mask: country?.mask,
+        lazy: false,
+        placeholderChar: PLACEHOLDER_CHAR,
+        definitions: {
+            X: /[0-9]/,
+        },
+        prepare: (str) => {
+            if (str.replace(/\D/g, '').length > 1) {
+                rawInsertRef.current = str;
+            }
+            return str;
+        },
+    }), [country?.mask]);
+    const clearRaw = () => {
+        rawInsertRef.current = '';
+    };
+    const markSwitchRef = () => {
+        insertSwitchRef.current = true;
+    };
+    const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = useIMask(maskOptions, {
+        onAccept: (_, maskRef) => {
+            const unmasked = maskRef.unmaskedValue;
+            const requiredSymbols = country?.mask.replace(/[\D]/g, '');
+            const value = unmasked.length ? `${country?.content.caption}${requiredSymbols}${unmasked}` : '';
+            if (value !== valueProp) {
+                onChangeProp?.(value);
+            }
+            if (insertSwitchRef.current) {
+                insertSwitchRef.current = false;
+                return;
+            }
+            handleAutoInsert({
+                raw: rawInsertRef.current,
+                onValueChange: value => {
+                    setTimeout(() => setValue(value), 0);
+                },
+                onCountryChange: country => {
+                    markSwitchRef();
+                    clearRaw();
+                    setCountry(country);
+                },
+                country,
+                options,
+            });
+        },
+    });
+    useEffect(() => {
+        const requiredSymbols = country?.mask.replace(/[\D]/g, '');
+        const normalizedValue = valueProp?.replace((country?.content.caption ?? '') + requiredSymbols, '');
+        if (normalizedValue !== undefined && normalizedValue !== unmaskedValue) {
+            setValue(normalizedValue);
+        }
+        // нужно реагировать только на изменение valueProp
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    const updateMaskView = (value) => {
+        setValue(value?.replaceAll(/\w/g, ' ') ?? '');
+    };
+    const handlePaste = e => {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text') || '';
+        const newCountry = detectCountryByPhone(text, options);
+        const isCountryChanged = newCountry && newCountry.id !== country?.id;
+        const currentCountry = isCountryChanged ? newCountry : country;
+        const prefixNumber = (currentCountry?.content.caption ?? '').replace('+', '');
+        const prefixNumberWithOptionalPlus = RegExp(`^(\\+?${prefixNumber})`);
+        const valueWithoutPrefix = text.replace(prefixNumberWithOptionalPlus, '');
+        // костыль, чтобы всегда срабатывала маска
+        const newValue = `+${valueWithoutPrefix}`;
+        if (isCountryChanged) {
+            setCountry(newCountry);
+            updateMaskView(newCountry.mask);
+            setTimeout(() => setValue(newValue), 0);
+        }
+        else {
+            setValue(newValue);
+        }
+        onPaste?.(e);
+    };
+    const handleChangeSelection = (selectedOption) => {
+        const selectedId = String(selectedOption);
+        if (selectedId && selectedId !== country?.id) {
+            const selectedCountry = options.find(opt => opt.id === selectedId);
+            updateMaskView(selectedCountry?.mask);
+            setCountry(selectedCountry);
+            // Desktop: вернуть каретку в поле после выбора; на mobile не фокусим — откроется клавиатура.
+            if (!isMobile) {
+                setTimeout(() => localRef.current?.focus(), REFOCUS_AFTER_COUNTRY_DELAY_MS);
+            }
+        }
+    };
+    const handleChange = (value) => {
+        // нужно только для сброса значения по клику на кнопку очистки
+        if (unmaskedValue && !value) {
+            updateMaskView(country?.mask);
+            // На mobile автофокус запрещён — он принудительно открывает экранную клавиатуру.
+            if (!isMobile) {
+                localRef.current?.focus();
+            }
+        }
+    };
+    const showClear = showClearButton && Boolean(unmaskedValue);
+    return (_jsx(FieldCombo, { ...rest, inputMode: 'tel', type: 'tel', ref: mergeRefs(ref, localRef, iMaskRef), className: cn(className, styles.fieldPhone), "data-empty": !unmaskedValue || undefined, autoFocus: autoFocus, value: iMaskValue, onChange: handleChange, onPaste: handlePaste, showClearButton: showClear, prefix: country?.content.caption, elementBefore: isOnlyOneCountryAvailable
+            ? undefined
+            : {
+                action: country?.beforeContent,
+                'data-test-id': TEST_IDS.fieldPhoneCountrySelect,
+                droplist: {
+                    items,
+                    selection: { mode: 'single', onChange: handleChangeSelection, value: country?.id },
+                    // Скролл включён по умолчанию — иначе список из ~158 стран рендерится без ограничения
+                    // высоты (Droplist форсит limitedScrollHeight, но контейнер-скролл появляется только при scroll).
+                    scroll: scrollList ?? true,
+                    scrollToSelectedItem: true,
+                    search: {
+                        value: dropdownSearch,
+                        onChange: setDropDownSearch,
+                        placeholder: searchPlaceholder,
+                    },
+                },
+            } }));
+});

package/dist/esm/components/FieldPhone/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const PLACEHOLDER_CHAR = "_";
+/**
+ * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
+ * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
+ */
+export declare const FLAG_ICON_SIZE = 24;
+/** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
+export declare const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/esm/components/FieldPhone/constants.js

@@ -0,0 +1,8 @@
+export const PLACEHOLDER_CHAR = '_';
+/**
+ * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
+ * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
+ */
+export const FLAG_ICON_SIZE = 24;
+/** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
+export const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;