@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,223 @@
+import { FC, useState, useRef, useMemo } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '../Icon';
+import { Flag } from '../Flag';
+import {
+  useOnClickOutsideWithRef,
+  useTheme,
+  useTweakStyles,
+} from '../../hooks';
+import { IInputProps, Input } from '../Input';
+import {
+  getCountryCodeFromPhone,
+  getFullPhone,
+  getPhoneMask,
+  getPhoneObjFromString,
+  findCountryByCode,
+} from '../../helpers';
+import { PhoneInputCountryList } from './PhoneInputCountryList';
+import { IPhoneInfo, IPhoneValue } from './types';
+
+import { PhoneInputStyles, styles } from './PhoneInput.styles';
+
+export interface IPhoneInputProps
+  extends Omit<
+    IInputProps,
+    'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'
+  > {
+  tweakStyles?: PhoneInputStyles;
+  locale?: string;
+  codeSearchPlaceholder?: string;
+  noMatchesLabel?: string;
+  value?: IPhoneValue;
+  onChange: (
+    phone: IPhoneValue,
+    event: React.MouseEvent | KeyboardEvent | React.FormEvent<HTMLInputElement>,
+  ) => void;
+}
+
+const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };
+
+export const PhoneInput: FC<IPhoneInputProps> = ({
+  locale = 'ru',
+  value = DEFAULT_VALUE,
+  onChange,
+  testId,
+  isDisabled,
+  isInvalid,
+  isActive,
+  tweakStyles,
+  codeSearchPlaceholder = 'Поиск',
+  noMatchesLabel = 'Ничего не найдено',
+  ...inputProps
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'PhoneInput',
+    styles,
+    tweakStyles,
+  );
+
+  const list = useRef<HTMLDivElement>(null);
+  const inputWrapper = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+
+  const phoneWithCode = getFullPhone(value);
+
+  const countryCode = useMemo(
+    () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
+    [value.dialCode, value.phoneNumber],
+  );
+
+  const handleClose = () => {
+    setIsListOpen(false);
+  };
+
+  const handleChange = (
+    inputValue: string,
+    event: React.FormEvent<HTMLInputElement>,
+  ) => {
+    // if (event.type === 'change') - нужно из-за InputMask
+    // Помимо change, еще могут приходить focus и blur, когда input пустой и тогда происходят неприятные сайд-эффекты
+    if (event.type === 'change') {
+      const newValue = inputValue.replace(/[^0-9]/g, '');
+      let selectedCountryCode = countryCode;
+
+      const selectedCountry = findCountryByCode(countryCode);
+
+      // Проверяем введенный номер на соответствие с selectedCountry
+      // Если не соответствует, то пытаемся найти countryCode, для которой
+      // данный номер будет валидным (функция getPhoneObjFromString)
+      if (selectedCountry !== undefined) {
+        // Сначала проверяем, что введенный телефон удовлетворяет одному
+        // из fullCode для выбранной страны
+        const isSomeFullCodeValid = selectedCountry.fullCodes.some(
+          (fullCode) => {
+            if (newValue.length >= fullCode.length) {
+              return newValue.startsWith(fullCode);
+            } else {
+              return fullCode.startsWith(newValue);
+            }
+          },
+        );
+
+        // После проверяем, что введенный телефон удовлетворяет dialCode для выбранной страны
+        const isDialCodeValid = newValue.startsWith(selectedCountry.dialCode);
+
+        if (!isSomeFullCodeValid || !isDialCodeValid) {
+          selectedCountryCode = undefined;
+        }
+      }
+
+      onChange(getPhoneObjFromString(newValue, selectedCountryCode), event);
+    }
+  };
+
+  const handleSelect = (
+    newPhoneInfo: IPhoneInfo,
+    event: React.MouseEvent | KeyboardEvent,
+  ) => {
+    if (newPhoneInfo.countryCode !== countryCode) {
+      onChange(
+        {
+          phoneNumber: '',
+          dialCode: newPhoneInfo.dialCode,
+          countryCode: newPhoneInfo.countryCode,
+        },
+        event,
+      );
+    }
+    handleClose();
+
+    const input = inputRef?.current;
+    if (input !== null) {
+      input.focus();
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    if (inputProps.onFocus !== undefined) {
+      inputProps?.onFocus(event);
+    }
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setFocused(false);
+    if (inputProps.onBlur !== undefined) {
+      inputProps?.onBlur(event);
+    }
+  };
+
+  useOnClickOutsideWithRef(list, handleClose, inputWrapper);
+
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  const tweakCountryListStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakCountryList',
+  );
+
+  return (
+    <div className={classes.root} data-testid={testId}>
+      <div
+        className={clsx(classes.countrySelectContainer, {
+          [classes.disabledCountrySelect]: isDisabled,
+          [classes.invalidBorder]: isInvalid,
+          [classes.focusedBorder]: isActive || isListOpen || isFocused,
+        })}
+        ref={inputWrapper}
+        onClick={!isDisabled ? () => setIsListOpen(!isListOpen) : undefined}
+      >
+        <div className={classes.flag}>
+          <Flag countryCode={countryCode} />
+        </div>
+        <div
+          className={clsx(classes.arrow, {
+            [classes.up]: isListOpen,
+            [classes.invalidArrow]: isInvalid,
+          })}
+        >
+          <Icon type="chevron-down" />
+        </div>
+      </div>
+
+      <Input
+        onChange={handleChange}
+        value={phoneWithCode}
+        mask={getPhoneMask(countryCode)}
+        // alwaysShowMask={false}
+        ref={inputRef}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isActive={isListOpen || isActive}
+        testId={testId !== undefined ? `${testId}-input` : undefined}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        tweakStyles={tweakInputStyles}
+        {...inputProps}
+      />
+
+      {isListOpen && (
+        <div className={classes.flagListContainer} ref={list}>
+          <PhoneInputCountryList
+            selectedCountryCode={countryCode}
+            placeholder={codeSearchPlaceholder}
+            onChange={handleSelect}
+            closeList={handleClose}
+            locale={locale}
+            tweakStyles={tweakCountryListStyles}
+            noMatchesLabel={noMatchesLabel}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import PhoneInputCountryList from './PhoneInputCountryList';
+
+export default {
+  title: 'Inputs/PhoneInput/PhoneInputCountryList',
+  component: PhoneInputCountryList,
+  args: {
+    locale: 'ru',
+    placeholder: 'Поиск',
+    noMatchesLabel: 'Ничего не найдено',
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId'],
+    },
+  },
+} as ComponentMeta<typeof PhoneInputCountryList>;
+
+export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
+  <PhoneInputCountryList {...args} />
+);

package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -0,0 +1,100 @@
+import { colors, dimensions, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 10;
+
+export const styles = {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    border: [1, 'solid', colors.BORDER_MAIN],
+    boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.25)',
+    overflow: 'hidden',
+  },
+
+  searchContainer: {
+    width: '100%',
+    height: dimensions.CONTROL_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    padding: [0, 8, 0, 16],
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+  },
+
+  searchIcon: {
+    extend: 'icon',
+    color: colors.FONT_LABEL,
+    flexShrink: 0,
+  },
+
+  flagList: {
+    maxHeight: ROW_HEIGHT * 6 + 2 * LIST_PADDING,
+    padding: [LIST_PADDING, 0],
+    ...helpers.withScrollBar,
+  },
+
+  listItem: {
+    height: ROW_HEIGHT,
+    padding: [12, 16],
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+  },
+
+  selectedCountry: {
+    backgroundColor: colors.GREY_BACKGROUND,
+  },
+
+  activeCountry: {
+    backgroundColor: colors.GREY_FOCUS,
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+    flexShrink: 0,
+  },
+
+  countryName: {
+    color: colors.FONT_MAIN,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    margin: [0, 8, 0, 12],
+  },
+
+  dialCode: {
+    color: colors.GREY_ACTIVE,
+  },
+
+  emptyResult: {
+    color: colors.FONT_LABEL,
+    padding: [6, 16],
+  },
+
+  tweakInput: {
+    inputWrapper: {
+      border: 'none',
+      height: 'calc(var(--control-height) - 2px)',
+    },
+
+    input: {
+      fontSize: 14,
+      lineHeight: '20px',
+      letterSpacing: 0.15,
+    },
+  },
+};
+
+export type PhoneInputCountryListStyles = ComponentStyles<typeof styles>;

package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -0,0 +1,171 @@
+import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import { Flag } from '../../Flag';
+import { Icon } from '../../Icon';
+import { Input } from '../../Input';
+import { phoneInfo } from '../phone-info';
+import { useTheme, useTweakStyles } from '../../../hooks';
+import {
+  checkSearchStringInCountry,
+  getCountryTextByLocale,
+  findCountryIndexByCode,
+  sortCountriesByLocale,
+} from '../../../helpers';
+import { ICommonProps } from '../../../types';
+import { IPhoneInfo } from '../types';
+
+import {
+  PhoneInputCountryListStyles,
+  styles,
+} from './PhoneInputCountryList.styles';
+
+export interface IPhoneInputCountryListProps extends ICommonProps {
+  tweakStyles?: PhoneInputCountryListStyles;
+  selectedCountryCode?: string;
+  locale: string;
+  placeholder: string;
+  noMatchesLabel: string;
+  closeList(): void;
+  onChange(country: IPhoneInfo, event: MouseEvent | KeyboardEvent): void;
+}
+
+export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
+  locale,
+  placeholder,
+  selectedCountryCode,
+  closeList,
+  noMatchesLabel,
+  onChange,
+  tweakStyles,
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'PhoneInputCountryList',
+    styles,
+    tweakStyles,
+  );
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  const sortedCountries = useMemo(
+    () => sortCountriesByLocale(phoneInfo, locale),
+    [phoneInfo, locale],
+  );
+
+  const selectedCountryIdx = findCountryIndexByCode(
+    selectedCountryCode,
+    sortedCountries,
+  );
+
+  const [searchValue, setSearchValue] = useState('');
+  const [countriesList, setCountriesList] = useState(sortedCountries);
+  const [keyCursorOn, setKeyCursorOn] = useState(
+    selectedCountryIdx !== -1 ? selectedCountryIdx : 0,
+  );
+
+  const handleSearchChange = (newSearchValue: string) => {
+    const newCountriesList = sortedCountries.filter((country) =>
+      checkSearchStringInCountry(country, newSearchValue),
+    );
+
+    const defaultKeyCursorOn = newCountriesList.length > 0 ? 0 : -1;
+    const newSelectedCountryIdx = findCountryIndexByCode(
+      selectedCountryCode,
+      newCountriesList,
+    );
+
+    setCountriesList(newCountriesList);
+    setSearchValue(newSearchValue);
+    setKeyCursorOn(
+      newSelectedCountryIdx !== -1 ? newSelectedCountryIdx : defaultKeyCursorOn,
+    );
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const lastListItemIdx = countriesList.length - 1;
+
+    if (event.code === 'Escape' || event.code === 'Tab') {
+      closeList();
+    }
+
+    if (event.code === 'ArrowDown' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn < lastListItemIdx ? keyCursorOn + 1 : 0);
+    }
+
+    if (event.code === 'ArrowUp' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn > 0 ? keyCursorOn - 1 : lastListItemIdx);
+    }
+
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      if (countriesList.length === 0) {
+        closeList();
+      } else if (keyCursorOn >= 0) {
+        onChange(countriesList[keyCursorOn], event);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.searchContainer}>
+        <div className={classes.searchIcon}>
+          <Icon type="search" />
+        </div>
+        <Input
+          value={searchValue}
+          placeholder={placeholder}
+          onChange={handleSearchChange}
+          tweakStyles={tweakInputStyles}
+          isClearable
+          shouldFocusOnMount
+        />
+      </div>
+      <div className={classes.flagList}>
+        {countriesList.map((country, index) => (
+          <ScrollIntoViewIfNeeded
+            key={country.countryCode}
+            active={keyCursorOn === index}
+            options={{ block: 'nearest' }}
+          >
+            <div
+              className={clsx(classes.listItem, {
+                [classes.activeCountry]: selectedCountryIdx === index,
+                [classes.selectedCountry]: keyCursorOn === index,
+              })}
+              onMouseEnter={() => setKeyCursorOn(index)}
+              onClick={(e) => onChange(country, e)}
+            >
+              <div className={classes.flag}>
+                <Flag countryCode={country.countryCode} />
+              </div>
+              <div className={classes.countryName}>
+                {getCountryTextByLocale(country, locale)}
+              </div>
+              <div className={classes.dialCode}>{`+${country.dialCode}`}</div>
+            </div>
+          </ScrollIntoViewIfNeeded>
+        ))}
+        {countriesList.length === 0 && (
+          <div className={classes.emptyResult}>{noMatchesLabel}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PhoneInputCountryList;

package/src/components/PhoneInput/PhoneInputCountryList/index.ts

@@ -0,0 +1,2 @@
+export { default as PhoneInputCountryList } from './PhoneInputCountryList';
+export * from './PhoneInputCountryList';

package/src/components/PhoneInput/index.ts

@@ -0,0 +1,6 @@
+export * from './PhoneInput';
+export type { PhoneInputStyles } from './PhoneInput.styles';
+export type { PhoneInputCountryListStyles } from './PhoneInputCountryList/PhoneInputCountryList.styles';
+
+export { phoneInfo } from './phone-info';
+export * from './types';