@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

package/src/components/PhoneInput/{PhoneInputCountryList → components/PhoneInputCountryList}/PhoneInputCountryList.tsx

@@ -1,147 +1,145 @@
-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;
+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>
+  );
+};

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

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

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

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

package/src/components/PhoneInput/constants.ts

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

package/src/components/PhoneInput/index.ts

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