@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,211 +1,211 @@
-import { FC, FocusEvent, useMemo, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import {
-  addDataAttributes,
-  findCountryByCode,
-  getCountryCodeFromPhone,
-  getFullPhone,
-  getPhoneMask,
-  getPhoneObjFromString,
-} from '../../helpers';
-import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Flag } from '../Flag';
-import { Icon } from '../Icon';
-import { IChangeInputEvent, IInputProps, Input } from '../Input';
-import { PhoneInputCountryList } from './components';
-import { DEFAULT_VALUE } from './constants';
-import { IChangePhoneInputEvent, IPhoneInfo, IPhoneValue } from './types';
-import { inputStyles, IPhoneInputStyles, useStyles } from './PhoneInput.styles';
-
-export interface IPhoneInputProps
-  extends Omit<
-      IInputProps,
-      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
-    >,
-    ICommonProps<IPhoneInputStyles> {
-  /** @default 'ru' */
-  locale?: string;
-  /** @default 'Поиск' */
-  codeSearchPlaceholder?: string;
-  /** @default 'Ничего не найдено' */
-  noMatchesLabel?: string;
-  /** @default { phoneNumber: '', dialCode: '' } */
-  value?: IPhoneValue;
-  onChange: (phone: IPhoneValue, event: IChangePhoneInputEvent) => void;
-}
-
-export const PhoneInput: FC<IPhoneInputProps> = ({
-  locale = 'ru',
-  value = DEFAULT_VALUE,
-  onChange,
-  data,
-  testId,
-  isDisabled,
-  isInvalid,
-  isActive,
-  tweakStyles,
-  codeSearchPlaceholder = 'Поиск',
-  noMatchesLabel = 'Ничего не найдено',
-  ...inputProps
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'PhoneInput',
-  });
-
-  const tweakCountryListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakCountryList',
-    currentComponentName: 'PhoneInput',
-  });
-
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [isFocused, setFocused] = useState(false);
-
-  const list = useRef<HTMLDivElement>(null);
-  const inputWrapper = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const phoneWithCode = getFullPhone(value);
-
-  const countryCode = useMemo(
-    () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
-  );
-
-  const handleClose = () => {
-    setIsListOpen(false);
-  };
-
-  const handleChange = (inputValue: string, event: IChangeInputEvent) => {
-    // 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: IChangePhoneInputEvent) => {
-    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: FocusEvent<HTMLInputElement>) => {
-    setFocused(true);
-    if (inputProps.onFocus !== undefined) {
-      inputProps?.onFocus(event);
-    }
-  };
-
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    setFocused(false);
-    if (inputProps.onBlur !== undefined) {
-      inputProps?.onBlur(event);
-    }
-  };
-
-  useOnClickOutsideWithRef(list, handleClose, inputWrapper);
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <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
-        value={phoneWithCode}
-        mask={getPhoneMask(countryCode)}
-        // alwaysShowMask={false}
-        ref={inputRef}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isActive={isListOpen || isActive}
-        testId={getTestId(testId, 'input')}
-        tweakStyles={tweakInputStyles}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        {...inputProps}
-      />
-
-      {isListOpen && (
-        <div className={classes.flagListContainer} ref={list}>
-          <PhoneInputCountryList
-            selectedCountryCode={countryCode}
-            placeholder={codeSearchPlaceholder}
-            locale={locale}
-            tweakStyles={tweakCountryListStyles}
-            noMatchesLabel={noMatchesLabel}
-            onChange={handleSelect}
-            closeList={handleClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, FocusEvent, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataAttributes,
+  findCountryByCode,
+  getCountryCodeFromPhone,
+  getFullPhone,
+  getPhoneMask,
+  getPhoneObjFromString,
+} from '../../helpers';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Flag } from '../Flag';
+import { Icon } from '../Icon';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
+import { PhoneInputCountryList } from './components';
+import { DEFAULT_VALUE } from './constants';
+import { IChangePhoneInputEvent, IPhoneInfo, IPhoneValue } from './types';
+import { inputStyles, IPhoneInputStyles, useStyles } from './PhoneInput.styles';
+
+export interface IPhoneInputProps
+  extends Omit<
+      IInputProps,
+      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
+    >,
+    ICommonProps<IPhoneInputStyles> {
+  /** @default 'ru' */
+  locale?: string;
+  /** @default 'Поиск' */
+  codeSearchPlaceholder?: string;
+  /** @default 'Ничего не найдено' */
+  noMatchesLabel?: string;
+  /** @default { phoneNumber: '', dialCode: '' } */
+  value?: IPhoneValue;
+  onChange: (phone: IPhoneValue, event: IChangePhoneInputEvent) => void;
+}
+
+export const PhoneInput: FC<IPhoneInputProps> = ({
+  locale = 'ru',
+  value = DEFAULT_VALUE,
+  onChange,
+  data,
+  testId,
+  isDisabled,
+  isInvalid,
+  isActive,
+  tweakStyles,
+  codeSearchPlaceholder = 'Поиск',
+  noMatchesLabel = 'Ничего не найдено',
+  ...inputProps
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const tweakCountryListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCountryList',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+
+  const list = useRef<HTMLDivElement>(null);
+  const inputWrapper = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const phoneWithCode = getFullPhone(value);
+
+  const countryCode = useMemo(
+    () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
+    [value.dialCode, value.phoneNumber],
+  );
+
+  const handleClose = () => {
+    setIsListOpen(false);
+  };
+
+  const handleChange = (inputValue: string, event: IChangeInputEvent) => {
+    // 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: IChangePhoneInputEvent) => {
+    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: FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    if (inputProps.onFocus !== undefined) {
+      inputProps?.onFocus(event);
+    }
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(false);
+    if (inputProps.onBlur !== undefined) {
+      inputProps?.onBlur(event);
+    }
+  };
+
+  useOnClickOutsideWithRef(list, handleClose, inputWrapper);
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <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
+        value={phoneWithCode}
+        mask={getPhoneMask(countryCode)}
+        // alwaysShowMask={false}
+        ref={inputRef}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isActive={isListOpen || isActive}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...inputProps}
+      />
+
+      {isListOpen && (
+        <div className={classes.flagListContainer} ref={list}>
+          <PhoneInputCountryList
+            selectedCountryCode={countryCode}
+            placeholder={codeSearchPlaceholder}
+            locale={locale}
+            tweakStyles={tweakCountryListStyles}
+            noMatchesLabel={noMatchesLabel}
+            onChange={handleSelect}
+            closeList={handleClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,21 +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} />
-);
+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/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -1,105 +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 = {
-  tweakControlWrapper: {
-    controlWrapper: {
-      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: {
+    controlWrapper: {
+      border: 'none',
+      height: 'calc(var(--control-height) - 2px)',
+    },
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+  },
+};
+
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;