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

package/src/components/SmartInput/SmartInput.tsx

@@ -1,116 +1,116 @@
-import { ClipboardEvent, forwardRef, useRef } from 'react';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { useMergedRefs } from '../../hooks';
-import { IChangeInputEvent, IInputProps, Input } from '../Input';
-import {
-  CharactersMap,
-  EmailCharactersMap,
-  SMART_INPUT_REGEX_MAP,
-  TransliterationMap,
-} from './constants';
-import { mapSymbols } from './helpers';
-import { IInputRawValue, ISmartType } from './types';
-
-export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
-  /** @default 'default' */
-  smartType?: ISmartType;
-  regExp?: RegExp;
-  /** @default false */
-  isUpperCase?: boolean;
-  /** @default true */
-  isTransliterationEnabled?: boolean;
-  onChange: (
-    value: string,
-    rawValue: IInputRawValue,
-    event?: IChangeInputEvent | ClipboardEvent<HTMLInputElement>,
-  ) => void;
-}
-
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      value = '',
-      smartType = 'default',
-      regExp,
-      maxLength,
-      isUpperCase = false,
-      isTransliterationEnabled = true,
-      onChange,
-      ...rest
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = useMergedRefs([ref, inputRef]);
-
-    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-    const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
-
-    const updateCaretPosition = (position: number | null, newValue: string) => {
-      const input = inputRef.current;
-      if (isNotEmpty(input) && input.type !== 'email') {
-        // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
-        input.value = newValue;
-        input.setSelectionRange(position, position);
-      }
-    };
-
-    const handleChange = async (str: string, event: IChangeInputEvent) => {
-      const isValid = regex.test(str);
-
-      const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
-      const newValue = getUpperCaseIfNeeded(
-        isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-
-      const input = inputRef.current;
-      if (isNotEmpty(input)) {
-        const start = input.selectionStart;
-        updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
-      }
-    };
-
-    const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault();
-
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-
-      const input = event.currentTarget;
-      const selectionStart = input.selectionStart ?? 0;
-      const selectionEnd = input.selectionEnd ?? 0;
-
-      const isValid = regex.test(str);
-
-      let mappedValue = isValid
-        ? str
-        : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
-
-      const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
-
-      if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
-        mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
-      }
-
-      const newValue = getUpperCaseIfNeeded(
-        `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-      updateCaretPosition(selectionStart + mappedValue.length, newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={mergedRef}
-        value={value}
-        maxLength={maxLength}
-        onPaste={handlePaste}
-        onChange={handleChange}
-      />
-    );
-  },
-);
+import { ClipboardEvent, forwardRef, useRef } from 'react';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useMergedRefs } from '../../hooks';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
+import {
+  CharactersMap,
+  EmailCharactersMap,
+  SMART_INPUT_REGEX_MAP,
+  TransliterationMap,
+} from './constants';
+import { mapSymbols } from './helpers';
+import { IInputRawValue, ISmartType } from './types';
+
+export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
+  /** @default 'default' */
+  smartType?: ISmartType;
+  regExp?: RegExp;
+  /** @default false */
+  isUpperCase?: boolean;
+  /** @default true */
+  isTransliterationEnabled?: boolean;
+  onChange: (
+    value: string,
+    rawValue: IInputRawValue,
+    event?: IChangeInputEvent | ClipboardEvent<HTMLInputElement>,
+  ) => void;
+}
+
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      value = '',
+      smartType = 'default',
+      regExp,
+      maxLength,
+      isUpperCase = false,
+      isTransliterationEnabled = true,
+      onChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useMergedRefs([ref, inputRef]);
+
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
+
+    const updateCaretPosition = (position: number | null, newValue: string) => {
+      const input = inputRef.current;
+      if (isNotEmpty(input) && input.type !== 'email') {
+        // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
+        input.value = newValue;
+        input.setSelectionRange(position, position);
+      }
+    };
+
+    const handleChange = async (str: string, event: IChangeInputEvent) => {
+      const isValid = regex.test(str);
+
+      const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
+      const newValue = getUpperCaseIfNeeded(
+        isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
+      );
+
+      onChange(newValue, { rawValue: str, isValid }, event);
+
+      const input = inputRef.current;
+      if (isNotEmpty(input)) {
+        const start = input.selectionStart;
+        updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
+      }
+    };
+
+    const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+
+      const input = event.currentTarget;
+      const selectionStart = input.selectionStart ?? 0;
+      const selectionEnd = input.selectionEnd ?? 0;
+
+      const isValid = regex.test(str);
+
+      let mappedValue = isValid
+        ? str
+        : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
+
+      const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
+
+      if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
+        mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
+      }
+
+      const newValue = getUpperCaseIfNeeded(
+        `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
+      );
+
+      onChange(newValue, { rawValue: str, isValid }, event);
+      updateCaretPosition(selectionStart + mappedValue.length, newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={mergedRef}
+        value={value}
+        maxLength={maxLength}
+        onPaste={handlePaste}
+        onChange={handleChange}
+      />
+    );
+  },
+);

package/src/components/SmartInput/constants.ts

@@ -1,91 +1,91 @@
-import { ICharactersMap } from './types';
-
-export const SMART_INPUT_REGEX_MAP = {
-  default: /./i,
-  agencyName: /^[a-zA-Z\s0-9-]*$/i,
-  surname: /^[a-zA-Z\s-]*$/i,
-  name: /^[a-zA-Z\s-.`']*$/i,
-  surnameRuEn: /^[a-zA-Zа-яА-Я\s-]*$/i,
-  nameRuEn: /^[a-zA-Zа-яА-Я\s-.`']*$/i,
-  email: /^[a-zA-Z0-9@_\-.+']*$/i,
-  digits: /^[0-9]*$/i,
-  docNumber: /^[a-zA-Z0-9]*$/i,
-  benefitCert: /^[a-zA-Z0-9/]*$/i,
-};
-
-export const CharactersMap: ICharactersMap = {
-  й: 'q',
-  ц: 'w',
-  у: 'e',
-  к: 'r',
-  е: 't',
-  н: 'y',
-  г: 'u',
-  ш: 'i',
-  щ: 'o',
-  з: 'p',
-  х: '[',
-  ъ: ']',
-  ф: 'a',
-  ы: 's',
-  в: 'd',
-  а: 'f',
-  п: 'g',
-  р: 'h',
-  о: 'j',
-  л: 'k',
-  д: 'l',
-  ж: ';',
-  э: "'",
-  я: 'z',
-  ч: 'x',
-  с: 'c',
-  м: 'v',
-  и: 'b',
-  т: 'n',
-  ь: 'm',
-  б: ',',
-  ю: '.',
-  ё: '`',
-};
-
-export const EmailCharactersMap: ICharactersMap = {
-  ...CharactersMap,
-  '"': '@',
-};
-
-export const TransliterationMap: ICharactersMap = {
-  й: 'i',
-  ц: 'ts',
-  у: 'u',
-  к: 'k',
-  е: 'e',
-  н: 'n',
-  г: 'g',
-  ш: 'sh',
-  щ: 'shch',
-  з: 'z',
-  х: 'h',
-  ъ: 'ie',
-  ф: 'f',
-  ы: 'y',
-  в: 'v',
-  а: 'a',
-  п: 'p',
-  р: 'r',
-  о: 'o',
-  л: 'l',
-  д: 'd',
-  ж: 'zh',
-  э: 'e',
-  я: 'ia',
-  ч: 'ch',
-  с: 's',
-  м: 'm',
-  и: 'i',
-  т: 't',
-  ь: '',
-  б: 'b',
-  ю: 'iu',
-  ё: 'e',
-};
+import { ICharactersMap } from './types';
+
+export const SMART_INPUT_REGEX_MAP = {
+  default: /./i,
+  agencyName: /^[a-zA-Z\s0-9-]*$/i,
+  surname: /^[a-zA-Z\s-]*$/i,
+  name: /^[a-zA-Z\s-.`']*$/i,
+  surnameRuEn: /^[a-zA-Zа-яА-Я\s-]*$/i,
+  nameRuEn: /^[a-zA-Zа-яА-Я\s-.`']*$/i,
+  email: /^[a-zA-Z0-9@_\-.+']*$/i,
+  digits: /^[0-9]*$/i,
+  docNumber: /^[a-zA-Z0-9]*$/i,
+  benefitCert: /^[a-zA-Z0-9/]*$/i,
+};
+
+export const CharactersMap: ICharactersMap = {
+  й: 'q',
+  ц: 'w',
+  у: 'e',
+  к: 'r',
+  е: 't',
+  н: 'y',
+  г: 'u',
+  ш: 'i',
+  щ: 'o',
+  з: 'p',
+  х: '[',
+  ъ: ']',
+  ф: 'a',
+  ы: 's',
+  в: 'd',
+  а: 'f',
+  п: 'g',
+  р: 'h',
+  о: 'j',
+  л: 'k',
+  д: 'l',
+  ж: ';',
+  э: "'",
+  я: 'z',
+  ч: 'x',
+  с: 'c',
+  м: 'v',
+  и: 'b',
+  т: 'n',
+  ь: 'm',
+  б: ',',
+  ю: '.',
+  ё: '`',
+};
+
+export const EmailCharactersMap: ICharactersMap = {
+  ...CharactersMap,
+  '"': '@',
+};
+
+export const TransliterationMap: ICharactersMap = {
+  й: 'i',
+  ц: 'ts',
+  у: 'u',
+  к: 'k',
+  е: 'e',
+  н: 'n',
+  г: 'g',
+  ш: 'sh',
+  щ: 'shch',
+  з: 'z',
+  х: 'h',
+  ъ: 'ie',
+  ф: 'f',
+  ы: 'y',
+  в: 'v',
+  а: 'a',
+  п: 'p',
+  р: 'r',
+  о: 'o',
+  л: 'l',
+  д: 'd',
+  ж: 'zh',
+  э: 'e',
+  я: 'ia',
+  ч: 'ch',
+  с: 's',
+  м: 'm',
+  и: 'i',
+  т: 't',
+  ь: '',
+  б: 'b',
+  ю: 'iu',
+  ё: 'e',
+};

package/src/components/SmartInput/helpers.ts

@@ -1,26 +1,26 @@
-import { ICharactersMap } from './types';
-
-export const mapSymbols = (
-  str: string,
-  regex: RegExp,
-  charactersMap: ICharactersMap,
-  isTransliterationEnabled: boolean,
-): string =>
-  str
-    .split('')
-    .map((symbol) => {
-      if (regex.test(symbol)) {
-        return symbol;
-      }
-      if (!isTransliterationEnabled) {
-        return '';
-      }
-
-      const mappedSymbol = charactersMap[symbol.toLowerCase()] ?? symbol;
-
-      const isUpperCase = symbol.toUpperCase() === symbol;
-      const result = isUpperCase ? mappedSymbol.toUpperCase() : mappedSymbol;
-
-      return regex.test(result) ? result : '';
-    })
-    .join('');
+import { ICharactersMap } from './types';
+
+export const mapSymbols = (
+  str: string,
+  regex: RegExp,
+  charactersMap: ICharactersMap,
+  isTransliterationEnabled: boolean,
+): string =>
+  str
+    .split('')
+    .map((symbol) => {
+      if (regex.test(symbol)) {
+        return symbol;
+      }
+      if (!isTransliterationEnabled) {
+        return '';
+      }
+
+      const mappedSymbol = charactersMap[symbol.toLowerCase()] ?? symbol;
+
+      const isUpperCase = symbol.toUpperCase() === symbol;
+      const result = isUpperCase ? mappedSymbol.toUpperCase() : mappedSymbol;
+
+      return regex.test(result) ? result : '';
+    })
+    .join('');

package/src/components/SmartInput/index.ts

@@ -1,2 +1,2 @@
-export * from './SmartInput';
-export * from './types';
+export * from './SmartInput';
+export * from './types';

package/src/components/SmartInput/types.ts

@@ -1,18 +1,18 @@
-export type ICharactersMap = Record<string, string>;
-
-export interface IInputRawValue {
-  rawValue: string;
-  isValid: boolean;
-}
-
-export type ISmartType =
-  | 'name'
-  | 'nameRuEn'
-  | 'surname'
-  | 'surnameRuEn'
-  | 'email'
-  | 'agencyName'
-  | 'default'
-  | 'digits'
-  | 'docNumber'
-  | 'benefitCert';
+export type ICharactersMap = Record<string, string>;
+
+export interface IInputRawValue {
+  rawValue: string;
+  isValid: boolean;
+}
+
+export type ISmartType =
+  | 'name'
+  | 'nameRuEn'
+  | 'surname'
+  | 'surnameRuEn'
+  | 'email'
+  | 'agencyName'
+  | 'default'
+  | 'digits'
+  | 'docNumber'
+  | 'benefitCert';