@true-engineering/true-react-common-ui-kit 3.38.0 → 3.40.0

package/src/components/SmartInput/SmartInput.tsx

@@ -1,134 +1,134 @@
-import { useState, useEffect, forwardRef, FormEvent, ClipboardEvent } from 'react';
-import { Input, IInputProps } from '../Input';
-import { CharactersMap, SMART_INPUT_REGEX_MAP, TransliterationMap } from './constants';
-import { transformCaseSensitive } from './helpers';
-import { ISmartType } from './types';
-
-export interface ISmartInputProps extends IInputProps {
-  /** @default false */
-  isUpperCase?: boolean;
-  /** @default 'default' */
-  smartType?: ISmartType;
-  regExp?: RegExp;
-  onChange: (value: string) => void;
-}
-
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      onChange,
-      isUpperCase = false,
-      smartType = 'default',
-      regExp,
-      value = '',
-      maxLength,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
-    const [caretPosition, setCaretPosition] = useState<number | null>(null);
-    const [input, setInput] = useState<HTMLInputElement | null>(null);
-    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-    useEffect(() => {
-      if (input && input.type !== 'email' && input.selectionStart !== caretPosition) {
-        input.selectionStart = caretPosition;
-        input.selectionEnd = caretPosition;
-      }
-    }, [caretPosition]);
-
-    useEffect(() => {
-      setCurrentValue(getUpperCaseIfNeeded(value));
-    }, [value]);
-
-    function getUpperCaseIfNeeded(str: string) {
-      return isUpperCase ? str.toUpperCase() : str;
-    }
-
-    const handleChange = (str: string, event?: FormEvent<HTMLInputElement>) => {
-      const mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(
-                smartType,
-                smartType !== 'email' ? CharactersMap : { ...CharactersMap, '"': '@' },
-                symbol,
-              ),
-        )
-        .filter((symbol) => regex.test(symbol))
-        .join('');
-      const domElement = event?.currentTarget;
-
-      if (domElement) {
-        if (!input) {
-          setInput(domElement);
-        }
-
-        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-        onChange(getUpperCaseIfNeeded(mappedValue));
-
-        if (mappedValue !== currentValue) {
-          setCaretPosition(domElement.selectionStart);
-        } else {
-          setCaretPosition(domElement.selectionStart ? domElement.selectionStart - 1 : null);
-        }
-      }
-    };
-
-    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-      const domElement = event.currentTarget;
-
-      if (!input) {
-        setInput(domElement);
-      }
-
-      event.preventDefault();
-      const selectionStart = domElement.selectionStart ?? 0;
-      const selectionEnd = domElement.selectionEnd ?? 0;
-
-      let mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(smartType, TransliterationMap, symbol),
-        )
-        .filter((letter) => regex.test(letter))
-        .join('');
-
-      const newValueLength =
-        mappedValue.length + currentValue.length - (selectionEnd - selectionStart);
-
-      if (maxLength !== undefined && maxLength >= 0 && newValueLength > maxLength) {
-        const validMappedValueLength = mappedValue.length - (newValueLength - maxLength);
-
-        mappedValue = mappedValue.substring(0, validMappedValueLength);
-      }
-
-      const newValue = getUpperCaseIfNeeded(
-        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
-          selectionEnd,
-        )}`,
-      );
-
-      setCaretPosition(selectionStart + mappedValue.length);
-      setCurrentValue(newValue);
-      onChange(newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={ref}
-        maxLength={maxLength}
-        onChange={handleChange}
-        onPaste={handlePaste}
-        value={currentValue}
-      />
-    );
-  },
-);
+import { useState, useEffect, forwardRef, FormEvent, ClipboardEvent } from 'react';
+import { Input, IInputProps } from '../Input';
+import { CharactersMap, SMART_INPUT_REGEX_MAP, TransliterationMap } from './constants';
+import { transformCaseSensitive } from './helpers';
+import { ISmartType } from './types';
+
+export interface ISmartInputProps extends IInputProps {
+  /** @default false */
+  isUpperCase?: boolean;
+  /** @default 'default' */
+  smartType?: ISmartType;
+  regExp?: RegExp;
+  onChange: (value: string) => void;
+}
+
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      onChange,
+      isUpperCase = false,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    useEffect(() => {
+      if (input && input.type !== 'email' && input.selectionStart !== caretPosition) {
+        input.selectionStart = caretPosition;
+        input.selectionEnd = caretPosition;
+      }
+    }, [caretPosition]);
+
+    useEffect(() => {
+      setCurrentValue(getUpperCaseIfNeeded(value));
+    }, [value]);
+
+    function getUpperCaseIfNeeded(str: string) {
+      return isUpperCase ? str.toUpperCase() : str;
+    }
+
+    const handleChange = (str: string, event?: FormEvent<HTMLInputElement>) => {
+      const mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(
+                smartType,
+                smartType !== 'email' ? CharactersMap : { ...CharactersMap, '"': '@' },
+                symbol,
+              ),
+        )
+        .filter((symbol) => regex.test(symbol))
+        .join('');
+      const domElement = event?.currentTarget;
+
+      if (domElement) {
+        if (!input) {
+          setInput(domElement);
+        }
+
+        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
+        onChange(getUpperCaseIfNeeded(mappedValue));
+
+        if (mappedValue !== currentValue) {
+          setCaretPosition(domElement.selectionStart);
+        } else {
+          setCaretPosition(domElement.selectionStart ? domElement.selectionStart - 1 : null);
+        }
+      }
+    };
+
+    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
+
+      if (!input) {
+        setInput(domElement);
+      }
+
+      event.preventDefault();
+      const selectionStart = domElement.selectionStart ?? 0;
+      const selectionEnd = domElement.selectionEnd ?? 0;
+
+      let mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(smartType, TransliterationMap, symbol),
+        )
+        .filter((letter) => regex.test(letter))
+        .join('');
+
+      const newValueLength =
+        mappedValue.length + currentValue.length - (selectionEnd - selectionStart);
+
+      if (maxLength !== undefined && maxLength >= 0 && newValueLength > maxLength) {
+        const validMappedValueLength = mappedValue.length - (newValueLength - maxLength);
+
+        mappedValue = mappedValue.substring(0, validMappedValueLength);
+      }
+
+      const newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
+          selectionEnd,
+        )}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
+    );
+  },
+);

package/src/components/SmartInput/constants.ts

@@ -1,84 +1,84 @@
-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: { [key: string]: string } = {
-  й: '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 TransliterationMap: { [key: string]: string } = {
-  й: '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',
-};
+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: { [key: string]: string } = {
+  й: '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 TransliterationMap: { [key: string]: string } = {
+  й: '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,13 +1,13 @@
-import { ISmartType } from './types';
-
-export const transformCaseSensitive = (
-  smartType: ISmartType,
-  map: { [key: string]: string },
-  symbol: string,
-): string => {
-  const isUpperCase = symbol.toUpperCase() === symbol;
-  const result = smartType.endsWith('RuEn')
-    ? symbol.toLowerCase()
-    : map[symbol.toLowerCase()] ?? symbol;
-  return isUpperCase ? result.toUpperCase() : result;
-};
+import { ISmartType } from './types';
+
+export const transformCaseSensitive = (
+  smartType: ISmartType,
+  map: { [key: string]: string },
+  symbol: string,
+): string => {
+  const isUpperCase = symbol.toUpperCase() === symbol;
+  const result = smartType.endsWith('RuEn')
+    ? symbol.toLowerCase()
+    : map[symbol.toLowerCase()] ?? symbol;
+  return isUpperCase ? result.toUpperCase() : result;
+};

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,11 +1,11 @@
-export type ISmartType =
-  | 'name'
-  | 'nameRuEn'
-  | 'surname'
-  | 'surnameRuEn'
-  | 'email'
-  | 'agencyName'
-  | 'default'
-  | 'digits'
-  | 'docNumber'
-  | 'benefitCert';
+export type ISmartType =
+  | 'name'
+  | 'nameRuEn'
+  | 'surname'
+  | 'surnameRuEn'
+  | 'email'
+  | 'agencyName'
+  | 'default'
+  | 'digits'
+  | 'docNumber'
+  | 'benefitCert';

package/src/components/Switch/Switch.styles.ts

@@ -1,75 +1,75 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Switch', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  primary: {},
-
-  secondary: {},
-
-  invalid: {},
-
-  disabled: {
-    pointerEvents: 'none',
-    cursor: 'default',
-  },
-
-  checked: {
-    '& $switch::before': {
-      left: 18,
-    },
-  },
-
-  switch: {
-    position: 'relative',
-    flexShrink: 0,
-    display: 'block',
-    width: 36,
-    height: 20,
-    backgroundColor: '#333',
-    borderRadius: 10,
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'opacity, background-color',
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: 2,
-      left: 2,
-      right: 'auto',
-      display: 'block',
-      width: 16,
-      height: 16,
-      backgroundColor: '#fff',
-      borderRadius: '50%',
-      zIndex: 1,
-      transition: animations.defaultTransition,
-      transitionProperty: 'left, background-color',
-    },
-  },
-
-  input: {
-    display: 'none',
-  },
-
-  label: {
-    transition: animations.defaultTransition,
-    transitionProperty: 'opacity, color',
-  },
-
-  labelLeft: {
-    order: -1,
-    marginRight: 12,
-  },
-
-  labelRight: {
-    marginLeft: 12,
-  },
-});
-
-export type ISwitchStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Switch', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  primary: {},
+
+  secondary: {},
+
+  invalid: {},
+
+  disabled: {
+    pointerEvents: 'none',
+    cursor: 'default',
+  },
+
+  checked: {
+    '& $switch::before': {
+      left: 18,
+    },
+  },
+
+  switch: {
+    position: 'relative',
+    flexShrink: 0,
+    display: 'block',
+    width: 36,
+    height: 20,
+    backgroundColor: '#333',
+    borderRadius: 10,
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'opacity, background-color',
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 2,
+      left: 2,
+      right: 'auto',
+      display: 'block',
+      width: 16,
+      height: 16,
+      backgroundColor: '#fff',
+      borderRadius: '50%',
+      zIndex: 1,
+      transition: animations.defaultTransition,
+      transitionProperty: 'left, background-color',
+    },
+  },
+
+  input: {
+    display: 'none',
+  },
+
+  label: {
+    transition: animations.defaultTransition,
+    transitionProperty: 'opacity, color',
+  },
+
+  labelLeft: {
+    order: -1,
+    marginRight: 12,
+  },
+
+  labelRight: {
+    marginLeft: 12,
+  },
+});
+
+export type ISwitchStyles = ITweakStyles<typeof useStyles>;

package/src/components/Switch/index.ts

@@ -1,3 +1,3 @@
-export * from './Switch';
-export * from './types';
-export type { ISwitchStyles } from './Switch.styles';
+export * from './Switch';
+export * from './types';
+export type { ISwitchStyles } from './Switch.styles';

package/src/components/Switch/types.ts

@@ -1,4 +1,4 @@
-export interface ISwitchState<V = string> {
-  name: V;
-  isEnabled: boolean;
-}
+export interface ISwitchState<V = string> {
+  name: V;
+  isEnabled: boolean;
+}