@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha0

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

@@ -1,103 +1,105 @@
-import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
-import { IInputStyles } from '../../../Input';
-
-const ROW_HEIGHT = 40;
-const LIST_PADDING = 10;
-
-export const useStyles = createThemedStyles('PhoneInputCountryList', {
-  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],
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    border: 'none',
-    height: 'calc(var(--control-height) - 2px)',
-  },
-
-  input: {
-    fontSize: 14,
-    lineHeight: '20px',
-    letterSpacing: 0.15,
-  },
-};
-
-export type IPhoneInputCountryListStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakInput: IInputStyles }
->;
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
+
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 10;
+
+export const useStyles = createThemedStyles('PhoneInputCountryList', {
+  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],
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  tweakControlWrapper: {
+    root: {
+      border: 'none',
+      height: 'calc(var(--control-height) - 2px)',
+    },
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+  },
+};
+
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;

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

@@ -1,155 +1,155 @@
-import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import { phoneInfo } from '../../../../constants';
-import {
-  checkSearchStringInCountry,
-  getCountryTextByLocale,
-  findCountryIndexByCode,
-  sortCountriesByLocale,
-} from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Flag } from '../../../Flag';
-import { Icon } from '../../../Icon';
-import { Input } from '../../../Input';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { IPhoneInfo } from '../../types';
-import {
-  useStyles,
-  IPhoneInputCountryListStyles,
-  inputStyles,
-} from './PhoneInputCountryList.styles';
-
-export interface IPhoneInputCountryListProps
-  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
-  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 = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'PhoneInputCountryList',
-  });
-
-  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>
-  );
-};
+import { FC, useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { phoneInfo } from '../../../../constants';
+import {
+  checkSearchStringInCountry,
+  findCountryIndexByCode,
+  getCountryTextByLocale,
+  sortCountriesByLocale,
+} from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Flag } from '../../../Flag';
+import { Icon } from '../../../Icon';
+import { IChangeInputEvent, Input } from '../../../Input';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { IPhoneInfo } from '../../types';
+import {
+  inputStyles,
+  IPhoneInputCountryListStyles,
+  useStyles,
+} from './PhoneInputCountryList.styles';
+
+export interface IPhoneInputCountryListProps
+  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
+  selectedCountryCode?: string;
+  locale: string;
+  placeholder: string;
+  noMatchesLabel: string;
+  closeList: () => void;
+  onChange: (country: IPhoneInfo, event: IChangeInputEvent | KeyboardEvent) => void;
+}
+
+export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
+  locale,
+  placeholder,
+  selectedCountryCode,
+  closeList,
+  noMatchesLabel,
+  onChange,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInputCountryList',
+  });
+
+  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>
+  );
+};

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

@@ -1,2 +1,2 @@
-export * from './PhoneInputCountryList';
-export type { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
+export * from './PhoneInputCountryList';
+export type { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';

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

@@ -1 +1 @@
-export * from './PhoneInputCountryList';
+export * from './PhoneInputCountryList';

package/src/components/PhoneInput/constants.ts

@@ -1,3 +1,3 @@
-import { IPhoneValue } from './types';
-
-export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };
+import { IPhoneValue } from './types';
+
+export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };

package/src/components/PhoneInput/index.ts

@@ -1,4 +1,4 @@
-export * from './PhoneInput';
-export * from './types';
-export type { IPhoneInputStyles } from './PhoneInput.styles';
-export type { IPhoneInputCountryListStyles } from './components';
+export * from './PhoneInput';
+export * from './types';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

package/src/components/PhoneInput/types.ts

@@ -1,16 +1,20 @@
-export interface IPhoneInfo {
-  countryEn: string;
-  countryRu: string;
-  countryCode: string;
-  dialCode: string;
-  phoneMask?: string;
-  dialCodePriority?: number;
-  areaCodes?: string[];
-  fullCodes: string[];
-}
-
-export interface IPhoneValue {
-  phoneNumber?: string;
-  dialCode?: string;
-  countryCode?: string;
-}
+import { IChangeInputEvent } from '../Input';
+
+export interface IPhoneInfo {
+  countryEn: string;
+  countryRu: string;
+  countryCode: string;
+  dialCode: string;
+  phoneMask?: string;
+  dialCodePriority?: number;
+  areaCodes?: string[];
+  fullCodes: string[];
+}
+
+export interface IPhoneValue {
+  phoneNumber?: string;
+  dialCode?: string;
+  countryCode?: string;
+}
+
+export type IChangePhoneInputEvent = IChangeInputEvent | KeyboardEvent;