@true-engineering/true-react-common-ui-kit 2.1.0 → 2.1.1

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

@@ -1,100 +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>;
+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

@@ -1,171 +1,147 @@
-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;
+import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import {
+  checkSearchStringInCountry,
+  getCountryTextByLocale,
+  findCountryIndexByCode,
+  sortCountriesByLocale,
+} from '../../../helpers';
+import { useTheme, useTweakStyles } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import { Flag } from '../../Flag';
+import { Icon } from '../../Icon';
+import { Input } from '../../Input';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import { phoneInfo } from '../phone-info';
+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

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

package/src/components/PhoneInput/index.ts

@@ -1,6 +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';
+export * from './PhoneInput';
+export type { PhoneInputStyles } from './PhoneInput.styles';
+export type { PhoneInputCountryListStyles } from './PhoneInputCountryList/PhoneInputCountryList.styles';
+
+export { phoneInfo } from './phone-info';
+export * from './types';