@cloud-ru/uikit-product-fields-predefined 0.13.3

package/src/components/FieldChat/components/Attachments/Attachments.tsx

@@ -0,0 +1,32 @@
+import { Attachment, AttachmentSquare, AttachmentSquareProps } from '@snack-uikit/attachment';
+import { Scroll } from '@snack-uikit/scroll';
+
+import styles from './styles.module.scss';
+
+export type AttachmentsProps = {
+  files: AttachmentSquareProps[];
+  isMobile?: boolean;
+};
+
+export function Attachments({ files, isMobile }: AttachmentsProps) {
+  if (!files.length) {
+    return null;
+  }
+
+  const AttachmentComponent = isMobile ? Attachment : AttachmentSquare;
+
+  return (
+    <Scroll>
+      <div className={styles.attachments}>
+        {files.map((file, index) => (
+          <AttachmentComponent
+            key={file.file?.name || index}
+            size='s'
+            {...file}
+            className={isMobile ? styles.attachment : undefined}
+          />
+        ))}
+      </div>
+    </Scroll>
+  );
+}

package/src/components/FieldChat/components/Attachments/index.ts

@@ -0,0 +1 @@
+export * from './Attachments';

package/src/components/FieldChat/components/Attachments/styles.module.scss

@@ -0,0 +1,9 @@
+.attachments {
+  display: flex;
+  gap: 8px;
+  padding: 1px 0;
+}
+
+.attachment {
+  min-width: 256px;
+}

package/src/components/FieldChat/index.ts

@@ -0,0 +1 @@
+export * from './FieldChat';

package/src/components/FieldChat/styles.module.scss

@@ -0,0 +1,13 @@
+.fieldChat {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+
+  &[data-layout-type='mobile'] {
+    gap: 7px;
+  }
+}
+
+.uploadTooltip {
+  display: flex;
+}

package/src/components/FieldPhone/FieldPhone.tsx

@@ -0,0 +1,226 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { ClipboardEventHandler, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useIMask } from 'react-imask';
+
+import { AdaptiveDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { AdaptiveFieldText, FieldTextProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { PLACEHOLDER_CHAR } from './constants';
+import { useCountries } from './hooks';
+import styles from './styles.module.scss';
+import { CountrySettings, FieldPhoneOptionsProps, MaskOptions } from './types';
+import { detectCountryByPhone } from './utils';
+
+export type FieldPhoneProps = WithLayoutType<
+  Omit<
+    FieldTextProps,
+    | 'prefix'
+    | 'prefixIcon'
+    | 'postfix'
+    | 'placeholder'
+    | 'autocomplete'
+    | 'decoratorRef'
+    | 'allowMoreThanMaxLength'
+    | 'onKeyDown'
+    | 'button'
+    | 'maxLength'
+    | 'inputMode'
+  > & {
+    /** Включить скролл для основной части списка стран */
+    scrollList?: boolean;
+    onChange?(value: string): void;
+    searchPlaceholder?: string;
+    onChangeCountry?(country: FieldPhoneOptionsProps): void;
+  } & {
+    /** options — объект конфигурации для изменения стандартного списка стран */
+    options?: CountrySettings;
+  }
+>;
+
+export const FieldPhone = forwardRef<HTMLInputElement, FieldPhoneProps>(
+  (
+    {
+      value: valueProp,
+      onChangeCountry,
+      onChange: onChangeProp,
+      showClearButton = true,
+      searchPlaceholder,
+      onPaste,
+      className,
+      scrollList,
+      options: optionsProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+
+    const localRef = useRef<HTMLInputElement>(null);
+
+    const options = useCountries(optionsProp);
+    const isOnlyOneCountryAvailable = options.length === 1;
+
+    const [country, setCountry] = useValueControl<FieldPhoneOptionsProps>({
+      defaultValue: options[0],
+      onChange: onChangeCountry,
+    });
+
+    const [dropdownSearch, setDropDownSearch] = useState('');
+
+    const items = useMemo(() => {
+      if (dropdownSearch.length) {
+        return options.filter(opt =>
+          [opt.content.option, opt.content.caption].some(val =>
+            String(val).toLowerCase().includes(dropdownSearch.toLowerCase()),
+          ),
+        );
+      }
+
+      return options;
+    }, [options, dropdownSearch]);
+
+    const maskOptions = useMemo<MaskOptions>(
+      () => ({
+        mask: country?.mask,
+        lazy: false,
+        placeholderChar: PLACEHOLDER_CHAR,
+        definitions: {
+          X: /[0-9]/,
+        },
+      }),
+      [country?.mask],
+    );
+
+    const {
+      ref: iMaskRef,
+      value: iMaskValue,
+      setValue,
+      unmaskedValue,
+    } = useIMask<HTMLInputElement>(maskOptions, {
+      onAccept: (_: string, 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);
+        }
+      },
+    });
+
+    useEffect(() => {
+      const requiredSymbols = country?.mask.replace(/[\D]/g, '');
+      const normalizedValue = valueProp?.replace((country?.content.caption ?? '') + requiredSymbols, '');
+
+      if (normalizedValue !== undefined && normalizedValue !== unmaskedValue) {
+        setValue(normalizedValue);
+      }
+      // need to trigger update only on valueProp change
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+
+    const updateMaskView = (value?: string) => {
+      setValue(value?.replaceAll(/\w/g, ' ') ?? '');
+    };
+
+    const handlePaste: ClipboardEventHandler<HTMLInputElement> = 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: string) => {
+      if (selectedOption && selectedOption !== country?.content.option) {
+        const selectedCountry = options.find(opt => opt.id === selectedOption);
+
+        updateMaskView(selectedCountry?.mask);
+        setCountry(selectedCountry);
+      }
+
+      setTimeout(() => localRef.current?.focus(), 500);
+    };
+
+    const handleChange = (value: string) => {
+      // needed only to clear value by clicking on clear button
+      if (unmaskedValue && !value) {
+        updateMaskView(country?.mask);
+        localRef.current?.focus();
+      }
+    };
+
+    const showClear = showClearButton && Boolean(unmaskedValue);
+
+    return (
+      <AdaptiveFieldText
+        {...rest}
+        inputMode='tel'
+        data-test-id='field-phone'
+        type='tel'
+        ref={mergeRefs(ref, localRef, iMaskRef)}
+        className={cn(className, styles.fieldPhone)}
+        data-empty={!unmaskedValue || undefined}
+        value={iMaskValue}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        showClearButton={showClear}
+        prefix={country?.content.caption}
+        button={
+          isOnlyOneCountryAvailable
+            ? undefined
+            : {
+                variant: 'before',
+                hasArrow: true,
+                arrowOpen: open,
+                wrapper: button => (
+                  <div role='presentation' onClick={e => e.stopPropagation()}>
+                    <AdaptiveDroplist
+                      onOpenChange={setOpen}
+                      closeDroplistOnItemClick
+                      layoutType={rest.layoutType}
+                      items={items}
+                      selection={{ mode: 'single', onChange: handleChangeSelection, value: country?.id }}
+                      scroll={scrollList}
+                      search={{
+                        value: dropdownSearch,
+                        onChange: setDropDownSearch,
+                        placeholder: searchPlaceholder,
+                      }}
+                    >
+                      {button}
+                    </AdaptiveDroplist>
+                  </div>
+                ),
+                content: country?.beforeContent,
+              }
+        }
+      />
+    );
+  },
+);

package/src/components/FieldPhone/__tests__/constants.ts

@@ -0,0 +1,26 @@
+export const phoneFormatCases = [
+  { country: 'Russia', input: '+79878887879', expected: '+7 987 888-78-79' },
+  { country: 'Russia', input: '+7987****875', expected: '+7 987 ***-*8-75' },
+  { country: 'Belarus', input: '+375129876543', expected: '+375 12 987-65-43' },
+  { country: 'Kazakhstan', input: '+79878887879', expected: '+7 987 888-78-79' },
+  { country: 'Armenia', input: '+37412987654', expected: '+374 12 987-654' },
+  { country: 'Kyrgyzstan', input: '+996987888777', expected: '+996 987 888-777' },
+  { country: 'Georgia', input: '+995987888777', expected: '+995 987 88-87-77' },
+  { country: 'Brazil', input: '+5512345678901', expected: '+55 12 34567-8901' },
+  { country: 'India', input: '+911234567890', expected: '+91 12345-67890' },
+  { country: 'UnitedArabEmirates', input: '+971123456789', expected: '+971 12 345-6789' },
+  { country: 'SaudiArabia', input: '+966123456789', expected: '+966 1 2345-6789' },
+  { country: 'SouthAfrica', input: '+27123456789', expected: '+27 12 345-6789' },
+  { country: 'Egypt', input: '+201234567890', expected: '+20 12 3456-7890' },
+  { country: 'Iran', input: '+981234567890', expected: '+98 123 456-7890' },
+  { country: 'Ethiopia', input: '+251123456789', expected: '+251 12 345-6789' },
+  { country: 'Romania', input: '+40123456789', expected: '+40 12 345-6789' },
+  { country: 'Serbia', input: '+381123456789', expected: '+381 12 345-6789' },
+  { country: 'Netherlands', input: '+31123456789', expected: '+31 12 345-6789' },
+  { country: 'Azerbaijan', input: '+994123456789', expected: '+994 12 345-67-89' },
+  { country: 'Syria', input: '+963123456789', expected: '+963 12 345-6789' },
+  { country: 'Cyprus', input: '+35712345678', expected: '+357 12 345678' },
+  { country: 'Uzbekistan', input: '+998123456789', expected: '+998 12 345-67-89' },
+  { country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
+  { country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
+];

package/src/components/FieldPhone/__tests__/formatPhoneNumber.spec.ts

@@ -0,0 +1,15 @@
+import './matchMedia';
+
+import { describe, expect, it } from 'vitest';
+
+import { ALL_COUNTRY_CODES } from '../countries';
+import { formatPhoneNumber } from '../utils';
+import { phoneFormatCases } from './constants';
+
+describe('Checking the mask overlay for each number', () => {
+  phoneFormatCases.forEach(({ country, input, expected }) => {
+    it(`should format the number correctly for ${country}`, () => {
+      expect(formatPhoneNumber(input, ALL_COUNTRY_CODES)).toBe(expected);
+    });
+  });
+});

package/src/components/FieldPhone/__tests__/matchMedia.ts

@@ -0,0 +1,15 @@
+import { vi } from 'vitest';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});

package/src/components/FieldPhone/constants.ts

@@ -0,0 +1 @@
+export const PLACEHOLDER_CHAR = '_';